Responsive DesignTopic :
Milan AdamovskyPresenter :
05 / 30 / 2013Date :
http://milan.adamovsky.comBlog :
milan.adamovsky@...
7/2/2013 Prepared & Presented by Milan Adamovsky 2
• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design E...
7/2/2013 Prepared & Presented by Milan Adamovsky 3
• Content pushed inline
• Pixels
• Nothing resizes
• No specifics
• Min...
7/2/2013 Prepared & Presented by Milan Adamovsky 4
• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design E...
7/2/2013
Prepared & Presented by Milan
Adamovsky
5
• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design E...
7/2/2013 Prepared & Presented by Milan Adamovsky 6
• Floated
• No explicit resizing
• Predecessor to responsive
• Keep inf...
7/2/2013 Prepared & Presented by Milan Adamovsky 7
• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design E...
7/2/2013 Prepared & Presented by Milan Adamovsky 8
• Fixed
• Fluid
• Elastic
• Accessibility
• Responsive
• Adaptive
Desig...
7/2/2013 Prepared & Presented by Milan Adamovsky 9
• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design E...
7/2/2013 Prepared & Presented by Milan Adamovsky 10
• Do not use JavaScript
• Only use CSS engine
• No hidden cheat markup...
7/2/2013 Prepared & Presented by Milan Adamovsky 11
• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design ...
7/2/2013 Prepared & Presented by Milan Adamovsky 12
• Do not use JavaScript
• Only use CSS engine
• No hidden cheat markup...
7/2/2013 Prepared & Presented by Milan Adamovsky 13
• Progressively enhance
• Use of CSS3
• Use of @media
• Fluid grids *
...
7/2/2013 Prepared & Presented by Milan Adamovsky 14
Graceful Degradation Example
@media screen and (max-width: 320px)
{
bo...
7/2/2013 Prepared & Presented by Milan Adamovsky 15
Progressive Enhancement Example
@media screen and (min-width: 0px)
{
b...
7/2/2013 Prepared & Presented by Milan Adamovsky 16
CSS File Override
0 320 480 600 992 1382
Design Benefits
• Progressive...
7/2/2013 Prepared & Presented by Milan Adamovsky 17
• What do you need ?
• What do you want ?
Stop & Think
• What’s best f...
7/2/2013 Prepared & Presented by Milan Adamovsky 18
File Hierarchy
• Router CSS file *
• Two tiers
• Section filenames
htt...
7/2/2013 Prepared & Presented by Milan Adamovsky 19
Typical Section CSS File
• Proper order
• No media queries
• Min-width...
7/2/2013 Prepared & Presented by Milan Adamovsky 20
Min-width: 0
div
{
border: 1;
}
Min-width: 480
div
{
border: 3;
}
Min-...
7/2/2013 Prepared & Presented by Milan Adamovsky 21
Router CSS File @import url(global.css);
@import url(footer.css);
@imp...
7/2/2013 Prepared & Presented by Milan Adamovsky 22
Media Query Begin Files
• Section agnostic
• Only one media query
• No...
7/2/2013 Prepared & Presented by Milan Adamovsky 23
@media only screen and (min-width: 320px)
{
}
File: /@media/320
File: ...
7/2/2013 Prepared & Presented by Milan Adamovsky 24
@media only screen and (min-width: 320px) and (max-width: 480px)
{
}
F...
7/2/2013 Prepared & Presented by Milan Adamovsky 25
Homepage: https://github.com/buunguyen/combres
Configuration: XML
Inte...
7/2/2013 Prepared & Presented by Milan Adamovsky 26
Phone
Tablet
Desktop
Full
Responsive
Adaptive
7/2/2013 Prepared & Presented by Milan Adamovsky 27
File Hierarchy
• Optional temp folder
• Three tiers
http://www.com/con...
7/2/2013 Prepared & Presented by Milan Adamovsky 28
• Bucket number is arbitrary
• Bucket always pre-built
Noteworthy
• Bu...
7/2/2013 Prepared & Presented by Milan Adamovsky 29
Lifecycle
Request Cache Server Web Server Web Page
User Agent Device T...
function includeCSS(section)
{
html csshtml;
string x = "adaptive/" + request.device + "/" + section + ".css";
csshtml = "...
<link href="adaptive/tablet/contact.css" rel="stylesheet" type="text/css">
7/2/2013 Prepared & Presented by Milan Adamovsk...
function includeCSS(section)
{
html csshtml;
string device = querystring["device"] || request.device;
string x = "adaptive...
7/2/2013 Prepared & Presented by Milan Adamovsky 33
Mobile Scaling
<meta name="viewport"
content="width=device-width,
init...
7/2/2013 Prepared & Presented by Milan Adamovsky 34
Text Inflation
7/2/2013
Prepared & Presented by Milan
Adamovsky
35
• Less custom
• More uniform
• More predictable
• Responsive Ready
• P...
7/2/2013 Prepared & Presented by Milan Adamovsky 36
• Market traction
Grid Systems
• Do not reinvent the wheel
• Align bus...
7/2/2013 Prepared & Presented by Milan Adamovsky 37
Elastic Images <img src=somepic.jpg>
img
{
max-width: 100%;
}
• Image ...
7/2/2013 Prepared & Presented by Milan Adamovsky 38
Elastic Sprite Example <div id=logo_container>
<div id=logo_content>
<...
7/2/2013 Prepared & Presented by Milan Adamovsky 39
Internet Explorer Support
<!--[if lt IE 9]>
<script src="http://css3-m...
7/2/2013 Prepared & Presented by Milan Adamovsky 40
Bing SEO *
By outputting only one URL for the same content, you will h...
7/2/2013 Prepared & Presented by Milan Adamovsky 41
Mobile Tester
Mobile Resizer
Useful Testing Tools
• Chrome Browser Add...
7/2/2013 Prepared & Presented by Milan Adamovsky 42
1. Extrapolate all media query blocks into their own files
2. File the...
Upcoming SlideShare
Loading in...5
×

Responsive & Adaptive Web Design

1,416

Published on

In this presentation we explore how to effectively combine Responsive (RWD) and Adaptive (AWD) concepts to get a powerful combo.

This was presented in New York Web Development community (http://www.nywebtech.com) on June 20th, 2013.

If there is interest for a presentation please contact me.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,416
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive & Adaptive Web Design

  1. 1. Responsive DesignTopic : Milan AdamovskyPresenter : 05 / 30 / 2013Date : http://milan.adamovsky.comBlog : milan.adamovsky@gmail.comEmail :
  2. 2. 7/2/2013 Prepared & Presented by Milan Adamovsky 2 • Fixed • Fluid • Elastic • Accessible • Responsive • Adaptive Design Evolution Paradigm Adoption • Static
  3. 3. 7/2/2013 Prepared & Presented by Milan Adamovsky 3 • Content pushed inline • Pixels • Nothing resizes • No specifics • Minimum 640px width Fixed Positions Fixed Dimensions • Nothing repositions • Pixels • System agnostic • Simplest implementation Considerations • Browser agnostic
  4. 4. 7/2/2013 Prepared & Presented by Milan Adamovsky 4 • Fixed • Fluid • Elastic • Accessible • Responsive • Adaptive Design Evolution Paradigm Adoption • Static 960
  5. 5. 7/2/2013 Prepared & Presented by Milan Adamovsky 5 • Fixed • Fluid • Elastic • Accessible • Responsive • Adaptive Design Evolution Paradigm Adoption • Static
  6. 6. 7/2/2013 Prepared & Presented by Milan Adamovsky 6 • Floated • No explicit resizing • Predecessor to responsive • Keep information visible • Width agnostic Elements Purpose • Shifts according to container • Mobile friendly • Avoid fixed content • Less predictable Considerations • Mix with elastic design • Supported in all browsers
  7. 7. 7/2/2013 Prepared & Presented by Milan Adamovsky 7 • Fixed • Fluid • Elastic • Accessible • Responsive • Adaptive Design Evolution Paradigm Adoption • Static % %
  8. 8. 7/2/2013 Prepared & Presented by Milan Adamovsky 8 • Fixed • Fluid • Elastic • Accessibility • Responsive • Adaptive Design Evolution Paradigm Adoption • Static
  9. 9. 7/2/2013 Prepared & Presented by Milan Adamovsky 9 • Fixed • Fluid • Elastic • Accessible • Responsive • Adaptive Design Evolution Paradigm Adoption • Static
  10. 10. 7/2/2013 Prepared & Presented by Milan Adamovsky 10 • Do not use JavaScript • Only use CSS engine • No hidden cheat markup • Keep page lightweight • No markup regeneration Dos & Don’ts • Reuse same markup • Use @media queries • Speed is key • Not same as adaptive Reminders • @import downloads files • Not supported < IE9 • Use @import at-rule • Mobile first • Use min-width
  11. 11. 7/2/2013 Prepared & Presented by Milan Adamovsky 11 • Fixed • Fluid • Elastic • Accessible • Responsive • Adaptive Design Evolution Paradigm Adoption • Static
  12. 12. 7/2/2013 Prepared & Presented by Milan Adamovsky 12 • Do not use JavaScript • Only use CSS engine • No hidden cheat markup • Keep page lightweight • No markup regeneration Dos & Don’ts • Different markup per device • Use server-side logic • Keep CSS minimal • Keep JS minimal Reminders • Keep markup minimal • Supported in all browsers • Only target given device • Mobile first
  13. 13. 7/2/2013 Prepared & Presented by Milan Adamovsky 13 • Progressively enhance • Use of CSS3 • Use of @media • Fluid grids * • EMs * Responsive Design Basics • Minimum widths • Flexible images • Respond to any device • Respond to any width Idea • Ethan Marcotte * Optional • Flexible videos • Fluid type *
  14. 14. 7/2/2013 Prepared & Presented by Milan Adamovsky 14 Graceful Degradation Example @media screen and (max-width: 320px) { body { background-color: #fff; } } @media screen and (max-width: 480px) { body { background-color: #000; } }
  15. 15. 7/2/2013 Prepared & Presented by Milan Adamovsky 15 Progressive Enhancement Example @media screen and (min-width: 0px) { body { background-color: #fff; } } @media screen and (min-width: 320px) { body { background-color: #000; } }
  16. 16. 7/2/2013 Prepared & Presented by Milan Adamovsky 16 CSS File Override 0 320 480 600 992 1382 Design Benefits • Progressively add styles as they are needed for given min-width • Use the zero min-width as the site’s base style • Prevents heavier device styles from loading in lighter devices • Promote a disciplined style management culture to avoid bloat
  17. 17. 7/2/2013 Prepared & Presented by Milan Adamovsky 17 • What do you need ? • What do you want ? Stop & Think • What’s best for you ? • What to leverage ? • What device support ? • Borrows responsive concepts • Borrows elastic concepts • Borrows fluid concepts • Does not rely on grids • Does not rely on EMs Our Solution • Borrows adaptive concepts • Uses assembler • Uses minifier • Uses global include function
  18. 18. 7/2/2013 Prepared & Presented by Milan Adamovsky 18 File Hierarchy • Router CSS file * • Two tiers • Section filenames http://www.com/contact/index.html Section: contact First Tier • min-width Second Tier • max-width
  19. 19. 7/2/2013 Prepared & Presented by Milan Adamovsky 19 Typical Section CSS File • Proper order • No media queries • Min-width CSS only http://www.com/contact/index.html Section: contact Min-width: 320 selector { property: value; } .some_class { property: value; } • Allow overrides Design Benefits • Cache server support • IE8 and older support • Mobile desktop ready
  20. 20. 7/2/2013 Prepared & Presented by Milan Adamovsky 20 Min-width: 0 div { border: 1; } Min-width: 480 div { border: 3; } Min-width: 768 div { border: 5; }
  21. 21. 7/2/2013 Prepared & Presented by Milan Adamovsky 21 Router CSS File @import url(global.css); @import url(footer.css); @import url(header.css); @media … min-width: 320px @import url(320/contact.css); @media … min-width: 480px; @import url(480/contact.css); @media … min-width: 600px; @import url(600/contact.css); @import url(600/footer.css); @import url(600/header.css); @media … min-width: 768px; @import url(768/contact.css); @media … min-width: 992px; @import url(992/contact.css); @import url(992/footer.css); @media … min-width: 1382px; @import url(1382/contact.css); • Manages media queries • Contains media cut-offs • One router per section • Adaptive ready • Dependency overview • Clean separation Major Disadvantage • All files download
  22. 22. 7/2/2013 Prepared & Presented by Milan Adamovsky 22 Media Query Begin Files • Section agnostic • Only one media query • No closing brace @media only screen and (min-width: 320px) { Media Query End Files • Only a closing brace }
  23. 23. 7/2/2013 Prepared & Presented by Milan Adamovsky 23 @media only screen and (min-width: 320px) { } File: /@media/320 File: /320/contact.css File: /@media/end body { background-color: #000; }
  24. 24. 7/2/2013 Prepared & Presented by Milan Adamovsky 24 @media only screen and (min-width: 320px) and (max-width: 480px) { } File: /@media/320/480 File: /320/480/contact.css File: /@media/end body { background-color: #fff; }
  25. 25. 7/2/2013 Prepared & Presented by Milan Adamovsky 25 Homepage: https://github.com/buunguyen/combres Configuration: XML Integration: ASP.NET Assemblers • Combres Homepage: http://www.gruntjs.com Configuration: JavaScript Integration: Command-line, NodeJS • GruntJS
  26. 26. 7/2/2013 Prepared & Presented by Milan Adamovsky 26 Phone Tablet Desktop Full Responsive Adaptive
  27. 27. 7/2/2013 Prepared & Presented by Milan Adamovsky 27 File Hierarchy • Optional temp folder • Three tiers http://www.com/contact/index.html Section: contact First Tier • Paradigm Second Tier • Buckets Third Tier • CSS files Buckets: phone, tablet desktop, full
  28. 28. 7/2/2013 Prepared & Presented by Milan Adamovsky 28 • Bucket number is arbitrary • Bucket always pre-built Noteworthy • Buckets are arbitrary • Tablet builds on Phone • Phone builds on “base” • Full builds on all • Full has no @media queries • Assembler pre-builds all files Workflow Logic • Desktop builds on Tablet • Device is resolved • Device is passed to function • Function include pre-built file
  29. 29. 7/2/2013 Prepared & Presented by Milan Adamovsky 29 Lifecycle Request Cache Server Web Server Web Page User Agent Device Type Phone Tablet Desktop Full CSS Files includeCSS() Pre-build
  30. 30. function includeCSS(section) { html csshtml; string x = "adaptive/" + request.device + "/" + section + ".css"; csshtml = "<link href=' + x + ' rel='stylesheet' type='text/css'>"; return csshtml; } 7/2/2013 Prepared & Presented by Milan Adamovsky 30 Include Function • Takes one parameters • Included on every page • Returns link markup • PHP, ASP, JSP, SSI, etc. Achieved Goals • No flicker • Do not rely on JavaScript • No copy & paste • Central maintenance
  31. 31. <link href="adaptive/tablet/contact.css" rel="stylesheet" type="text/css"> 7/2/2013 Prepared & Presented by Milan Adamovsky 31 Include Function Example <% includeCSS('contact'); %> Function Output
  32. 32. function includeCSS(section) { html csshtml; string device = querystring["device"] || request.device; string x = "adaptive/" + device + "/" + section + ".css"; csshtml = "<link href=' + x + ' rel='stylesheet' type='text/css'>"; return csshtml; } 7/2/2013 Prepared & Presented by Milan Adamovsky 32 Optional Improvement • Ideal for testing • Force device type Usage • Append ?device= to URL
  33. 33. 7/2/2013 Prepared & Presented by Milan Adamovsky 33 Mobile Scaling <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> html { -webkit-text-size-adjust: 100%; } • iPhone doesn’t • Android auto-scales • Do not use ; delimiter[1] • Use constants • Play with options HTML: Auto-scale CSS: Text inflation Text Inflation • Not standardized • Never use none • Opt-out not in text-size-adjust -moz-text-size-adjust -ms-text-size-adjust
  34. 34. 7/2/2013 Prepared & Presented by Milan Adamovsky 34 Text Inflation
  35. 35. 7/2/2013 Prepared & Presented by Milan Adamovsky 35 • Less custom • More uniform • More predictable • Responsive Ready • Percentage based Grid Architecture • Interval spacing • More maintainable • Think in columns • Often 12-column
  36. 36. 7/2/2013 Prepared & Presented by Milan Adamovsky 36 • Market traction Grid Systems • Do not reinvent the wheel • Align business to think in grid • Grid System Generator (http://www.gridsystemgenerator.com) Tools • Scaffolding (http://twitter.github.io/bootstrap/scaffolding.html) • 960 Grid System (http://www.960.gs)
  37. 37. 7/2/2013 Prepared & Presented by Milan Adamovsky 37 Elastic Images <img src=somepic.jpg> img { max-width: 100%; } • Image element • Resize proportionally • Background sprites: no • Foreground sprites: yes resize • Percentage of container Implementation • Can be any percentage • Extremely easy • Observe pixelation
  38. 38. 7/2/2013 Prepared & Presented by Milan Adamovsky 38 Elastic Sprite Example <div id=logo_container> <div id=logo_content> </div> </div> #logo_container { position: relative; } #logo_content { background-image: url(..); background-position: 50% 0; background-repeat: no- repeat; background-size: 100% auto; display: block; padding-top: 50%; width: 100%; } • Sprite is content • Always use container • Positioned container • Normal sprite • Width is required • Padding defines height Practical Use • Replaces elastic image
  39. 39. 7/2/2013 Prepared & Presented by Milan Adamovsky 39 Internet Explorer Support <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/ svn/trunk/css3-mediaqueries.js"></script> <![endif]--> Notice • JavaScript based shim • Doesn’t work with @import • Works on IE5+ • Buggy • Use sparingly, if at all
  40. 40. 7/2/2013 Prepared & Presented by Milan Adamovsky 40 Bing SEO * By outputting only one URL for the same content, you will have the following benefits: 1. You have more ranking signals coming to this URL. Example: the vast majority of mobile URLs do not have inbound links from other websites as people do not link to mobiles URLs like they link to regular web-situated URLs. 2. This is also less search engine crawler traffic coming to your web servers, which is especially useful for large websites. Fewer URLs to crawl reduces the bandwidth our crawlers consume. 3. Less work (and potentially less cost) building, updating and maintaining a stand-alone mobile-focused website. Now that you have a single URL for each piece of your content, how do you optimize your website for different platforms? 1. By performing client browser detection (user agent, customer preferences, etc.), you can still optimize the display for the device your customers are using. This topic is presented in detail in the document Designing Web Sites for Phone Browsers; please note that this document does touch briefly on the subject of redirection to alternate URLs for mobile content, which is not the approach we recommend for best SEO results. Google SEO * Google supports smartphone-optimized sites in three configurations: 1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's recommended configuration. 2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device. 3. Sites that have separate mobile and desktop URLs.
  41. 41. 7/2/2013 Prepared & Presented by Milan Adamovsky 41 Mobile Tester Mobile Resizer Useful Testing Tools • Chrome Browser Add-ons Web Developer • FireFox Browser Add-ons Keynote DeviceAnywhere (http://www.deviceanywhere.com) • Device Emulators AppThwack (https://appthwack.com) MobilePhoneEmulator (http://www.mobilephoneemulator.com)
  42. 42. 7/2/2013 Prepared & Presented by Milan Adamovsky 42 1. Extrapolate all media query blocks into their own files 2. File these files into their respective folders 3. Make minor adjustments Conversion Questions • How do I convert our scattered responsive implementation ? 1. Dump your old file into a 0/legacy.css 3. Gradually extrapolate sections into respective files 4. Remove legacy.css • How do I convert our non-responsive implementation ? 2. Include 0/legacy.css as your global base
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×