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
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
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
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
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
