SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

7 Tips to Speed Up Responsive Websites

November 25, 2013 by Spyre Studios

On the Internet today, there’s a “need for speed.”

Customer behavior is one thing; online behavior for every customer is totally something else. The speed at which a website loads is the moment of truth. Unless the website loads properly and quickly enough, the customer is long gone (unlike traditional business outlets where customers tend to be slightly more patient with lags and delays). The web is a medium that demands precision, focus, and multiple elements working together to get it all in sync with the primary purpose of the website.

Thanks to the rise of the mobile web, we now have responsive websites. Surprisingly, even responsive designs don’t necessary load quick. On one hand, there are many websites that are not responsive yet. For those websites that have gone the extra mile with a mobile website or a responsive design, the websites still don’t load quickly. While responsive design will demand a series of courses, books, and reams of information by itself, our focus here is to find out how to speed up responsive websites. Here’s how you can speed up responsive websites:

Determine Primary Use and Deploy Responsive Design

Responsive

The ultimate struggle between designers and marketers is this: designers focus on the design and marketers want the website to help convert. Often, these goals belong to two different sets of professionals. As a result, websites suffer.

The first rule in website design is to make sure that the website is developed by designers to fulfill a marketing need. While designers can play with their tools, techniques, and inputs, the goal should align with that of the marketers (or business owners): to generate leads and convert customers.

If you are designing responsive landing pages, the goal of the page is to get visitors to convert. If it’s a magazine or an online publication, then the responsive version of the magazine should load quickly without the graphics and images (at least not all of them).

If you are working with marketers or business owners, bring them on board. Collaborate with others and make sure everyone is on the same page while designing web pages.

Go for Mobile-First Design

Mobile first design calls for simplicity and focus. It’s a method of design that streamlines your work and helps you design websites exclusively for mobiles. The idea is to create websites that’d have content suitable for display on mobile phones taking mobile phone real estate into account. According to Frank Kurland of McKnight Kurland, mobile reaches about 87% of the world’s population. That’s why, mobile first design is a mandate and not optional. Vincent Jordan talks about mobile first and insists on building responsive or mobile websites for experience first and responsive design next in terms of priority.

Responsive Design is All about Simplicity

Simplicity

Strip. Strip. Strip. Anything that takes time to load has to go out of the window. While desktop versions of websites can have a lot more design elements than the responsive versions, it’s important to identify what exactly should show up on a responsive website. Responsive design doesn’t have to be identical design (identical to the desktop version, that is). A large part of “responsive” has to do with “adaptation” depending on the device customers are using to access websites. What goes well on a desktop version might also go well (with adaptation) on tablets but will not work on smart phones at all.

Compress

Performance of webpages depends on the elements that have to load when the website is called for. Page size, images, text, and many other elements perform best on responsive design when they are minimal in quantity and are compressed well. In responsive design, you’d only send out what’s really needed to the target device. Compress CSS and JavaScript in general using tools such as Compass. If JavaScript needs compression, you may also use tools such as UglifyJS. As text or fonts can cause display issues too, use FitText to auto-update font size and configure display options with maximum and minimum size options.

Note: FitText cannot be used for entire paragraphs. It’s best used for headlines.

Minimize Loading Time

fast-bullet-wallpapers_27781_1280x800 

Johan Johansson of Smashing Magazine wrote a helpful post on how to make your websites faster on mobile devices. He also quotes research findings on how more than 80% of people are disappointed with the experience of browsing the web on their mobile phones. At least 64% of smartphone users expect websites to load in less than 4 seconds. That’s your window of opportunity. Perhaps you might want to take it as your goal or benchmark to achieve faster loading responsive websites.

Reduce Dependencies

You can achieve faster loading times by reducing dependencies by loading images through CSS, keeping external style sheets to a minimum, use CSS3 instead of images, use image sprites, font icons, avoiding inline frames, and use inline scalable vector graphics (SVG). Linda Bustos of Get Elastic also suggests eliminating redirects to m-dot sites, using fast and reliable CDN (Content Delivery Networks).

She also suggests using responsive images and to reduce client-side processes to a minimum by reducing use of JavaScript, avoiding widgets, and using specific server side techniques such as RESS.

Test, Test, Test

Test

Just as testing is a necessary element for marketing optimization; design also needs testing as a part of your workflow. If you have a design already, put it to test. If you are about to create design from scratch, prepare to test it out on various parameters such as browser tests, OS tests, device tests, speed, utility, links, navigation, aesthetics, and even conversions. Use tools such as Optimizely or MobiTest.

Testing gives you real-time feedback using which you can make your responsive websites worthy enough for your clients to benefit from.

Today’s demand is to reach customers no matter what kind of computing device they might use. Design across browsers, device types, and make sure that websites can be access irrespective of connection speeds.

It’s challenging, but it’s rewarding.

Abhishek Agarwal is Director of Business Development at Rightway Solution, a premium mobile app development company. Abhishek is also an expert on ecommerce website design. Feel free to have a chat with him on Google+.

—–

Image Sources: mygraphicfriend, techpinions, wallpaperstock, Facebook

Filed Under: Design, Mobile Tagged With: responsive design

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022