Labels

Thursday, March 10, 2016

Tips and examples on responsive design

abc.go.com

Keeping logo placement consistent:

Keeping the logo in the same area of the website throughout the changing screen sizes helps to keep the look of the website consistent. This website keeps the ABC logo in the upper left part of the screen throughout each screen size.
cnn.com


Focus on the most important content:

As the screen size gets smaller keeping the same amount of content would make it look to busy and crowded. So as the size gets smaller it is important to focus on the most important parts of the website, the things that the majority of people go to that site to see. This way they don't have to be scrolling and searching forever in order to find what they are looking for. Or even make them just exit out because there is just to much to look at. CNN.com does this well by taking away everything except for the biggest and newest stories and then putting everything else underneath it and under other tabs.



weatherbug.com

Scale the number of columns:

The amount of columns and the way they look is a large part of how a website looks and how it flows. Because of this it is important to keep the columns scaled correctly based on the size of the screen. If the columns are kept the same size and in the same placement in mobile as they are on a desktop, it is going to look unappealing. WeatherBug does this by scaling the boxes down and putting them below each other than next to each other.












http://espn.go.com/

Consider the number of characters per line:

As the page size gets smaller the amount of characters should get smaller accordingly. This is so that it is easy to read throughout each size. With this the font size and family also needs to be considered so that it is still readable even as it gets smaller. ESPN does this by reducing the amount of articles they have next to each other as well as how many words are in each line.








expedia.com

Switch up the menu:

A menu that works for a desktop most likely will not work for mobile. The reason being that the mobile is considerably smaller as well as the fact that you have to consider touch capabilities and different sized fingers. You also don't want the user to have to scroll a lot when looking at the menu. To fix this problem you should think about changing the menu looks. Going from a horizontal menu on a desktop to a vertical drop down menu for smaller screens.This way the menu is user friendly. Expedia.com does this well. They take their horizontal menu on their desktop and change it to a drop down for mobile.








aritzia.com

Crop images proportionally:

Cropping an images for smaller sized screens is a good way to keep the same look of the website without it being to crowded or to busy. The site Aritzia does this well by taking the original photo and cropping it so that you only see the left side of the images.

No comments:

Post a Comment