Responsive Web Examples Critical analysis of responsive web*

Adobe Muse Tutorial Page - Full Width Desktop
Adobe Muse Tutorial Page - Tablet post Break Point
Adobe Muse Tutorial Page - Phone post Break Point

Evaluation

The responsive elements of the Adobe Muse tutorial page work as you would expect. Menus change location and track from right to left well. The text resizes when appropriate after break points, the addition of the mobile 'Hamburger' menu comes in post tablet break point to notify us that we are now using a responsive template that is designed for tablet use. Whilst the grid structure shown here isn't entirely apparent - the video playlist shown on the right in the desktop screenshot disappears when downsizing, proving there was an additional grid column integrated for this. One gripe I would state is that when transitioning from desktop to tablet there is a small moment where the sub menu leaps above the logo and then moves back underneath with further downscaling, I personally would have it migrate under there in the first instance.

Steam Desktop
Steam Tablet
Steam Mobile

Evaluation

The responsive elements on the steam site are subtle and not a lot is apparent besides the downscaling of the key slideshow elements and the removal of the left hand menu elements on the desktop layout. The tablet version ditches the left menu but doesn't integrate the 'Hamburger' menu until the mobile version is loaded, the space provided is still ample to navigate and use elements such as the 'search bar' with ease. The mobile version has some faults however; the slideshow element doesn't load when scaled from tablet to mobile - at least not on a Mac. Another flaw would be that the images within the slideshow elements do not scale further once mobile layout has been activated, meaning that some of the imagery is cut off and the user has to rely on the navigation arrows to swipe through the content provided. Even then, the content imagery is still partially obscured.

davidairey.com Desktop
davidairey.com Tablet
davidairey.com Mobile

Evaluation

When snapping from the desktop to the tablet version of this website, the side panel with Davids bio and selection of popular blog articles disappears - the grid structure changes from two columns to one. With further reduction the blog elements downsize and scale fluidly. The tablet responsive layout is short - perhaps they identified which device most of their readers use to view the site? The mobile version scales well and at the point of activation the menu bar shortens to simply the word 'Menu' instead of the ubiquitous 'Hamburger' icon. Text scales well dependent on media size which you would expect.

Motionographer Desktop
Motionographer Tablet
Motionographer Mobile

Evaluation

The desktop version of motiongrapher.com utilises a four column grid structure with two of those columns catering for the featured 'Quickies' videos on the right hand side. What sets this site apart from the others so far is that there is no 'break point' or 'snap' into the tablet version; the elements simply downsize and the fourth column slides away too. The menu bar, although smaller, remains unchanged in the number of elements that feature. There is a noticeable 'snap' however into the mobile version of the site and the grid structure changes to one wide layout. The menu bar disappears, as do the social media elements and the menu button now fits the entire width of the layout and responds accordingly. On a design note the use of the centre aligned word 'Menu' is also typically unusual and another example of a step away from the 'Hamburger' icon. One gripe for this site would be the length of the featured 'Quickie' section does not adapt, as such users would be scrolling through a long list of videos they might not want to watch on the mobile version of the site. There is also no back to top button present, at least not when viewed on a Mac.

Shenmue 3 Desktop
Shenmue 3 Tablet
Shenmue 3 Mobile

Evaluation

The tablet layout of the site integrates the 'Hamburger' menu whilst keeping the same video content that is featured on the desktop version. The grid structure seems to be focussed on the full-width greeting video with an additional column for featured blogs and content at the right hand side. This element remains when transitioning into the tablet version. The mobile version loses the video element and replaces it with a static image. One gripe I would say is that when transitioning from the desktop to tablet layout - the icons at the bottom do not scroll entirely over to the centre and hang slightly over to the right.

Created By
Scott Cameron
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.