Responsive Design has seen its share of excitement and criticism since its introduction. Both speed and user experience, however, have been at the top of the criticism list. Learn more about why this is, and how Responsive Design experts tackle these issues through the study of a 1-800 CONTACTS Responsive Design implementation. In this excerpt, we focus on the speed aspect of Responsive Design. For the full whitepaper, please download it now.
Load Time Optimization
Optimizing speed comes in three flavors – page-load speed, execution speed, and mobile UI optimization. Most people focus on page-load speed, but rest assured, execution speed and mobile UI optimization also play a pivotal role in user satisfaction. Execution speed is how long a menu takes to pop up once a user clicks, mobile UI optimization is how long it takes them to fill out a form. The number one contributing factor to all of these areas is the skills of a developer. A savvy developer will write clean, organized code, and will know the tools that help them optimize for speed.
Expert Developer Methods
Expert developers employ these methods and tools to help reach their speed goal:
- Images: Image selection and optimization will account for 50-75% of page download time. If a breakpoint doesn’t require a large image, substitute the large image for a smaller one.
- Lazy loading: Lazy loading is a method of loading code only once the user needs it, and it can buy you some time by making the page “feel faster” to the end user.
- Content Delivery Network: Cache pages and static assets using an external CDN (Content Delivery Network) that has servers close to your users. This will reduce latency and increase download speeds.
- Local caching: Cache data in local storage for faster retrieval from the browser.
- CSS: Minifying and gzipping your CSS will decrease your file size.
When you put all of these things together, they are essentially tools utilized by developers. The key ingredient to speed is a developer who knows how to pull all these tools together and utilize them to the fullest.
Today is a different day for the web designer; understanding HTML and CSS has become critical to developing responsive website designs. Reviews should now be conducted in web tools like Axure, not using static Photoshop images. Most importantly, layouts for all three breakpoints should be reviewed simultaneously.