Building Better Responsive Websites
•
0 likes•922 views
The document discusses responsive web design and some best practices. It notes that responsive design is more than just fluid grids, flexible images, and media queries - it also requires considering architecture, performance, font sizing, breakpoints, image optimization, and more. The document provides tips on using relative units like ems and rems for font sizing, organizing media queries, selecting classes, and testing responsive sites.
Report
Share
More Related Content
Similar to Building Better Responsive Websites
Similar to Building Better Responsive Websites (20)
More from Holger Bartel
More from Holger Bartel (12)
Recently uploaded
Recently uploaded (20)
Building Better Responsive Websites
- 1. BUILDING BETTER RESPONSIVE SITES Holger Bartel | @foobartel | Harbour Front Monthly #1 on 27/08/2014
- 2. “RESPONSIVE WEB DESIGN IS ALL ABOUT FLUID GRIDS, FLEXIBLE IMAGES & MEDIA QUERIES”
- 5. TURNS OUT… NOT QUITE THAT EASY!
- 6. “It’s Damn Hard!” – Charis Rooda
- 7. “And it’s all a big hack!” – Charis Rooda
- 8. YOU’LL NEED MORE THAN JUST 3 INGREDIENTS TO COOK A GREAT MEAL http://en.wikipedia.org/wiki/pasta
- 9. ★ Fluid Grids, Images & Media Queries ★ Architecture & Structure ★ Performance
- 10. ★ Fluid Grids, Images & Media Queries ★ Architecture & Structure ★ Performance ★ (Maybe a few more things )
- 11. COMMUNICATE! Talk to your designers, co-workers, project managers (if any) & clients. ! A lot.
- 12. GETTING MORE FLEXIBLE WITH FONT SIZE MEASUREMENTS
- 13. PIXELS VS. EMS px is an absolute unit of measurement - px units don't scale ! em is not an absolute unit - it is a unit that is relative to the currently chosen font size.
- 14. FONT SIZE COMPOUNDS body { font-‐size:62.5%; } h1 { font-‐size: 2.4em; } /* =24px */ p { font-‐size: 1.4em; } /* =14px */ li { font-‐size: 1.4em; } /* =14px? */ ! li li { } ! 1.4em = 14px BUT 14 * 1.4 = 20
- 15. REM == ROOT EM The em unit is relative to the font-size of the parent, which causes the compounding issue. ! The rem unit is relative to the root—or the html— element.
- 17. BUILDING MOBILE FIRST Building from Small Screen Towards Large Screen ! Which in turn saves you from having to overwrite lots of CSS in the long run
- 18. STARTING LIGHT @media only screen and (min-‐width : 30em) { … }
- 19. WHAT ABOUT MAX-WITDH? @media only screen and (max-‐width : 30em) { … }
- 20. @media only screen and (min-‐width : 30em) and (max-‐width : 34.375em) { ! /* fine tuning for certain elements */ ! } MY EXCEPTIONS
- 21. ORGANIZING YOUR MEDIA QUERIES Breakpoints don’t necessarily have to be device sizes ! Rather set them where stuff looks good ! Consider most commonly used devices (Which can be quite a guessing game)
- 22. FLUID OR FIXED You could se"le for fixed breakpoints… but that’s cheating! ✌️ ! Why should definitely opt for a fluid grid
- 24. The Many Many Different Flavors
- 26. 6 Weeks ! = ! ! ! ! 428 Different ! Devices
- 29. LOVE MORE % …and other relative units. ! This way you will be able to provide be!er and more future-proof cross device experiences, even for less popular devices.
- 30. USING EM’S IN MQ’S Let Your Breakpoints Scale with Font-Size
- 31. @media only screen and (min-‐device-‐width : 37.5em) { … }
- 32. 100% ZOOM IN 1024PX WIDE VIEWPORT
- 33. 175% ZOOM IN 1024PX WIDE VIEWPORT W/ EM BASED MQ (SAME VIEW AS IN A 320PX VIEWPORT)
- 34. 100% ZOOM IN A 320PX WIDE VIEWPORT
- 35. THE EARLIER DAYS OF RWD <link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="css/480.css" /> <link rel="stylesheet" href="css/768.css" /> <link rel="stylesheet" href="css/1024.css" /> ! OR @import “480.css”; @import “768.css”; @import “1024.css";
- 36. I PREFER ONE FILE WITH .panel-‐wrap { margin-‐bottom: 0.5rem; @include media(30em) { padding-‐left: 0.3125rem; padding-‐right: 0.3125rem; } @include media(38em) { padding-‐left: 0.6375rem; padding-‐right: 0.6375rem; } @include media(50em) { padding-‐left: 0.9375rem; padding-‐right: 0.9375rem; } } INLINE MQ’S
- 37. IMPORTING PARTIALS _panel.scss _profile.scss _cart.scss _shame.scss app.scss
- 39. CLASSES VS. ID’S
- 40. MY SELECTOR EVOLUTION 1. ID’s & Classes all over the place 2. ID’s for main elements, classes mostly everything else 3. ID’s only for JavaScript, classes for everything CSS
- 41. SEMANTIC CLASSES ! VS. ! PRESENTATIONAL CLASSES
- 42. USE CLASS ATTRIBUTES WITH SEMANTICS IN MIND Choose your class names to what the element is instead of how it looks
- 43. .blue-‐box { background: #51A7F9; }
- 44. .blue-‐box { background: #DC0100; }
- 45. .box { background: #F28717; }
- 46. ANOTHER ADVANTAGE OF USING SEMANTIC CLASSES OVER PRESENTATIONAL CLASSES CHANGE ELEMENT APPEARANCE WITHOUT TOUCHING YOUR HTML
- 47. <div class=“small-‐12 medium-‐8 large-‐6”> … </div>
- 48. <div class=“small-‐12 medium-‐8 large-‐6”> … </div> .small-‐12 { declaration here } ! .large-‐6 { declaration here }
- 49. <div class=“news-‐item-‐block”> … </div> .news-‐item-‐block { @extend .small-‐12; @extend .large-‐6; }
- 50. <div class=“news-‐item-‐block”> … </div> .news-‐item-‐block { @extend .to-‐whatever-‐you-‐want; and-‐another-‐property: value; }
- 51. CLASS NAMES
- 52. CLASS NAMING IS HARD http://en.wikipedia.org/wiki/Macaque#mediaviewer/File:Macaca_nigra_self-portrait.jpg
- 53. TOOLS & METHODOLOGIES TO SUPPORT BETTER NAMING & STRUCTURE
- 54. SMACSS SCALABLE AND MODULAR ARCHITECTURE FOR CSS https://www.smacss.com
- 55. OOCSS OBJECT ORIENTED CSS http://www.oocss.org
- 56. BEM BLOCK, ELEMENT, MODIFIER http://www.bem.info
- 57. DON’T MAKE YOUR LIFE HARDER THAN IT NEEDS TO BE
- 58. MY FAVORITE WORD: SPECIFICITY
- 59. ★ Try to avoid long selector chains ★ They are painful to overwrite ★ Nest 2 or max 3 levels deep ★ Check your output file when nesting rules
- 60. IF YOU NEED TO USE !IMPORTANT TO OVERWRITE A STYLE, YOU PROBABLY MESSED UP SOMEWHERE ELSE !
- 62. DON’T WORRY ABOUT THE SIZE OF YOUR CSS ! RATHER CARE ABOUT IMAGE SIZE
- 63. IMAGES
- 64. AVERAGE RESPONSIVE SITE SIZE ~ 1.8MB http://httparchive.org/interesting.php
- 65. INCREASE SINCE 2011 http://httparchive.org/interesting.php
- 66. IMAGES OFTEN ACCOUNT FOR MOST OF THE DOWNLOADED BYTES ON A PAGE. ! OPTIMIZING IMAGES CAN OFTEN YIELD LARGE BYTE SAVINGS AND PERFORMANCE IMPROVEMENTS.
- 67. MAKE A CALL You have to make decisions and sacrifices sometimes. As long as you know why you made them, it should be alright to do so
- 68. LARGE OR SMALL http://en.wikipedia.org/wiki/Tiger
- 69. RETINA - YES OR NO? 1x 1.5x 2x
- 70. TOOLS FOR IMAGE OPTIMIZATION h"p://addyosmani.com/blog/image-optimization-tools/
- 71. TOOLS & STUFF
- 72. CODE GUIDE Standards for developing flexible, durable, and sustainable HTML and CSS. http://mdo.github.io/code-guide/
- 73. CHECK HTML5/CSS3 BROWSER FEATURES http://www.caniuse.com
- 74. CODEKIT STEROIDS FOR WEB DEVELOPERS https://incident57.com/codekit/
- 75. CROSS-BROWSER TESTING VirtualBox ! Modern.ie ! Browserstack.com ! Sauce Labs !
- 76. DEVICE TESTING Adobe Edge Inspect ! Ghostlab ! BrowserSync! ! ! !
- 77. PERFORMANCE TESTING http://www.webpagetest.org ! http://tools.pingdom.com/fpt/ ! https://developers.google.com/speed/pagespeed/ ! https://developer.yahoo.com/yslow/ !
- 78. GRUNT JAVASCRIPT TASK RUNNER http://www.gruntjs.com
- 79. GULP ANOTHER TASK RUNNER http://www.gulpjs.com
- 80. “RESPONSIVE WEB DESIGN ISN’T QUITE ONLY ABOUT FLUID GRIDS, FLEXIBLE IMAGES & MEDIA QUERIES”
- 81. THANKS! Holger Bartel | @foobartel | Harbour Front Monthly #1 on 27/08/2014