WHITE PAPER December 2012 RESPONSIVE WEB DESIGN
A QUICK INTRODUCTION Responsive Web Design is generating a lot of buzz among web designers. What s all the fuss about? facing Responsive Design and total bandwidth involved, but there are a few HTML5 and CSS tricks that can be used to load optimum image sizes and design functionality. Responsive content dynamically responds to the size, orientation and platform chosen by the user. Images, typography and grid elements reconfigure themselves to the optimum size, position and scale for the current view. Responsive Design isn t trivial. It takes an immense amount of effort and dedication to make it work perfectly. In some cases, it s an endeavor that may not satisfy the needs of a client or their website. Before diving into Responsive development, one must carefully weigh the benefits and drawbacks. Most websites that integrate Responsive Design focus on 3 or 4 sets of design sizes: phones tablets desktops mobile phone, tablet, laptop (960 grid system), and sometimes the large screens of desktop computers. These various sizes with adjustable images present one of the biggest challenges 2
EXAMPLE A List Apart s sample site for Responsive Web Design alistapart.com/d/responsive-web-design/ex/ex-site-final.html When a user makes the window wider, the layout and images change dynamically. These screenshots demonstrate how the site may look on smaller devices like tablets and smartphones. 380 px 600 px 1280 px 3
THE BENEFITS OF RESPONSIVE DESIGN DAY BY DAY, THE NUMBER OF DEVICES, PLATFORMS, AND BROWSERS THAT NEED TO WORK WITH YOUR SITE GROWS. RESPONSIVE WEB DESIGN REPRESENTS A FUNDAMENTAL SHIFT IN HOW WE LL BUILD WEBSITES FOR THE DECADE TO COME. Jeffrey Veen, CEO and Founder, Typekit It looks cool! A common and consistent design for all devices that view the site. It s good for branding. Gives the user the choice in how to view the site (size, orientation, etc). Improves the user interface. Buttons, links and other elements are designed for that view. ecommerce becomes easier for mobile users. Formatting new content is done once for multiple sites. Enables mobile users to see all of the website s content, unlike some mobileoptimized sites. Fewer files to store on the server than device-optimized sites. Links don t need to be updated for mobile websites one link for all views! SEO is consistent; web searches return the same results for all devices. Can replace the need to have a custom iphone or Android app. Because of the higher level of design skill required, Responsive Web Designs often win design awards. 4
GETTING INTO THE NITTY GRITTY USER INTERFACE NAVIGATION Good Responsive Designs are not only flexible, but they keep touch and other mobile-specific features in mind. Inline links found on a desktop browser can expand to be large, pressable buttons on mobile/tablet devices. Features that get in the way, or cause too much scrolling on a small screen, can be hidden. The user interface can also benefit from adding mobile-specific features. For example, if you were designing a website for a super market, you could make the Find My Store feature much more prominent, and even tie it into the device s location. Responsive Web Design presents a challenge for a designer/developer, but is a terrific opportunity to create an incredible customer experience across all platforms. It s also important to consider usability for menus and sidebars. Unlike traditional sites that have a single layout, Responsive site elements can resize and reposition themselves on different screen sizes. When done right, these subtle transformations should not cause any confusion to the user. If text and images are fixed-size, Responsive Design will often prevent zooming on iphone or ipad (same problem occurs on mobile websites). 5
MULTIPLE DEVICE CAPABILITIES USE OF BANDWIDTH Many older devices are not yet compatible with advanced HTML5 features. As a result, Responsive websites might not load as well, or look as good as they do on newer devices. Sites should gracefully degrade- on older browsers that is, even if the layout doesn t look as originally intended, important text and images will still be viewable. Many Responsive websites download full-size images and resize them to fit smaller devices, issuing a choice where one would have to decide whether images are small enough to bypass conditional loading or not. It will also require image optimization for the device and HTML, images, CSS and Javascript will be loaded for all view sizes even if they will never be used. New HTML5 features should be seen as additive, and should not break a page for users that don t have the latest, greatest mobile phone or software. Responsive Designs may also need CSS Media Query support. Unsupported browsers will ignore Media Queries and simply fall back to a Images on a Responsive site are generally larger than they are on comparable device-optimized sites. This can result in slower downloads and fast exhaustion of the local browser cache. In other words, some content may need to be downloaded more than once on small mobile devices. standard desktop layout for the site. 6
TIME SPENT DEVELOPING The biggest issue to consider is the additional time it takes to implement a Responsive Design. At the start of the process, designers take into account how elements resize and reflow; at least 3 different device sizes must be considered. The resulting 3 designs will be reviewed by the business owner/stakeholder. Additional design and feel. QA testing will occur when designs are approved. Time spent developing a Responsive site, however, can be time well spent, as the hours put into creating a Responsive page will count in expanding functionality into the mobile sphere and may omit the need for a mobile application. and development work will be required to make sure the different layouts have a unified look 7
CHALLENGES FOR MAGENTO AND RESPONSIVE DESIGN DESIGN Requires rough wireframes and scaffolding (interactions between elements) to be generated and approved by business owner before designs are implemented. Creating the designs will require much more development effort than a non-responsive design. Magento Modules aren t designed for Responsive themes most modules will require customization. Front end theme development effort could be doubled or tripled. Future upgrades to newer versions of Magento could require more work. The design process effort will be multiplied by the number of additional scenarios and devices. QA Expect a lot of back and forth between QA DEVELOPMENT After development starts, minor client modifications to the design can become major issues. and developer. FUNCTIONALITY The net result is higher page load times. Major changes might force a complete redesign. Magento is not designed to work with Responsive Design concepts. Estimate as much as 80% of the base/default theme needs to be reworked. UPGRADES Client will not be able to install modules because they most likely will require customization. Magento upgrades will likely break more traditional themes. 8
RETINA DISPLAYS New generations of displays on smartphones and desktop computers use high-density screens. Apple calls their high-density screens Retina displays, since individual pixels are so small, they can t be seen at normal viewing distance. For comparison, a Retina ipad contains more pixels than big screen HDTVs. By packing a lot of pixels onto screens, websites look more like fine printed catalogs than traditional websites, but with the added advantage of interactivity. ipad (RETINA) HDTV The ipad with 9.7-inch Retina display contains more pixels than an HDTV of any size, as shown in this 1:1 pixel-size illustration. Text and images can look sharp, when optimized for high-density screens. 9
SO IS IT WORTH IT? Because Responsive Web Design is popular, there are hundreds of articles promoting its onslaught of new phones and tablets we ll see in the coming years. usefulness. Those articles make it sound great and easy to implement, but it requires more effort to develop, especially for Magento websites. The biggest disadvantage for a Magento developer is that most 3rd party (commercial) modules require customization to function on a Responsive site. Your business needs will determine if Responsive Design is right for your site. Responsive Designs work best for blogs and corporate websites that provide limited or similar content throughout the website, but it also works for homepages and contentrich sites. It takes time and effort in design In the past few years, we ve seen an explosion of tablets and smartphones in different shapes and sizes. Mobile-optimized sites are designed for existing devices, but what about future ones? Due to their adaptive nature, and production in order to get a website that works, looks and loads great on most devices. Responsive Design is a great opportunity to enhance your mobile reach and overall site functionality. Responsive Designs are well-suited for the 10
CHECK OUT THESE RESPONSIVE SITES Want to see how responsive design works? Adjust the size of your browser window to see how these sites respond to better understand this trend in web design. 1. SPIGOTDESIGN.COM 2. FOREFATHERSGROUP.COM 3. FORK-CMS.COM 4. EARTHHOUR.FR 5. DOLECTURES.COM 6. MADEBYSPLENDID.COM 7. SPIGOTDESIGN.COM 8. 2012.DCONSTRUCT.ORG 9. FOODSENSE.IS 10. CLEARAIRCHALLENGE.COM 11. SMASHINGMAGAZINE.COM 12. ANDERSSONWISE.COM 13. 2012.NEWADVENTURESCONF.COM 14. OLIVERRUSSELL.COM 15. 2011.FULL-FRONTAL.ORG 16. JESSICAHISCHE.IS 17. UNITEDPIXELWORKERS.COM (SHOPIFY STORE) 11
APPENDIX Further Reading: coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design alistapart.com/articles/responsive-web-design onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries studiopress.com/design/beginners-guide-responsive-design.htm designbyfront.com/demo/goldilocks-approach readwriteweb.com/hack/2012/05/bye-bye-waterfall-5-steps-to-implement-responsive-web-design.php coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design Developer and Design Tools: cssgrid.net stuffandnonsense.co.uk/projects/320andup csswizardry.com/inuitcss lessframework.com github.com/scottjehl/respond (add display compatibility for IE 6+) 12
EYEMAGINE is an ecommerce innovator and has been a leading force in the industry since 2003. Over the years, EYEMAGINE has engaged on many ecommerce fronts and proven capabilities in design, development, integration, mobile, optimization, and more. Our clients include Disney, HP, TOYOTA, Cisco, Metallica, and more. To find out more about conversion and ecommerce, contact us today. 1 Technology Drive, Suite J709 Irvine, CA 92619 (949) 218-1331 sales@eyemaginetech.com twitter.com/eyemagine facebook.com/eyemagine 13