Responsive web design in general
Responsive web design is not the same thing as mobile design. Mobile design means that your web designer creates the whole design of the website or web application specifically for smart devices. Responsive web design, on the other hand, means that the domain, content and code syntax stay unchanged (more or less unchanged, because of JavaScript), while the design itself changes through so-called media queries in the file that defines the design of the site (the CSS file).
This way of designing sites relies on flexible grids, flexible images and CSS3 media queries, so that the content adapts to the different screen resolutions of users' different devices. Responsive web design has become the standard for creating modern websites. The more devices with different screen sizes there are on the market, the more essential it is to adapt your web page to them. Developers and web designers have to think about how to adapt a desktop design to the screens of mobile phones or tablets so that the website or application stays just as functional and the content stays easy to use. The more satisfied the user, the greater the profit from the website. The owner of the website is more satisfied too, and we as developers get good references. A win-win situation
In one of its articles, TechCrunch magazine predicted that 1.9 billion internet users would be exclusively on "smart devices". This means that responsive web design is a "must-have" in business today.
Responsive web design started out as a fancy trend, but it soon became an evolutionary step in website development, and to this day it has a great influence on the work of all of us who are on the internet.
There are many advantages to responsive web design, and some of them are:
The advantages of responsive web design
The advantages of responsive web design are numerous, but I will list some that concern the users and owners of websites, and put us developers in second place.
- It is cheaper. The client pays a slightly higher price than for a standard web design, but much less than for 2 or 3 different websites for all the platforms. In essence, the developer builds only one website, which changes its appearance through the rules of responsive web design and adapts to different platforms. Adding new content to the website is easier when you enter it in only one place and adapt it to only one device (usually the desktop). Every good developer should have a system (CMS) that optimizes that content and adapts it to the other devices. The conclusion is that whoever enters content on the site does it very quickly, and so saves time and money.
- It saves your time. With proper planning, RWD easily brings efficiency, because you do not have to enter the same content adapted for every platform - you do it only once. The code does everything for you. Shrinking images, adjusting the font size, transforming the navigation... it all happens automatically and adapts to the user's "thumb".
- Website optimization improves. With a single web address (URL), desktop users, users of smart devices and Google's robots all get the same content, except that each of them is shown what they "ask" of your site in the way that suits them best. Google, the strongest search engine, has started showing the words "Mobile Friendly" under the links in its regular search results, which in effect means that the website was built with responsive web design.
- The performance of the website will be considerably better. Loading the website and navigating through the pages will be much faster. The images loaded on smaller devices are smaller in resolution and in the space they take up on the hosting, so they load faster. The fonts used are adapted to smart devices, so the user's experience of your website becomes considerably better.
- The users of your website will reach the information they want faster. Using RWD in the design of your website means that you will get a much larger number of users on mobile devices. You will agree that a user is more likely to buy your product or ask for your service if the website looks good on their device. After all, a website is the mirror of your business.
GOOGLE recommends responsive web design
Google recommends that web developers follow the trends in HTML5, because it is easier for the robots that scan your site to find their way around that code. It also recommends using the CSS3 standard for designing websites, together with media queries, the basic tool of responsive web design, so that websites adapt to different screen resolutions and are, in Google's terms, "mobile friendly".
You can check whether a website is mobile friendly by clicking the link Google Mobile-Friendly Test
Source: Google Developers
The drawbacks of responsive web design
To look at the other side of the coin, we also have to mention some drawbacks that RWD brings, with the aim of trying to avoid them or making them affect the optimization and clarity of our website as little as possible.
- The website may load more slowly. A common mistake developers make is using the same images for all screen resolutions. This is a big mistake as far as optimization goes, and your developer must not let it slip through. Your website will never be well optimized, and it will load very slowly on internet connections that are slow anyway, such as 3G mobile networks.
- The website may take longer to build. The key to success with RWD is knowing how to do it. That means the web developer has to look at the problem and adapt the whole content for users of smaller devices, and not just hide some of the content that will not be shown on smaller screens (sliders, large images, navigation and so on...). If your web developer tells you that RWD will take a few more days of work, there is a good chance they know what they are doing - but do not take this advice for granted.
- The content must be shown on all platforms - Some web developers take the easier route and simply hide content that is complicated to adapt to smaller screens. As a client, pay attention to this, because you are paying the developer for that part of the work. Pay attention to forms, tables and navigation.
- Users do not want the basic design in every case - Pick up a mobile phone or a tablet and look at what the developer has made for you. Sometimes users do not want an image slideshow turning on a tiny phone with tiny arrows they cannot possibly press, or to have to zoom into that part of the website in order to press them and move the image. Adapt all the content on the site so that a contact phone number, a product or a service can be reached in 2 clicks at most. Contact details and a good search should be given prominence on smaller screens.
Are you ready for responsive web design?
Before you rush into building a website, check whether your developer has the necessary experience in building websites of this type, and whether you really need a website with this technology.
- Does the website need responsive web design? - This question concerns the redesign of an existing website more. If you have a website and want to make it adapt to devices, first consider whether it is worth it. If the pages are large, the user will need more time to download them while using your site. It may be better to spend the money first on website optimization than on blindly following a trend. Do not get me wrong - in my opinion every site needs RWD, but the website has to be prepared for it. Also, if you sell products or services that customers buy exclusively on desktop computers or laptops with screens over 13" diagonal, you do not have to spend extra money on responsive web design. You can check which devices users come to your site from in Google Analytics.
- Does your web developer know how to build a responsive web design? - Responsive web design is not simple to build and can be more complex than you think. Everything has a learning process, and so does this technique of building websites. There are all kinds of aids for designers and so-called frameworks, or predefined grids, with which responsive web design is considerably easier to do. Bootstrap and Boilerplate are the two best-known frameworks for responsive web design, but we at Izrada sajtova Srbija believe it is always better to build a solution made just for your site, with far fewer lines of code, than to use a predefined solution made for a large number of sites. Less code = faster loading. Building a dedicated solution for your site takes longer, but every pixel is controlled precisely, and it is easy to move things and depart from the design if the client wants to.
- Can the web developer test the website? - Although there are many tools on the market that show how a website looks at different screen resolutions, we know from experience that responsive web design is best tested "live". In our studio we have screens from 27" all the way down to mobile phone screens of 4 and 5.5". This is how we ensure the quality of the responsive web design we deliver and adapt it so that it is really useful to the future users of the website. You should also look at the analytics and follow what the users who come from mobile devices look at on the site, that is, whether they look at what we want to show them. If the RWD is not set up properly, the design needs to be changed and the important things highlighted. There are over 100 different screen resolutions on the market, so the problem of designing a website for all of them has to be approached with exceptional knowledge of the subject.
- Expect that not everything will be perfect - As we said, responsive web design works with the same code and, with the help of CSS media queries and JavaScript, manages that code and displays it the way the web developer has set it up. In many cases you cannot expect everything to be pixel-perfect in every view. Errors of this kind most often appear after the developer has finished the website, when the site's owners, while entering content, add perhaps a large unoptimized image or a longer text where the design did not anticipate one. A good web developer should guide you so that you do not make such mistakes, that is, should anticipate where the design could "break" as you work.
Conclusion
Responsive web design has become a necessity for 99% of users. It has entered the standard offer of every web development agency, but choose your developer carefully. A recommendation or references are always the best way to check the quality of an agency's service. Ask which tools they work with, how they test what they build, and so on. I hope I have been of help and have managed to bring this trend in website design at least a little closer to you.
Thank you for your time. If you liked this text, please share it on social networks. Support our work.
