Responsive Websites

Warner Bros. Desktop Layout


The desktop site is split into multiple columns per row; the first row having 3 columns, the second having 5. The columns leave a huge amount of empty space either side which i feel could have been filled a little more by maybe adding an extra column.

The bar at the top of the site contains several different categories to the right of the logo, with the search icon on the far right of the desktop site. These items are all easily accessible, with the text size being perfectly legible.

Warner Bros. Mobile Layout


The mobile version is 1 column in the first row and 2 on the second. This layout fits perfectly on the screen, leaving just enough empty space either side, unlike the desktop layout.

The mobile site is a little different on the top bar, with just the logo on the left and a menu icon on the right, which contains all the categories and the search bar that was available on the desktop version. These categories are a little 'harder' to get to on the mobile version as you have to take that extra step of going into the menu, but of course this the most practical way of doing it on mobile

College Desktop Layout


The 'Find a Course' desktop side offers 2 columns, the first column being course categories with a search bar above, and the column on the right is a list of courses available. Similar to the Warner Bros site, there is a lot of white space either side that could be filled.

College Mobile Website


The mobile layout is displayed all in one column with the course search bar and course categories at the top of the page, and the list of courses below. Beside the logo is 2 icons; the search button and a menu button, which contains categories such as 'Find a Course'. The menu bar adds an extra step if you want to click on a category, as you have to go into the menu first, however this is probably the best way to display this site on mobile. I personally think the type size does not have to be as big as it is, but then a smaller size would leave even more space on the right of the text.

Apple Desktop Website


There are 4 columns on the desktop layout, which perfectly fit the space, below a large image. In this case, four is the right amount of columns to have; adding an extra one would cause each box to be smaller, and taking away a column would mean the contents of the box would be small in comparison to the box itself.

Apple Mobile Website


This layout is all one column, with the boxes below the main image. The image in particular on the mobile version is absolutely huge, taking up most of the screen. I personally think the site would benefit from a smaller image, which would then allow more of the boxes to appear inn the one space without having to scroll down too far to reach them.

DC Comics Desktop Website


This layout consists of 3 main images - relevant to the current week - which act as links to other pages on the site. Below is the Pull List, positioned in the middle of the page. Again, like other websites, the pull list has lots of white space either side which could easily be filled a little more, making the page more appealing in my eyes. The bar at the top consists of the company logo on the left, categories in the centre and the search bar on the right.

DC Comics Mobile Website


Here there is just one of the main images on display, however the main image cycles through every so often to show off all 3 images eventually. Below that is the pull list, which you can scroll through. I'm not a fan of this personally, as it doesn't look as good due to one box appearing as though it is spilling off screen. This could be improved on by shrinking the boxes and adding arrows either side, to help access other boxes within the pull list. The bar up top consists of the menu button on the left, the company logo in the centre, which seems to be a similar structure for most mobile sites.

Scotrail Desktop Website


Below the top bar is another bar with options to buy tickets or check services etc. which i find irrelevant as below that, in the first column is 4 buttons with the same options on them. To me there is no need in having options twice. The layout provides functions which are easily accessible, no need for going through a different menu just to find what you want.

Scotrail Mobile Website


The mobile version does not have that extra, unnecessary bar which is good, as i feel it is irrelevant in the first place, however it does mean that there is not an easily accessible 'Contact Us' button at the top. The text, I feel, is a little too big for a mobile. Like the desktop version, everything is easily accessible on the main page, which is a positive.

Created By
Kyle Beard

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.