Rethink Your Responsive Design Strategy
All of us, WordPress users are familiar with the concept of Responsive Design. Undoubtedly, it is considered as a prevalent trend in Web Design now and in the future. In the below artciles, we will mention the practices of responsive design, its shortcoming and how to optimize responsive design for performance.
What are responsive design and its trend?
Responsive web design, originally defined by Ethan Marcotte in A List Apart, meets the growing needs of users using different devices. A responsive design simply means a website that has been constructed so that all of the content, images and structure of the site is rearranged logically on any device. Therefore, Responsive Design has been regarded as a new trend, a new way of thinking about design. The chart below is the most tangible evidence for the trend of using mobile device compared to using PC.
What is shortcoming of responsive designs?
We can’t deny the role of responsive design in web section. However, it also brings some problems for WordPress users. Continue reading to understand two most common issues: loading time and text arrangement in website and their solutions.
1. Loading time
According to a study from marketingland.com, 69% of 155 prominent responsive websites including Starbucks.com, Engadget.com took four seconds or more to load on a Smartphone.
Source: http://marketingland.com/study-load-time-69-mobile-sites-deemed-unacceptable-81126
Meanwhile, according to a study mentioned in book “Getting the New Baseline in Web Design Right”, composed by Smashing Magazine, 64% Smartphone users expect websites to load in 4 seconds or less. So how to enable responsive web design as well as enhance users experience in a meantime? This is major concern of all WordPress designers, especially manager and coders.
2. Mobile-specific content management
Content organization to fit all devices type is also hard to solve problem. Displaying website content is troublesome story because of different behavior patterns between Smartphones’users and Desktop users. Mobile users are typically busy and need access to quick, reference information. Desktop users have more time to read in-depth on a topic and casually browse. Building different yet proper device-based contents can greatly improve your website’s user experience.
Moreover, to reach global consumers, content should be used by users’ native language. To be more precise, on the one hand, different languages require different lengths. So content gradually becomes the first resolved issue.
How to optimize responsive design?
As far as Im concerned, there are 2 most efficient ways to optimize responsive web design up to now:
1. Reducing image Dimension
Image is considered as the primary element leading to website weight when studying 155 responsive websites.
It can be seen that images take over a half of website load time in all websites. So this article will present an attractive way for high-resolution images optimization: RESS. RESS stands for Responsive design with server-side components based on Lukew model. The biggest effect RESS brings in is reducing image payload.
To implement RESS, you will use huge variables – a component that has device class optimized implementations for it on the server to give the page template in different sizes. The key point to distinguish a server-side solution RESS from a client-side solution like Responsive Image using Java Scripts is that the overall layout of any page containing this variables is covered by flexible grids and media queries but optimizing what we send to any given device is taken care of on the server.
For example, according to Lukew, for image optimization solution, he shows using a server side component by adding a variable {{>userimage}} in theme and creating it in different sizes:
Besides, RESS helps optimize unexpected JavaScript & CSS files for each mobile device. RESS will make your website performance better. Ok, I guess that you are breathing out strongly and thank god for giving us WordPress, which is already intergrated with RESS. Calm down, it’s just not enough. Let’s move to the second point.
2. Better designing your content for all different screen sizes.
It is said that your breakpoints in responsive website is based on better designing content, not device screen widths. While the old approach is checking screen sizes of popular handsets and applying the majority rules to responsive design, the practical method is needed because the mobile screens are becoming more & more varied and unpredictable. Each year, there are milions of handsets with new sreen ratio produced. Instead of adjusting a design to fit the portable device you should find out solution to the content width challenge.
Choosing number of characters and words is that answer. According to a book “The Elements of Typography Style” by Robert Bringhurst, “anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size”. Moreover, according to Jossef Muller – Brockmann writing in the book “Grid in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung”, it is said that an easy-to-use column needs 10 words in line. So a new idea drawn from two above authors: the ideal design is growing the width of the main content from either 75 characters or 10 words. Sure!
However, the tricky point is in choosing font and font size because of different languages cause to different length of line.
Let’s start to design from small screen to ever bigger screen! Based on the theory of Oliver Reichenstein, font size depends on the distance between our eyes and the device we use and as we tend to hold mobile phones closer to our head than laptops, the font size will become smaller whenever the measure is smaller than 45 characters. A single column is enough in smaller devices. For bigger screens or ever, you can only add columns or some media queries and then to adjust the layout, either to make website better and to show more information such as navigation, images or some relevant content. He creates a responsive font size-based website because according to him, everything is based on font size and the layout does not break when the font size of the browser is increased. Briliant, is it?
So, there are some good ideas for optimizing responsive design from top-notch people. In my opinion, the most important thing belongs to experience of designers. So what do you think? Rethinking your responsive design strategy today and give us your ideas about our blog post. Don’t forget to support our new free and premium responsive WordPress themes.
