Responsive Web Design Website evaluation

City of Glasgow College - Website


The College's website is a two column grid structure with one column at a different ratio to the other. When scaled down to mobile size it converts to a single column. There are two menu bars, one right at the top consists of important hyperlinks that people visiting the website for more formal reasons to get quick access to. Under the top menu bar there is a secondary one, the college's logo resides here as well as general drop down menus people can click on to get more detailed hyperlinks to more specific webpages. When scaled down to mobile size the menu bars get organised into a tap-able drop down menu then there can tap on relevant hyperlinks. When scaled to the mobile version the text changes font size and interactive buttons scale up to fit more of the screen space.

Adobe - Website


The Adobe website is a three column grid layout on desktop devices, when scaled to mobile size it converts to a single column layout. There is two menu bars on this webpage, the one at the top of the webpage is for account holders with Adobe to access their account information and resources. The second menu consists of hyperlinks to information on their products and hyperlinks to where to buy and download their software. When in the mobile version of the website the top menu bar loses the type and just displays iconography to save on page. However the secondary menu bar just has a different layout and the type size is lowered to fit into the constraints. Images in the webpage get scaled down and cropped out a little on mobile devices, whereas on the desktop version they are full sized images.

Microsoft's Website


Microsoft's website's menu bar consists of drop down menus that contain hyperlinks to other webpages that the user can use to navigate the site. When scaled down to mobile size the dropdown menus get collected into a tab-able menu section, and the search bar becomes iconography. General text size increases on mobile version to improve readability. Images scale to take up more space on the mobile layout due to the single column design, interactive buttons on the website also do this.

HP's Website


HP's website's menu bar has category hyperlinks that take the user to different webpages, within the site. In the desktop layout there are overlaying images and text upon images as well, however in the mobile layout there text and images are separate and do not over lay. The hyperlinks on the menu bar get collected into the tab-able menu section to save on space in the mobile layout. The website has a maximum of 4 columns, however the 4 columns are within a single column structure. When scaled down to mobile size it converts to single column structure.

BBC News' Website


The BBC's Website has a four column grid structure, some elements within the page take up more than one column. The mobile layout is single column layout. When scaled down to the mobile layout, the text changes its placement in relation to the images. There are two menu bars within the BBC's website, the top one is used to navigate between different services that the BBC offer. While the second menu bar is specific to the news site. It has hyperlinks to different genres and sub topics in relation to the news. Images don't change that much between the desktop and the mobile versions of the site, just slight size differences.

Created By
Darrell Finlay


Created with images by Pexels - "code code editor coding"

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.