Responsive design and user experience

by
Cecilia Macioszek

Understanding responsive

While it was ok before to design for different window sizes : one design for smartphone, one for tablets and perhaps one or two designs for PC depending on the size of the screen, it is not longer the best option since there are different sizes of screens depending the brand and the model. You may be aware of the Google SEO update which gives a better ranking to websites that are mobile friendly, also known as mobilegeddon

50% of people use PC and 50% use Tablets and Smartphones

With more than 50% of users that use their smartphones or tablet to use the Internet (number can vary depending on the country and the time of the day) it is very important to optimize a website in order to match the needs of the website visitors. A responsive website can adapt to any screen resolution and I think that in the future we would see more and more different screen sizes so optimizing now can save a lot of time in the future.

How responsive design works

Usually when you have elements aligned next to each others on a pc screen size you cannot do the same in a smartphone version. The reason is that the content would be too small, unreadable, not clickable for the user.

Site PC version and Smartphone version

We all know that a great website is a user friendly website, in order to do so we have to ask ourselves the following questions :

  • Is the website understandable for our target ?
  • What does the user want to see first ?
  • Is the content clear and readable ?
  • Is the website pleasant to use ?
  • Does the visitor need this information ?

There are probably more questions you would like to ask yourself but anyway...In responsive webdesign, but also in general website design, because user does not need to be drawn with information from the first page, not adapting your design to the visitor can become a very bad user experience using a website and he/she is more likely to never visit it again at least from his/her tablet or smartphone. You may want to clean up your top page by answering this question : "Does the user wants to see this information on the first page on my website ?", "Does the user NEED this information from the beginning ?". We got many requests from customers who want us to rebuild their website to be responsive but did not thing of cleaning their current site a little bit in order to give space to the user. Of course in such a situation we do recommend our clients to change the menu in order to make things more compact and understandable and most of the time they listen to our advices, but sometimes they find it difficult to merge two or more categories in one even if they are almost the same.

Media queries

It is important to define the media queries depending on how your website looks in a screen range size and not writing the media query depending on a smartphone size or a tablet size. One reason is that there are so many different devices and screen sizes that you would end up with a lot of unnecessary breakpoints. Another reason is that the point of responsive design is to make your website displaying well anytime and not to change the disposition or size of elements depending on the device.

Responsive menu

There are different types of menus for a responsive some are animated, some are not. A common menu we can see is what we call a hamburger menu :

2 different styles of Hamburger Menus

When clicking on the button you can access the menu. Sometimes the menu is a dropdown menu, sometimes an accordion, sometimes it came in from one side of the website. Sometimes the hamburger menu is replaced with the word MENU There is an other option to replace the menu with icons so they can fit in narrow screen. There are some navigation that are displayed entirely whatever size the screen is etc... Depending on your target some menus may confuse the visitors of your website, you need to think like a visitor of the website you want to create in order to understand the behaviour of your visitors.

Menu using icons

Example of a menu with icons, it was not made by our awesome designers do not worry !

Of course the choice of a menu depends on how many categories your menu have, and what categories you have in your website.

Responsive images and font size

Responsive images can be tricky, sometimes your image is the perfect size when visiting your website from a computer but when visiting your website from a smartphone or a tablet the image is too small, you have to make sure that your website visitor would be able to see the image properly even when using his smartphone.
The same thing can happen to the font, the h1 can be too big for a smartphone so it is better to use em for responsive websites. You can learn more about em on the W3schools website.To convert your px to em easily you can use this online tool.

Of course there are so many important points to talk about when it comes to responsive web design but this post would be endless. You can check some famous books about responsive design if you want to learn more:

CONTACT

制作に関するご相談は下記までお気軽にお問い合せ下さい。

TEL:077-572-7155
[ 受付時間10:00-19:00 土日祝休 ]
Shiga Office
〒520-0832滋賀県大津市粟津町2-63 CS石山ビル2F
TEL 077-572-7155
Tokyo Office
〒150-0002東京都渋谷区渋谷1-17-1 TOC第2ビル3F
TEL 03-4405-3460