Wednesday 3 April 2013

Responsive Website - The Boston Globe

I wanted to look at simple, narrow, blocky websites and how they handled responsive layouts. From the beginning I knew that I wanted to try to create a simplistic, modern (yet classic) feeling website. To inspire myself and also to see limitations and mechanical properties I thought that trying to find websites similar to what I can envision creating would be a good idea. With that said the first website I found was The Boston Globe.


This is the site at desktop size. As you can see it is a 3 column design with space around the left and right sides. This is something I like I toyed with the idea of having a 100% width design however, I think this is more classic and pleasing to the eye. I love the fact that there is a clear edge to the content. The images and navigation really create a solid idea of a frame that I really like. I also really love the colour scheme. It is so simple, classic, sharp, sophisticated and strongly linked to the idea of  newspaper.


This is the same site at portrait tablet size. The layout stays three columns but now it more or less 100% the width of the screen. This is quite nice looking however, I might try to have fewer columns, thus freeing up more space either side of the content.


This is the same website at portrait iPhone size. It jumps down to a single column and is now again more or less 100% width. Also the navigation bar retracts to a drop down menu rather than a series of words. I think this looks really nice and simple and I think 100% width at this size really works. I also like the simplicity of the nav bar after the jump and I at first was hesitant to say I wanted to create a drop down nav structure at this size however, if I design a custom button that I am happy with then I think that it might be a sensible idea.

All in all this site is very clean, spacious and aesthetically strong at all major break points. I think that this is something that will heavily influence my design and content structure.

No comments:

Post a Comment

Blog Archive