In recent years, we register an upward number of users visiting web sites from different mobile devices. Thus, we would hardly search for an active user of Internet, who does not work with any smartphone or tablet browser. At the same time, we can see a growing number of users, who owned personal computer or notebook in the past and used them only for the purpose of searching through web sites. Many of them are now completely satisfied with a use of smartphone or tablet. Outlined trend represents a key factor, why is responsive design essential and becomes a new standard for any web site.
Basic Features of a Responsive Design
Responsive design adapts to a current width of a screen, whereby it ensures that a web site looks more attractive on all used devices:
Sole width of a screen also plays an important role especially because of the fact that from users point of view, it is not comfortable to scroll a screen in a horizontal direction. Responsive design enables items located side by side on a full width of a screen to be placed one below another, to be displayed in a slider, transferred to a different place or completely hidden.
Responsive design – items of the web site placed side by side (viewed on computer)
#1 Text Readability
In comparison to users of computers, users of mobile devices are more sensitive to a size and contrast of a text. The reason is that eyes of people sitting in constant distance from a screen are better adapting and for them it is easier to read smaller texts on a screen. Eyes of these users do not have to adapt to a constantly changing environment. For these users, it is important to display texts in a way they are easy to read and with a sufficient size of a letters.
Responsive design – web site with a number of information in a standard view – represents a possibility to place relatively big amount of information side by side and use smaller letters
Responsive design – mobile view representing items placed in a way offering good readability of text
#2 Active Area
One of the most frequented mistakes of less responsive web sites is a small active area of items. For this reason, in a praxis it applies one unwritten rule telling that the smallest width of any item on a mobile device should be at least 35px. In a case that an area is smaller than 35x35px, it can easily happen that a user shall have a problem to click on it or simply to register it. Thus, it is important to create big CTA buttons to register them at a first sight. Similar rule shall apply also on distances between individual elements.
#3 Picture Optimisation
Any responsive web requires good optimisation of pictures. Users of mobile devices often join Internet with a mobile access that is slower. However, in most cases they do not need pictures in a high definition as it is required in cases of computers and notebooks. For this reason, it is always practical to prepare various versions of pictures, whereby each of them is loaded in a different definition. In HTML we can achieve this result by using of srcset as it is outlined in a picture below.
In this case, we shall apply a rule telling the following - if a picture is displayed in a certain definition, it is useful to make it in 2x bigger definition. It is recommened to follow this procedure mainly with respect to extension of devices with much higher density of pixels (e.g. Retina displays or Apple devices). Otherwise, pictures on these devices can be blurred.
#4 Web Navigation and Responsive Menu
Navigation is one of the most important items of any web site. Main role of this tool is to enable easy orientation on a web site and to bring users to required information. When creating a responsive web site, it is very important to think abou right navigation. In cases of devices with big screens, we prefer so called megamenu with many different items and pictures. However, this megamenu is not practical in cases of mobile definitions. In such cases, we recommend to replace it by a so-called hamburger menu. The name of this tool is derived from an icon having a hamburger shape. By clicking on this icon, it will appear and go from a side of a web to its centre.
Responsive design – typical example of a megamenu containing various items and picture
Responsive design – megamenu in a mobile version changed to a “hamburger” menu
#5 Technological Solution
When programming a responsive web site, each programmer can choose from the two basic options. He can project everything alone or use any of available frameworks. The most popular ones are e.g. Bootstrap, Skeleton, CSS grids and many others. These frameworks contain various different rules that shall apply to a web in a mobile definition. Main benefit of this procedure is that respective programmer do not have to “create a wheel” in every individual case and to programme all rules again. Existing rules can serve as a helping tool.
In ui42 CMS BUXUS we often use framework Boostrap or CSS grids. Each of them has different pros and cons. We use Boostrap mainly in cases, when we need good support of browsers. However, we are able to apply other useful features of this framework. Boostrap already contains prepared styles of buttons and other items. CSS grids is used mainly in cases, when we certainly know that we will not use other items contained in the Boostrap. However, the CSS grids has one big disadvantage – support of older versions of Internet Explorer is weaker.
In the following article, we will introduce you impacts of responsive web site upon SEO, alternative ways of optimisation and a sole responsive design contained in the CMS BUXUS.
Is this topic interesting for you? If you have any questions, do not hesitate to contact us.