10 Tips to Create Effective Responsive Design

10 TIPS TO REMEMBER when creating RESPONSIVE DESIGN WHAT IS RESPONSIVE DESIGN? Design for an optimal viewing experience; makes designs not only more flevible, but more adaptive to the media that renders them WHY IS MOBILE IMPORTANT? Mobile Web Traffic I MAY 2013 IMAY 2014 MOBILE USAGE AS % OF WEB USAGE, BY REGION 38% 37% 25% 23% 19% 18% 17% 17% 16% 14% 12% 11% 8% 6% N. AMERICA S. AMERICA EUROPE ASIA AFRICA OCEANIA GLOBAL Mobile Email Usage Stats MOBILE EMAIL 30% OF CONSUMERS now read their email EXCLUSIVELY ON MOBILE DEVICES 61% OF CONSUMERS OPENS now read at least some of their emails ON A MOBILE DEVICE have grown from 43% in Jan TO 51% ÎN DEC 2013 – YESMAIL "EMAIL COMPASS: THE MOBILE EFFECT" (2013) -LITMUS "EMAIL ANALYTICS" (JAN 2014) - YESMAIL "EMAIL COMPASS: THE MOBILE EFFECT" (2013) THE TIPS: 1 KEEP YOUR LAYOUT SIMPLE Keep: • HTML5 doctype and guidelines • A reset style sheet • A simple and semantic core layout • Simple techniques for critical elements (Like navigation, menus.) Delete: Pointlessly intricated divs • Inline styles • Critical JS (JavaScript) or Flash without fallback • Useless absolute or float positioning • Anything redundant or not 100% useful Keep your HTMLclean and simple Do not rely too much on modern tricks (like CSS3 special effects or JS) for critical parts of the layout 2. USE MEDIA QUERIES Focus on widih conditions: depending on client's current uwidth, you'll load alternate style sheet or add specific styles • FROM 200 TO 640px @media screen and (min-width: 200px) and (max-width: 640px) • • LANDSCAPE, AT LEAST 600px @media screen and (min-width: 600x) and (orientation: landscape) • PORTRAIT, LESS THAN 380px @media screen and (max-width: 380px) and (orientation: portrait) @media screen and (max-width: 300px) { * Tiny styles */ @media screen and (max-width: 600px) { * Small styles */ 3 major breaks: 480 /768 / 1024 • 3 minor breaks: 320/720/900 Desktop limit is around 1024 Most Frequent Resolutions 320 480 720 768 900 1024 1200 LOW RES FIRST GEN SMARTPHONE ZONE PORTRAIT TAB LANDSCAPE TAB DESKTOP ZONE IPAD LOW RES STANDARD TABLETS, NETBOOKS I FAMOUS SMARTPHONES VARIOUS APPLE DEVICES 3. DEFINE THE BREAKPOINTS • 6 MAJOR BREAKPOINTS: <480 <768 >768 <320 768-1024 >1024 Focus on the major breaks Add the nice to have breaks if possible MAJOR: Target the first gen. smartphones in portrait mode with a <480px rule • Use a <768px condition, for high-end smartphones and portrait iPads • Everything bigger (big tabs and desktop) goes in a >768px triggered style sheet NICE-TO-HAVE: • Add a <320px style sheet for low res • Trigger tablets, landscape iPads and big tabs precisely with a >768px and <1024px rule Use a wide design for desktop with a >1024px style sheet 24 MAKE YOUR LAYOUT FLEXIBLE Flexible grids use columns to organize content Use RELATIVE instead of fixed width to adapt the viewport size Fluid layout is the best way to be ready for any screen size/orientation (With right media queries) you can adapt to any possible device 200px 300px 800px 15.38 23.07 61.5384615384.. To avoid rounding errors, use long decimals and let the browser do the math (66% + 33% !=100%) GREAT GRID SYSTEMS: • 960 Grid System 960.gs • Gridset gridsetapp.com • Columnal columnal.com Golden GS goldengridsystem.com • 1140 CSS Grid cssgrid.net ADAPT TO ORIENTATION Forever Fix Quirky Box Model Size Computation { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; Box-sizing: border-box; AFTER • Final width = 67% BEFORE • Final width = 67% + 15*2px + 3*2px Total layout width >100% Headache, annoyance MAKE YOUR PICTURES BEHAVE GREAT GRID SYSTEMS: • Styles can make pictures fluid • You can use breakpoints for alternate pictures, if bandwidth isn't an issue ADAPTIVE SIZING: ADJUST THE WIDTH • 100% width: img { width: 100%; ] • 100% width, capped to file size: img { max-width: 1005; } BREAKPOINTS • Src attribute of a picture cannot be manipulated in a media query alone Use "background-image:" Override the background image attribute of a block element • Show/hide parent: Use different picture versions and show/hide their parent in media queries Why not show/hide the picture itself? Some mobile browsers won't load pictures in display: none parents at all: bandwidth saved! 6. DON'T FORGET MAX & MIN Use max-* and min-* as boundaries applied to your relative sizes TYPICAL SIMPLE USE • Prevent your layout from growing or shrinking in a ridiculous way when displayed on large or small devices • Combine a fluid layout media, with clever min/max sizes and media query break points for the max. adaptability FLUID, BUT NOT UNDER 768 & NOT OVER 1024: • min-width: 768px; max-width: 1024px; • #main not under 1000 wide when viewed on a desktop @media screen and (min-width: 1024px){ #main { min-width: 1000px; } • At least 350 high: min-height: 350px; MAKE MOST THINGS RELATIVE THE IDEA • Define a unit on top of your content, make everything inherit from it CASCADING % METHOD • Define a master container with a fixed or fluid size: compute every dimension (size, margin, padding, etc) of its children in % THE EPHEMERAL UNIT (EM) METHOD • Define a font size in a master container or the , use it as base unit to computer anything with em based dimensions With master font-size = 16px; • width: 46.25em -> 46.25x16 = 740px • border-width: 0.063em -> 0.063x16 = 1px • font-size: 1.125em; -> 1.125x16 = 18px padding: 0.325em -> 0.325x16 = 5px 8. WHEN MOBILE, LINEARIZE MOBILIZE • Override the width of every column block in your mobile style sheet width -> 100% • If needed, apply specific rules to fix the design parts that may be broken (margins, etc) NAV NAV ADS ADS ACTION ARCHIVE MAIN CONTENT ARCHIVE RELATED MAIN CONTENT One major rule to set up in the low resolution style sheets: gelling all the content in one column ACTION RELATED 6. SKIP THE NON ESSENTIAL NAV NAV Remove the parts of your design that will never be used in a mobile context MAIN CONTENT AR IVE ACTION THE .NOT_MOBILE CLASS • Apply a .not_mobile class to your non essential elements, and use something like this: @media screen and (max-width: 300px) { not_mobile {display; none; } MAIN CONTENT WHAT IS ESSENTIAL? • One mobile page = one function • Think about why you would like to access the page on a mobile device and skip the rest (advertising, nearest categories of products, tips, help, etc). ACTION RE TED 10 CHECK YOUR META VIEWPORT KEEPING IT REAL • A simple way to make the browser use the real size of the physical screen: a viewport meta tag • When set to device-width, it sets up the browser to a window using the real device size IN THE SECTION: • FAKE DESKTOP EMULATION REAL DEVICE-WIDTH (480px pretending to be 1280) 480px at 480px NAV NAV ADS ACTION MAIN CONTENT ARCHIVE RELATED MAIN CONTENT Many mobile browsers emulate a desktop view, nicely squeezing huge resolutions into tiny screens. Powerful fealure, bul an obstacle to responsive design SOURCES BROUGHT TO YOU BY: Mainstreethost https://www.splio.com/ http://alistapart.com/article/responsive-web-design/ http://www.emailmonday.com/mobile-email-usage-statistics http://keriganmarketing.com/freelunch/view/how-much-web-traffic-is-on-mobile-devices/ http://www.smartinsights.com/mobile-marketing/mobile-design/ten-tips-responsive-design-infographic/ % OF PAGE VIEWS COMING FROM MOBILE DEVICES