Responsive Websites

EVALUATION

Text/font

  • Font size will reduce by scaling down from tablet screen size to mobile screen size, I think the font size is keen to small but still reasonable for user who are in design industry to read with, (Personally, I think they all should have good eyes, even I am short sighted but I still can read it without problem.)

Image

  • Cover image will reduce sizes while changing the screen size but not significant.
  • Content photos will be greatly reduce the size to fit the screen size for web to tablet without changing rows and columns, Then the photo size will change to bigger size to fit the screen when screen size is down to mobile and reduce size further, depends on the screen size of device and in single column.

For this Adobe page I can spot around 14 responsive objects/columns are changing while resizing it, I can see this website is trying to base on 2 change of structures, from 3 columns down to single column, the top menu bar is remain the same in a single columns, but the text disappear just before it is meeting the breaking point for tablet screen size.

Drop Down Menu - Open from the hamburger icon, it is base on 3 change of structures by scaling down from Website to tablet and mobile. (Text/ icon size remain the same, nothing disappear, only change on layout order) I think this is a very cleaver design, less confuse while scaling down the screen size or access on different devices.

  • New Navigation bar at the top.
  • At the "Creative Cloud" and Adobe Suite icons content box, from single row change to 2 rows, then 3 while scaling down the size, "Creative Cloud icon/button stay at the top of the content box, also act as for main object for the group in hierarchy.
  • 2 Content boxes at the next row, left for "Document Cloud" and the right is for "Stock and "Elements", the right box will goes to next row when change to tablet screen size, remain to mobile screen size, "Document Cloud" icon/button stay at top from the content box.
  • "Marketing Cloud" content box have 3 changes for each screen size, order by 7 to 4 then 3 in a row and "Marketing Cloud" icon/button stay at top from the content box.
  • Next row will change to single column when down size to tablet screen size and remain the same for mobile screen size.
  • Last row have no change.

There is a black rectangle box background appear automatically while it meets the breaking point from website screen size down for both tablet and mobile screen size cover behind the heading, logo and sub menu/navigation bar.

Sub menu content text is layout in a single row, by scaling down the screen size, the content text drop to the next row by order one by one when is out of space.

YOUTUBE

EVALUATION

Grid base on maximum 6 down to minimum to 2.

Side menu (which can activate by the hamburger icon) will stay at the left in the page for web screen size, content grids from maximum 6 in a row down size to 4 by order. Breaking point start when scaling down beyond 4 content grids, it will change to tablet layout with 5 content grids and without showing side menu.

Image size stay as one size structure for all screen size.

NIKE

EVALUATION

The Nike website is only using one grid structure. Not sure if it is on purpose.

Images size slightly reduce while scaling the screen size down until the navigation bar at the very top meet with the login content box.

Font size slightly reduce while scaling the screen size down for a certain point from web screen size, then remain the same for the further scaling down size.

This web site is mobile friendly but I do not see it is specifically design for mobile responsive screen size.

Sub menu/ drop down menu have subtle change while scaling down, it removed the vertical lining and less spacing between columns.

Tumblr

EVALUATION

Grid structure is to fit to the width of the screen size and content box will reduce by order from scaling down the size of the screen to minimum 2 content boxes to show on mobile screen size.

Image and font size remain the size through resizing. (Image will greatly reduce size when navigate to the single image page.)

Sub/ dropdown menu stay on top of the page content when active and drop down to second row when scale down to mobile screen size.

Follow and Join tumblr. buttons disappear when scale down to mobile screen size.

No significant changes from this website but due to the propose of this website is to mainly navigate images/ gifs/ videos with simple caption text through the website. I think this simple layout works well with the web site propose.

CITY OF GLASGOW COLLEGE

EVALUATION

Grid - It is using 3 grids for web site screen size, when down to tablet screen size it will mirage to 1 grid.

Image size - Images would not enlarge to maximum for fitting the browser width, they are all set to a standard size, but will reduce size while scaling down. While meet the breaking point for tablet screen size, they will mirage to one grid and enlarge to fit the tablet screen size width, then continue reduce size again if scaling down the tablet screen size or to mobile screen size.

Font size - Title font will reduce size while scaling down, body font size remain the same. I think this is a good design and the hierarchy is still very clear from what I feel.

I notice the first image with body text under the sub title and 2 of the content boxes at bottom went missing when the grids mirage to 1.

"WORKING WITH YOUR BUSINESS" - There is not enough space, so body text will change to "..." at the end and the linked page from this will not have the same information for user continue reading the same piece of text.

Created By
EVAN H.I. S
Appreciate

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.