CSS Layout Techniques


Published on

This is the presentation I use during my training on web design and development. It discusses current practices of web page layout development with the help of CSS. It also describes the distinction between confusing and often overlapping terms such as adaptive & responsive layout, fluid/relative/liquid/elastic layouts.

Published in: Design, Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

CSS Layout Techniques

  1. 1. CSS Layout TechniquesCurrent practices of web pagelayout developmenthttp://definitelysimple.com 1
  2. 2. Goals• Understand different layout terminology• Differentiate various overlapping terms– Layout vs. design– Implementation vs. approach• Glance at CSS3 specification• Choosing appropriate layout strategyhttp://definitelysimple.com 2
  3. 3. About• DS – Definitely Simple– Articles and case studies– Everyday subjects• Computers, economics, politics, sociology– Goal of simplicity and elegance• Visit at– http://definitelysimple.comhttp://definitelysimple.com 3
  4. 4. Web page layouts• Need– Web evolved from simple text-baseddocument serving to complex image andother multimedia serving sites– Web transitioned from web sites to web appshttp://definitelysimple.com 4
  5. 5. Text only websites5
  6. 6. Websites with images6
  7. 7. Multimedia & web apps7
  8. 8. http://definitelysimple.com 8ComplexityTime1990 2013HTML servingpages withonly textImages areserved alongwith textMultimediasupport &pluginsWebsitesturning webappsFor each feature added toHTML, the layout complexitygoes up exponentially
  9. 9. Early efforts• No CSS to manage complexity• Multicolumn layouts with Tables– HTML <table> tag with border=“0”http://definitelysimple.com 9<tr><td>col 1 row 1</td> <td>col 2 row 1</td></tr><tr><td>col 1 row 2</td></tr>
  10. 10. Problems with <table>• Semantic violations– Mixing markup with presentation• Hard to maintain• Screen reader issues• Performance problem– <table> needs more browser reflowshttp://definitelysimple.com 10
  11. 11. Rise of CSS• Separate markup (HTML) frompresentation (styling)– CSS float and clear– CSS display: block, inline, inline-block• Solved problems of <table> taghttp://definitelysimple.com 11
  12. 12. CSS Evolution• Evolved from simple styling to medium forlaying out complex web page layouts• Different approaches and philosophiesemerged for CSS layoutshttp://definitelysimple.com 12
  13. 13. http://definitelysimple.com 13CSSLayouts
  14. 14. http://definitelysimple.com 14Classic ModernCSSLayouts
  15. 15. http://definitelysimple.com 15Classic ModernAbsoluteFixedwidthCSSLayouts
  16. 16. http://definitelysimple.com 16Classic ModernAbsoluteFixedwidthCSSLayouts
  17. 17. Absolute layout• Very first layouts– Developer moved from print media to web– Units of measurement (inch and cm)– Very rigid and inflexible– Rarely used for web design– Useful for creating printer-friendly style sheetshttp://definitelysimple.com 17
  18. 18. http://definitelysimple.com 18Classic ModernAbsoluteFixedwidthCSSLayouts
  19. 19. Fixed width layout• Popular and very widely used– Width of overall layout is set to standardnumber like 980px, 960px or 760px;– Fit in the middle when viewed on larger screen– Horizontal scroll bar when viewed on smallerscreen– Uses CSS unit of pixels (px)http://definitelysimple.com 19
  20. 20. Fixed width layouthttp://definitelysimple.com 20Equal marginon both sideswhen viewedon largerscreen
  21. 21. Fixed width layouthttp://definitelysimple.com 21No margin;Content fitsperfectly on thescreen whenresolution of pagematches with thatof screen
  22. 22. Fixed width layouthttp://definitelysimple.com 22Horizontal scroll barwhen page is viewedon smallerresolution screenthan that of webpage
  23. 23. Fixed width layouthttp://definitelysimple.com 23Possible to createextremely complexdesign layouts
  24. 24. Fixed width layout• Advantages– Pixel perfection (create very complex layouts)– Easier to develop and test• Disadvantages– Very annoying/little usability on small devices– Zoom & text resize not handled property– World is migrating towards mobilehttp://definitelysimple.com 24
  25. 25. http://definitelysimple.com 25Classic ModernAbsolute ElasticFluidFixedwidthAdaptiveResponsiveCSSLayouts
  26. 26. Modern layouts• Also known as “Relative layouts”– No fixed width for elements– Works on both large and small screen devices– Use relative CSS units• Rem, ems, percentages, max/min values– Recent layouts use CSS3 media querieshttp://definitelysimple.com 26
  27. 27. http://definitelysimple.com 27Classic ModernAbsolute ElasticFluidFixedwidthAdaptiveResponsiveCSSLayouts
  28. 28. Fluid layout• Same as “liquid layout”– Percentage based layouts – Size of element isbased on % of its container’s size– Elements always occupy same spaceregardless of screen size– Better use of screen estate• Foundation for other modern layoutshttp://definitelysimple.com 28
  29. 29. Fluid layouthttp://definitelysimple.com 29Notice the relativeproportionsbetween variouscolumn
  30. 30. Fluid layouthttp://definitelysimple.com 30On smallerresolutionsproportions havereduced
  31. 31. Fluid layout• Advantages– Better at handling white spaces– Easier than other modern layouts• Disadvantage– Hampered usability at very low & highresolutions; needs to set limit with max/min– Provides only size experience to users; no realshift in user experiencehttp://definitelysimple.com 31
  32. 32. http://definitelysimple.com 32Classic ModernAbsolute ElasticFluidFixedwidthAdaptiveResponsiveCSSLayouts
  33. 33. Elastic layout• Uses CSS “em” unit for measurement– Layout adjusts itself depending upon thecontent’s need– Width is determined by size of the text set inuser’s browser– Not widely used as compared to others– Ideal for text-heavy (content) web pageshttp://definitelysimple.com 33
  34. 34. Elastic layouthttp://definitelysimple.com 34Notice the font/textsize when elasticlayout is viewed onlarge screen
  35. 35. Elastic layouthttp://definitelysimple.com 35The text sizeautomatically adjuststo best possiblereading experiencewhen viewed onsmaller resolutionscreen
  36. 36. Elastic layout• Advantages– Highest content accessibility– Better typographic control– Renders good on small and big screen• Disadvantages– Little use beyond text-heavy web– More difficult to develop & maintainhttp://definitelysimple.com 36
  37. 37. http://definitelysimple.com 37Classic ModernAbsolute ElasticFluidFixedwidthAdaptiveResponsiveCSSLayouts
  38. 38. Adaptive layout• Targets specific screen resolutions– Selecting most common resolutions• Uses either fluid or fixed layout– Also uses CSS3 media queries if required• Device is served the layout with the closestpossible matchhttp://definitelysimple.com 38
  39. 39. Responsive layout• One step beyond adaptive layout– No specific screen resolution– Entire page is free to flow and consume space– Mostly uses fluid layouts ideology• Wherever page layout break– Uses CSS3 media queries to solve the problem– Uses flexible imageshttp://definitelysimple.com 39
  40. 40. Adaptive vs. responsive layoutAdaptive• Predefined screenresolution sets• Can use both fixed/fluidlayouts internally• Almost same end resultas responsive layout• Less development effortsResponsive• No predefined screenresolution sets• Internally, uses fluidlayouts only• Theoretically, better endresult than adaptive• More development effortshttp://definitelysimple.com 40
  41. 41. Adaptive/responsive examplehttp://definitelysimple.com 41Breakpoint 1:Responsivelayout whenviewed on largescreen (1200px)
  42. 42. Adaptive/responsive examplehttp://definitelysimple.com 42Breakpoint 2:Responsive layoutwhen viewed onnormal screen(960px)
  43. 43. Adaptive/responsive examplehttp://definitelysimple.com 43Breakpoint 3:Responsivelayout whenviewed on tabletscreen (870px)Breakpoint 4:Responsivelayout whenviewed onmobile screen(360px)
  44. 44. http://definitelysimple.com 44Classic ModernAbsolute ElasticFluidFixedwidthAdaptiveResponsiveCSSLayouts
  45. 45. Modern layout – retrospective• Modern layout is not a formally recognizedword or layout strategy• It is to distinguish between traditional andnewer layout techniques• By just looking at a page, it is difficult to tellwhich approach has been followed since allthe techniques try for same end resulthttp://definitelysimple.com 45
  46. 46. Modern layout – retrospective• All of them strives for same goal– Serving the users with quality user experience– Serving the same webpage that can workseamlessly & optimally across as many devicesas possible without compromising on userexperiencehttp://definitelysimple.com 46
  47. 47. Modern layout – retrospective• Some assume fluid and elastic are baselayouts helping as a foundation foradaptive and responsive layouts• While others tend to keep all the termsseparate and avoid possible overlaphttp://definitelysimple.com 47
  48. 48. Modern layout – retrospective• However one thing governs everything– How people are consuming content– How rapidly technology is moving fromtraditional systems to modern devices likesmobiles, tables, glass, etc.http://definitelysimple.com 48
  49. 49. MOVING TO A BIGGER WORLDLayouts are just one part of yet another bigger universe called as“design philosophy”http://definitelysimple.com 49
  50. 50. Layout is not design• Adaptive layout is not Adaptive WebDesign (AWD)• Responsive layout is not Responsive WebDesign (RWD)• Layout is not designhttp://definitelysimple.com 50
  51. 51. RWD – Responsive web design• RWD is web design approach• RWD goes beyond responsive layout• Describes few design guidelines• Term coined by Ethan Marcotte• Often accompanied by Mobile-firstapproachhttp://definitelysimple.com 51
  52. 52. RWD – Responsive web design• Few possible disadvantages– Performance issues as all devices receive allmarkup which maybe unnecessary– More development & testing effort– No pixel perfect control over layout– Loads all the resources by default on clientcomputerhttp://definitelysimple.com 52
  53. 53. AWD – Adaptive web design• Builds on top of RWD• Incorporate Progressive Enhancement• Uses JavaScript to achieve the goal• Extended into two verticals– Client side adaptive– Server side adaptive (often, needs to manage multipletemplates for same resource)http://definitelysimple.com 53
  54. 54. AWD – Adaptive web design• On client side adaptive– Follows streamlined, layered approach ofprogressive enhancement (PE)• 1st: PE with HTML• 2nd: PE with CSS• 3rd: PE with JavaScript• 4th: PE with Accessibilityhttp://definitelysimple.com 54
  55. 55. AWD – Adaptive web design• Few possible disadvantages– Learning curve for developers as they need tolearn JavaScript– Maintaining each layer of functionality can be aproblem in a long run– May or may not have pixel perfect controldepending on layout used– Server side adaptive introduces other new issueshttp://definitelysimple.com 55
  56. 56. Points to notes• Four terms– Adaptive layout– Responsive layout– Responsive web design– Adaptive web design• All four are different terms & should notbe confused.http://definitelysimple.com 56
  57. 57. Responsive & AdaptiveLayouts• Responsive layout is morecomplex & robust thanadaptive layout• Responsive layout targetsmore wider range thanadaptive layout• Responsive layout needsmore development effortWeb design approach• AWD builds on top ofRWD and addresses evenmore concerns• RWD is concerned aboutpage design while AWDgoes beyond page designto include best possibleUX and IXDhttp://definitelysimple.com 57
  58. 58. Adaptive design as umbrellahttp://definitelysimple.com 58*Source: http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
  59. 59. Possible conflicts• There are few variations– As opposite, some consider AWD to be a partof RWD umbrella– Some consider Adaptive layout and AWD asone and the same thing– Some consider any approach that leads toresponsive pages as RWDhttp://definitelysimple.com 59
  60. 60. But what matters is the end result;And…http://definitelysimple.com 60
  61. 61. End justifies means• Both AWD and RWD strive for oneultimate goal:One Webhttp://definitelysimple.com 61
  62. 62. Future of layouts• So far– All layouts used various means to flexibility– Relative measurements– Display block, inline-blocks, etc.– CSS float property– CSS3 media quires• However, there is more to CSS3…http://definitelysimple.com 62
  63. 63. Future of layouts• New CSS3 features to create better layouts– Multi-column layout module– CSS3 regions module– Flexible box layout module– Grid template layout module– Box alignment module– Exclusions and shape modulehttp://definitelysimple.com 63
  64. 64. Future of layouts• However– All new CSS3 modules are coding techniquesto create page layouts– Web design approach and coding techniquesare two different things– One is theory while other is practical– These new modules may give rise newapproaches and theorieshttp://definitelysimple.com 64
  65. 65. http://definitelysimple.com 65Harshal Patil@softHarshhttp://definitelysimple.comhttp://www.linkedin.com/in/hapatilAuthor:
  66. 66. Further reading & references• Books– Flexible web design• By Zoe Gillenwater– Adaptive web design• Aaron Gustafson– Responsive web design• Ethan Marcottehttp://definitelysimple.com 66
  67. 67. Further reading & references• http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/• http://www.w3.org/TR/mobile-bp/• http://www.netmagazine.com/features/pros-guide-css-layouts• http://sixrevisions.com/web_design/a-guide-on-layout-types-in-web-design/• http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php• http://www.zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means/• www.webmonkey.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/http://definitelysimple.com 67