Many websites now indicate that they use a responsive web design. Responsive web design means that every page adjusts or “responds” according to the screen size. Many websites maintain different versions based on users’ devices. For example, when a user navigates to facebook.com through the phone browser, he/she will be redirected to m.facebook.com automatically.
There are 3 major factors to consider when designing a responsive website. The first one is the screen size; PC screen is normally 10 times bigger than the mobile screen. Responsive websites shouldn’t require the user to zoom to read the text or see the pictures. On the other side, designers shouldn’t rely on the screen resolution alone because mobile phones can have higher resolutions than PCs (e.g. Samsung Galaxy S8 have resolution of 2960 x 1440). Designer should spend some time and effort in making the website text readable on all devices. Some tools like mobile browser emulator can help designers to check pages of their websites on different screens.
The second factor is the minimum distance between clickables. Mouse pointers in PCs make clicking on any widget (e.g. buttons, pictures, labels, etc.) an easy task regardless of its size. On the other side, mobile phone users rely on their fingers that have much bigger size than mouse pointers. For this reason, all clickables on the mobile versions should be separated from each other with great distance. For example, if two buttons are close to each other in the desktop version (e.g. login or register), then those buttons should be away from each other in the mobile version. It’s common practice to put all clickables in a list; such a list will be visible when the user clicks on a menu button (usually on the top-right area of the screen).
The last factor is the screen orientation. Normally, all PC screens have landscape orientation. This gives the designer the freedom to split the screen into two or more sections. In mobiles, the normal orientation is portrait. For this reason, designers should place objects in vertical order in the mobile versions. The images’ aspect ratios should be altered to be portrait too.
Why having a “responsive” website is a must?
According to StatCounter, mobile and tablet internet usage exceeded desktop starting from October 2016. 51.3% of internet users are now browsing through mobile devices. Starting from April 3, 2017, Android became the most popular OS accessing the internet. This means that mobile-unfriendly websites will lose the majority of their customers soon.
Losing customers isn’t the only problem facing those websites, their rankings will be impacted too. Google made an announcement in April 2015, that mobile friendliness will be considered an important ranking signal. Accordingly, websites that aren’t mobile friendly will lose their ranks in the search result. Google offered an online tool that can check weather the website is mobile friendly or not. In addition to Google, Microsoft’s search engine, Bing, is now ranking responsive websites higher too. Website owners can use Bing’s mobile-friendliness tool to check weather their websites are responsive or not. Both Google and Bing test tools can check the landing page or any other page in the website.
If you’re using a CMS platform like wordpress or an e-commerce solution like Magento, make sure that the theme you select is a responsive one. You can use any of the above tools on its demo before purchasing it. Starting from April 30, all websites built by Advicenode will be responsive. They will detect the device type and will change their layout accordingly. It’s not just the layout that changes, the page speed will be affected too. All mobile pages will be light-weight so users can load them within fraction of a second.
If you have any questions, please don’t hesitate to write a comment below.