Art 326 — Blog 6 (Responsive Design Analysis)

For this assignment, I have been instructed to find two websites that use responsive design. One of these uses it well, and the other not so much. I decided I would focus on websites that I use almost daily at this point in my life. The Verge is a news website that focuses on technology, governance, and everything in between. The second website is Pearson MyLab, an educational resource that colleges use to complement their curriculum. Below are screenshots of these websites on a Surface Duo, iPad Pro, and desktop. I included this information in the screenshots, but obviously, I wanted to state the fact that I viewed both of these sites using the same device dimensions to maintain a consistent critique.

Let us start with the good…

The Verge

As to the responsiveness of the site, it’s pretty obvious. Looking left to right you see that the margin slims down significantly based on the device. Their logo is featured prominently on the top in all instances with a visual hierarchy that descends naturally as your eyes move down the page. I appreciate that their design choice to surround all of their stories with hair-line borders creates a learning experience for me on a meta-level. Basically, I can see how they built out the body of the site with these “diet wireframe” article sections. I don’t generally like dark websites, but The Verge has always managed to make it look well executed with a type that contrasts and makes it pop.

The one con to their site is the fact that their ad placement breaks up the rhythm. The size is wonky in all three pictures and I would almost rather have it up above their site name just so I can get it out of the way.

Pearson MyLab

Michael speaks the truth!

In terms of the overall aesthetic, I think that Pearson looks nice! I appreciate the colors and layout. There is also a decent path in which your eyes travel down the content. That’s about it though.

The issues I have are between the desktop and tablet versions along with the tablet and mobile versions. What I found interesting is my complaints don’t encompass the entire site, which in my opinion speaks to the inadequacy of its responsive qualities.

Desktop — What is up with that footer? Maybe it’s my beginner-level experience in this world, but shouldn’t it be a little further away from the bottom of the page (insert shrug emoji here).

Tablet & Desktop — I noticed the large negative space underneath the video on the right side of both pages don’t need to be there. It makes the entire center section just look clunky.

Tablet & Mobile — The “Find out how…” button doesn’t properly resize when it’s viewed on the mobile version. It’s extremely sloppy and completely removes you from focusing on what the service offers to why it’s malfunctioning.