Responsive websites RESEARCH AND MINI EVALUATIONS

BBC website

desktop
tablet
mobile

Mini Evaluation

This is a totally responsive website, with a flexible grid and images (sizing down as appropriate). The three columns used for desktop resolutions, narrow down to two for tablet sizes and a single column is used for smaller resolutions.

The navigation to possibly the 6 most popular sections of the site e.g. news, tv, radio etc. is shown along the top of the large resolution (desktop) design, with a 'more' drop down to allow people to explore the other areas. The layout for tablet however does not have room for the options to be displayed - so the drop down label has been changed to 'Menu' to indicate it's purpose as navigation. The design for mobile has been tweaked to allow for two options to be shown 'news' and 'sport', with the select dropdown again labelled as 'more' to indicate other options are available.

Font sizes have been calculated in rems to allow for the correct ratios to be used across all resolutions, so the text remains very legible across all designs.

Smashing Mag

Large desktop
smaller desktop / laptop
Mid size - smaller desktop / tablet / notebook
tablet
mobile

Mini Evaluation

This is a responsive website, using a flexible grid system with fluid widths and images (which scale down as required). It seems to adapt the design with media queries at a few different points where the layout is 'tweaked', rather than at just 3 set breakpoints for desktop, tablet and mobile.

The grid changes from using 4 columns, to 3, to 2, to eventually a single column at the smallest screen size.

The global navigation (for the 5 main areas of the site) is on the left hand side at the largest size as there is enough screen real estate, but then sits as a conventional top bar in smaller width layouts. And then at the smallest screen size layout it is hidden under a button with the word 'menu' on it. The space for the navigation is contrasted with the main page body area (with a grey background colour) so is always easy to pick out.

The text is sized appropriately at all screen sizes, and is even made a bit larger for the mobile design to help wth readability.

City of Glasgow College

desktop - largest size
next size down - smaller desktop / tablet
tablet
large mobile / tablet
smaller mobile
smallest size - mobile

Mini Evaluation

Another example of a fully responsive website which uses fluid widths and images that scale down as required. Again there are more than 3 breakpoints and small tweaks are used to improve the experience where possible. E.g. The inclusion of the search box and placeholder search text, which reduces to the word search until finally eventually just the magnify glass icon is shown at the smallest size.

The modules shown on this page are made up of 3 columns, which stretch as needed and text reflows to fit available space, and then at the smallest size this reflows into a one column design for easier legibility. It also looks like the text size has been increased for the mobile size too, to help with readability.

The main navigation also retains full words for as long as possible, before it is hidden behind the hamburger menu button. The hamburger is a very popular navigation pattern now, and most people realise that the menu will expand if it is clicked. If an organisation had an older audience however it may be beneficial to use the word menu as a clue.

GOV.UK

large desktop
Tablet
mobile

Mini Evaluation

I've included the gov.uk site as an example as although it looks a bit plain and boring, it's an example of a site that has a huge amount of navigation to handle at all times. It is fully responsive with fluid widths and images that fit within their containers.

Perhaps the most important aspect of the site, the search box maintains a consistent presence at the top of the screen in all layouts...

In this page example there is a 3 column grid which sizes down as the screen size gets smaller and then changes to one column for the mobile design.

The text also seems to increase in size for the tablet and mobile designs, again this helps with legibility.

MY CITY

large desktop
smaller desktop
tablet/mobile
mobile

Mini Evaluation

This is also a responsive website, with fluid widths and images that resize to fit their containers. However there are only a few breakpoints being used, so the design is not utalising the screen space as well as it possibly could.

This home page example shows the grid going from a 5 column layout used for the larger sizes down to a one column used for tablet and mobile device screen resolutions.

The mobile version loses the myCity logo at the top left (which also acts as a link to the home page) so in order to get home the user needs to know to open up the hamburger navigation to have that option.

Although the carousel at the top of the page is responsive and scales down to fit on the smallest screen size, because of the landscape ratio, any banner images that have text in them will be hard to read at the mobile size. This is a scenario that may have benefitted from a different type of tweak, for example text not being embedded images and then it would sit outside of the banner image, either above or below it.

The other areas with text and images/cons are however legible and clear.

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.