• Save
Responsive Web Design & Development
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design & Development

on

  • 4,120 views

A 23 slide presentation discussing the benefits, challenges, and technical methods of implementing responsive web views.

A 23 slide presentation discussing the benefits, challenges, and technical methods of implementing responsive web views.

Statistics

Views

Total Views
4,120
Views on SlideShare
3,551
Embed Views
569

Actions

Likes
9
Downloads
0
Comments
0

4 Embeds 569

http://shreelimbkar.wordpress.com 381
http://www.scoop.it 179
https://shreelimbkar.wordpress.com 6
http://biologija.le.in.rs 3

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Responsive Web Design & Development Responsive Web Design & Development Presentation Transcript

  • Responsive WebDesign & Development John Fitzgerald
  • OverviewWhat is Responsive Web DesignBenefits of adoptionChallenges of adoptionResponsive methods (The Technical Part)Helper Tools
  • What is RWD?A method of building web views whichadapt to the display of the device onwhich they are viewed View slide
  • Benefits of Building ResponsivelyAllows the development of a consolidated front-end codebase for use on all devicesImproves maintainability of codebaseReduces frequency of app submissions and allowsapps to be updated transparently, without forcingusers to download from iTunes or AndroidMarketplaceReduces expense of maintaining separate teamsto maintain codebases for different devices View slide
  • The Challenges of Becoming Responsive More thought must go into designs Designer and developer learning curve Responsive views take more time to build than fixed views* Responsive views require more testing than fixed views** but not more than 3 separate views.
  • Responsive MethodsReset CSSPercentage WidthsResponsive Font SizingResponsive Image SizingViewport ControlCSS Media Queries
  • Reset CSShtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-decoration:none; list-style:none;}
  • Percentage Widths
  • The Most Important Equation in theResponsive Web WorldTARGET / CONTEXT = RESULT
  • Typical % Calculation 445px / 898px = 0.495545657
  • Commenting % Widths#header #btn-homepage{ position:absolute; width:16.17977528%; /* 144 / 890 */ min-width: 100px; bottom:20px; right:0;}
  • Hazards of PercentagesMargin:Calculated based on width of parent of theelement to which they’re assigned.Padding:Calculated based on the width of the element towhich they’re assigned.
  • Responsive Font Sizingem units rather than pixelsDefault font size in browsers: 16 pixels
  • Responsive Images
  • Responsive Images max-width: 100%;Constrains image width to a maximum of the sizeof the containing elementSupported in all modern browsersImages sized in this way are downloaded at nativesize, even if displayed at far smaller scale.Background images and sprites have limitedusefulness in responsive web design, due tocurrently-supported browser feature-sets.
  • Viewport Control <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"/> Property Description Width of the viewport in pixels (or device-width). width If width isn’t set, it defaults to a desktop size (980px on mobile Safari). Height of the viewport in pixels (or device-height). height Generally you don’t need to worry about setting this property. (0 to 10.0) Multiplier that sets the scale of the page after its initial display. initial-scale Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out minimum- (0 to 10.0) The minimum multiplier the user can “zoom out” to. scale Defaults to 0.25 on mobile Safari. maximum- (0 to 10.0) The minimum multiplier the user can “zoom in” to. scale Defaults to 1.6 on mobile Safari. (yes/no) Whether to allow a user from scaling in/out (zooming in/out).user-scalable Default to “yes” on mobile Safari.
  • CSS Media Queries Two ways to use media queries:<link rel="stylesheet" href="screen.css"media="screen and (min-width: 1024px)" />@media screen and (min-width: 1024px) {} The logical “and” can be used to join multiple queries@media screen and (min-width: 1024px)and (max-width: 1228px) {}
  • Media Query FeaturesMedia queries test for the existence or extent ofdevice features to conditionally load CSS or applystyles.“Rendering Surface” is the device’s entire screen.“Display Area” is the browser window on thedevice.
  • HAS min- ANDFEATURE DEFINITION max- PREFIXES width The width of the display area YES height The height of the display area YES device-width The width of the device’s rendering surface YESdevice-height The Height of the device’s rendering surface YES orientation Accepts portrait or landscape value NO Ratio of the display area’s width over its height. For example: on a desktop, aspect-ratio YES you’d be able to query if the browser window is at a 16:9 aspect ratio.device-aspect- Ratio of the device’s rendering surface width over its height. For example: on YES ratio a desktop, you’d be able to query if the screen is at a 16:9 aspect ratio. The number of bits per color component of the device. For example, an 8-bit color color device would successfully pass a query of (color: 8). Non-color devices YES should return a value of 0. The number of entries in the color lookup table of the output device. For color-index YES example, @media screen and (min-color-index: 256). The number of bits per pixel on a monochrome device If the device is not amonochrome YES monochrome device, the output device value will be 0. Tests the density of the pixels in the device, such as: resolution YES screen and (resolution: 72dpi) or screen and (max-resolution: 300dpi). For tv-based browsing, measures whether the scanning process is either scan NO progressive or scan. Tests whether the device is a grid-based display, like feature phones with one grid NO fixed-width font. Can be expressed simply as (grid).
  • Device-specific Queries/* Smartphones (portrait and landscape) */ /* iPads (portrait) */@media only screen @media only screenand (min-device-width : 320px) and (min-device-width : 768px)and (max-device-width : 480px) { and (max-device-width : 1024px)/* Styles */ and (orientation : portrait) {} /* Styles */ }/* Smartphones (landscape) */@media only screen /* Desktops and laptops */and (min-width : 321px) { @media only screen/* Styles */ and (min-width : 1224px) {} /* Styles */ }/* Smartphones (portrait) */@media only screen /* Large screens */and (max-width : 320px) { @media only screen/* Styles */ and (min-width : 1824px) {} /* Styles */ }/* iPads (portrait and landscape) */@media only screen /* iPhone 4 */and (min-device-width : 768px) @mediaand (max-device-width : 1024px) { only screen and (-webkit-min-device-pixel-ratio :/* Styles */ 1.5),} only screen and (min-device-pixel-ratio : 1.5) { /* Styles *//* iPads (landscape) ----------- */ }@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {/* Styles */}
  • Helper ToolsModernizr:A JavaScript Library which allows web viewswhich take advantage of less-fully supportedfeatures to display properly on older browsers.modernizr.comSkeleton:A library of JavaScript and CSS files meant toallow fast creation of responsive web views.getskeleton.com
  • Final ThoughtsTo achieve the best results, front-end devs anddesigners should collaborate when creatingresponsive mocks/templates.Responsiveness is a mindset. When approachinga new view, resist the urge to lock things downand, instead, think fluidly.Responsive Web Design is evolving as standardsand browser adoption of those standards change.There is no substitute for looking at a view on thedevices on which users will be viewing it.
  • ?’s