Responsive Design pros and cons
- 1. When to use Responsive Design and when to consider alternative architectures Technology point-of-view Mark Bieschke Chief Technology Officer Michael Wolfe Director, Application Development Andrew Steiger Executive Director, Technology and Operations Summer, 2015
- 2. Introduction to Responsive Design Responsive Design pros and cons Alternatives to Responsive Design Recommendations 1 1 2 3 4 Responsive Design point-of-view
- 3. Responsive Design - overview 2 Responsive Design (RD) has grown up quickly The 2011 Boston Globe redesign was the watershed moment for RD. Since then, RD has become Google’s recommended architecture for SEO and it has been adopted by many online publications and transactional websites alike. Desktop Tablet Small screen
- 4. Responsive Design - overview 3 What is RD? Example Grid Layouts 1. RD websites are designed and built on a grid layout: 1 column, 2 columns, or more. 2. With RD, the browser receives the instructions on how to render every layout then it decides which layout to use, based on the browser’s screen width. This allows one website URL (ex: www.bostonglobe.com/sports) to serve every screen size. You can resize the browser and the layout changes without having to go back to the server for more instructions. 1025 pixels or more @media only screen and (min-width: 1025px) { Desktop: 3 columns Everything in the middle @media only screen and (min-width: 481px) and (max-width: 1024px) { Tablet: 2 columns 480 pixels or less @media only screen and (max-width: 480px) { Small screen: 1 column
- 5. Responsive Design - advantages 4 What are the benefits of RD over other architectures? 1. Single code base: All web pages share the same content and instructions on how to render each layout. This is perfect for online publications where the same article needs to be available across all screen sizes. 2. Search optimized: For search engine rankings, Google penalizes websites that do not have a good mobile experience. Although alternative architectures (mainly Adaptive Design) can deliver great mobile experiences and are fine for SEO, RD naturally provides good SEO rankings since one website URL serves every screen with the same content. 3. Future-proof for new devices: Since RD has a layout that covers every screen size, when a new device hits the market there will automatically be a screen rendering (1 column, 2 columns, etc) available for the device’s browser. 4. CMS-friendly: Because the same content is reused for all screen sizes, RD is more cost- effectively supported by Content Management Systems than other architectures.
- 6. Responsive Design – considerations 5 Considerations with RD compared to other architectures 1. Creative Design: Designers need to understand how to design on a grid as opposed to separate desktop and mobile websites that are not bound by a grid. 2. Performance: Alternative architectures, like Adaptive Design, consistently have better mobile download performance results, especially on slower network bandwidths, like 3G. Adaptive Design can exclude desktop- oriented frameworks and deliver a smaller amount of HTML/CSS/JavaScript to the browser. On the other hand, RD delivers the same code to the browser for both desktop and mobile websites alike. 3. Initial development timeframes and cost: RD websites can take a longer amount of time to design and develop compared to separate desktop and mobile websites. However, maintenance costs can be lower for RD over the long term, compared to Adaptive Design, due to less CMS integration issues and server-side device list maintenance. 4. Image optimization: Until browsers natively support RD, web development teams will have to use custom code to determine the best image resolution (retina, etc) for each device. There are many articles detailing these issues (search for “Responsive images”) and they are not show-stoppers to using RD, just realities that add development time and testing. 5. Layout optimization: While RD does allow websites to render across all screen sizes, that does not mean it will look good across all screen sizes. Quality assurance teams need to test new devices and work with creative and technology teams to determine if another column (ie breakpoint) needs to be defined in the grid layout.
- 7. Responsive Design – alternatives 6 RD Alternatives Both of these alternative architectures are considered “Adaptive Design” because they require the web server to make a decision before sending the HTML to the browser. • Separate desktop and mobile websites (ex. www.website.com and m.website.com) – Pros: • The creative team doesn’t have to design the website on a grid and the desktop and mobile experiences don’t have to be designed and developed at the same time. • Better download performance than RD (fractions of a second to several seconds). • Allows “contextual experience” where mobile content and tools can be different from desktop. – Cons: • The server has to determine which screen rendering to deliver to the device. This requires developers to keep a list of devices and new devices have to be added to the list. • More issues keeping content in sync across screens, issues integrating with CMS’s compared to RD, potential synchronization issues with SEO. • Dynamic Serving, aka RESS – Pros: Same pros as above and another pro is that one website URL is used across desktop and mobile which is good for SEO. – Cons: Same cons as above except one URL for desktop and mobile neutralizes SEO synchronization issues.
- 8. Responsive Design – when to use it 7 What informs the decision to use RD vs alternative architectures? If you answer “yes” to all of these questions then RD is for you. Layout: 1. Will the website design phase include all screens: mobile through desktop? 2. Does the UX/Creative design fit into a grid layout for all screens? 1. Depending on the creative design and UI frameworks needed in the page, RD performance can be slower than a separate mobile- optimized website. Are the majority of the website’s mobile customers on a high-speed 4G or wifi connection? 2. If not on a high speed connection, will a few extra seconds of download time for a RD website page - compared to a mobile optimized website - be an acceptable experience for customers? Performance: Choices: If the answer is “yes” to all questions above, RD is the right choice. If the answer is “no” to some questions, it doesn’t mean RD is out, it just means further investigation is required. 1. Should the same content and tools appear across all screens? 2. Should Google search results for the desktop website URL take you to the same URL on a mobile device? Context: Architecture: Responsive Design or Alternative Content Strategy UX / Creative Technology
- 9. Responsive Design – recommendations 8 Go with RD unless you have these issues… 1. If the creative layout for mobile and desktop cannot fit onto a grid or if the desktop and mobile design cannot occur at the same time (due to time constraints or other issues), an alternative to RD should definitely be pursued. 2. If all of the website content is not going to be reused across both desktop and mobile or if the website’s functionality is going to be drastically different for mobile vs desktop, an alternative to RD should be highly considered. 3. With network connectivity and device processing power constantly improving, the performance drawbacks of RD are less relevant than a couple years ago. But if the website needs to be highly optimized for emerging markets or where 3G access (or worse) is the norm, or where a couple seconds of wait time is going to make a big difference to customer satisfaction, an alternative to RD should be considered.