Responsive Websites

Adobe Website

Web : Mobile

This site is very easy to navigate due to its simple and spacious layout, the fact that most images are links which connect you to other aspects of the site, this help the viewer go to see what he/she is interested in. There is also a tool bar located in the top right corner of the screen and this consists of a drop down menu with links to all aspects of the sit, there is also a search bar incase there is a specific thing the viewer want to see.

The site is also compatible with being viewed on a phone as shown in the above images as when opened up on the smaller screen the website changes from a three column to a one column grid structure. The text for this layout increases in size when displayed on the phone this will be due to it being harder to read if it stayed at the same size as when on the web. The images get reduced to take up the whole column when viewed on the mobile and on the web it is all dependent upon the size you have your browser at.

Apple Website

Web : Mobile

The apple Web page is very simple in its design, it has what its new products are as the focal point as they are the first things you see once you go onto the site. They have a good clear navigation bar found at the to of the page which when displayed on a phone can be viewed as a drop down menu shown by 2 horizontal bars. at the very bottom of the page there are also small section showing all that can be found on the site.

The grid structure goes from 4 columns to 1 when shrunk down to mobile size. Some of the images also get edited to change the display of it from landscape to portrait. The text increases slightly to allow it to be clearly visible and readable when on the smaller device

Cineworld website

Web : Mobile

This is a 4 column layout with lots of interactive images which are all connected to the relevant topics on the site. There is also a main slide of images which are the focal point of the site as these are the main new releases. There is a navigation bar at the top of the site which allows you to help define your search. of movies you might want to watch. There is then a drop down menu below the slide of the images which allows you more options to help navigate to a new screen.

On the mobile layout almost all the images of the movies which are all links to thats movies page on the site have been reduced to allow them to be on the screen, due to there being very little text there is not much to comment on.

M&S Website

Web : Mobile

The M&S website is a 3 column layout which uses interactive images, a tool bar is situated at the top of the screen this allows for quick easy navigation of the site. the images used show what is being sold by M&S and they use the best looking images to allow the site to look more attractive. On the mobile the website narrows down to a single column structure which allows it to be clear and easy to read as all things are well spaced out and reduced to allow you to scroll up and down without zooming.

MyCity Website

web : Mobile

The MyCity website is a 3 column site which has multiple interactive buttons to help navigate the site, there is also a tool bar along the top which allows you to navigate to parts of the site which you might not need to go onto that much.

Now with the mobile layout, its single column which allows for easy scrolling access, the interactive buttons have been enlarged with the text that follows them and have been arranged in a vertical line. The top navigation bar has been compressed into a hamburger style design.

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.