What is responsive design?
Responsive design means that a website automatically adapts to the resolution of a particular device used for its browsing. If the user views the page on his desktop computer with a high-resolution screen, the design of the page uses the entire screen, including different graphic elements and advanced animations that do not contain key information. When the user views the same website on a mobile device, the design and functionality of the page automatically adapt to its dimensions and resolution.
For improved readability, the fonts get bigger, and the animations get simpler or do not display at all to ensure seamless performance and clarity. The graphic elements simplify to improve the loading speed of the page. The other elements of the page rearrange depending on the resolution of the device and usually display conveniently underneath each other for improved clarity. Some elements, such as modal and pop-up windows or banners, do not display at all to improve the overall mobile browsing experience of the users.
Furthermore, mobile devices usually don't display the entire main navigation bar, which shows up after clicking the icon in the main menu, ensuring that the user does not need to scroll through all the items in the main menu on every sub-page.
Many times, the functionality of the page changes as well. There is no need to search high and low for the perfect example. Let's take a look at our home page – it contains a slideshow of our latest projects. However, this element is not suitable for mobile devices, so they display it as a list of projects arranged under each other.
How to create a responsive mobile website?
Creating responsive websites often uses the so-called “CSS media queries”. They enable us to define precisely the design of the site, as well as its response to screen resolutions of different devices. Then, the response of the site is determined by the width or the height of the screen. Nowadays, CSS media queries are seamlessly supported by modern browsers.
What about responsive design and Internet Explorer?
Internet Explorer supports responsive design since the version IE9. The older versions that are, by the way, not recommended for use due to security reasons, can support the responsive websites with the so-called polyfills that extend the functionality of the browser. An example of such extension is Respond.js.
Additional tips for mobile websites
There are several different ways how the users of mobile devices can streamline the browsing experience of their responsive websites. One is by implementing HTML5 tags in web forms. For example, using the web form element “email” displays the character “@” on the keyboard by default. Using the element “number” shows the numeric keyboard only. Other elements including “url”, “date”, “time”, etc. behave analogously.
Furthermore, the use of different gestures has become a natural part of using mobile devices, what also makes them perfect for implementing into web forms. For example, the gesture “swipe” is useful for browsing image galleries.
With mobile websites, the size of active elements is crucial. When it comes to creating a website, it is important not to forget about the users with slightly larger fingers. When it comes to developing mobile apps, Apple recommends sticking to a minimum clickable space of 44x44 points.
Responsive website design also allows determining the location of the user effectively. For example, a contact form with a map can help the user find the shortest way to your shop or office from his current position.
Advantages of responsive websites
Cost-wise, the client benefits greatly because the use of responsive design eliminates the need to create a separate version of the website for mobile devices. The mobile version requires just slight adjustments of design and cascade styles. It requires minimum server-side programming, which makes it very cost-effective for the client, boosting the value of his investment. The responsive version is usually 20 – 30% of the costs of a website with no content management system.
Furthermore, a responsive website is a significant competitive advantage. Users who can quickly find the information they are looking for on your website will not be forced to search for it on the sites of your competition. Up to 95% of small business websites are not optimized for mobile devices. However, consumer behavior is changing, and the use of mobile devices is growing radically fast. The penetration of smartphones into Europe is approximately 35%, and tablets are currently reaching 18%. Our project statistics show that at least 20% of website visits are via these devices.
Lately, even the Google indexing tool prefers websites that are responsive/adjusted for mobile devices. So stop wondering whether to optimize your page or not – it was a bit too late for it yesterday J
Conclusion
The responsive websites developed by our agency include optimization for devices with greater point density, such as the Retina displays of iPhones. Read more about this type of optimization in our article “Why to optimize your web for high-resolution screens (Retina)?”
Are you not sure whether your website is optimized for mobile devices? Try the Mobile-Friendly test by Google! If the result of the test says “not mobile friendly” do not worry. Just let us know and we would be more than happy to come up with a solution for you.
