Responsive design is the standard in web design now that the audience has become increasingly mobile. Throughout my web design program I’ve been taught to always use a “mobile first” approach when planning out a design project. In Ethan Marcotte’s article, Responsive Web Design, he wrote in 2010 what today is a common practice.

A common way of thinking has been to design for the web the same way as one would design for a newspaper article, with columns. Marcotte discussed in his article that we are no longer constrained to a static size, but must adapt to the “ebb and flow” of the viewing device. To further his point, he created a website, Robot or Not, that showcases how a responsive design is done right at any breakpoint.

Desktop view of website –

Marcotte makes great use of media queries and flex boxes to showcase certain parts of the website by making them larger depending on the device used.

In his mobile view, Marcotte moved his logo to the middle top of the screen and scaled it down. The navigation menu becomes a two column layout. I like this view instead of the usual hamburger menu because you know what is included in the site without any extra taps. I think what I like best about the mobile view is the photo galleries at the bottom of the mobile view. The gallery header moves to a bigger font and the images are stacked on top of each other in a much larger view than the desktop view. It really makes the images stick out to me.

In the small tablet portrait view 600 x 800, Marcotte continued to use the same size logo as the mobile view in the top center of the screen. The nav bar is no longer stacked but stretched out across the screen for ease of use. If you scroll down to the bottom of the screen, the image gallery now is a two column set up with two images stacked on top of the other. The header for the gallery still maintains the large font size as the mobile view.

Once we move into the smaller responsive screen sizes, we do lose some of the fun quirks of the larger sizes. Background box shadows would appear in each image of the gallery when hovered and the gallery images where slightly skewed to give it a fun appearance.

Overall I think that web designers just starting out, like myself, can learn so much by just studying the code that Ethan Marcotte used in his Robot or Not website. I can only image how many other great responsive websites are out on the web since his site was first created. Being able to view sources and inspect elements provides web design beginners with expansive resources to understanding the creativity behind the screen.