Above I have screenshot a website called 'Webdesigner Depot'. I love looking at this website in general time to time and being a web designing website I knew it just had to be responsive which it is. I find this website so beautifully laid out with the Navigation pushed right to the top of the page, big title with huge extensive graphics behind. As you can see from this screen shot that there are 3 individual columns at desktop view with the navigation stretching right across the page.
By dragging the window inwards it shrunk to 2 columns. I am not sure is this is tablet view form or not due to the next example I use. However it breaks down the page at appropriate view points with the original middle column from the 3 column layout being placed underneath to the left. It is hard to tell from my screenshots but the navigation has shrunk down. You can tell if you look closely has the social networking thumbnails are actually closer to the search bar. I think its great how the title can be in proportion even though I have shrunk the window. It scaled down perfectly as I was pulling the window inwards.
Above is tablet view. First thing i noticed is that the title still remained the same size even though the background has been cropped out slightly. I think this effect is great as the title is the most important thing as this is the name of the website. The graphics are also important even though being cropped out slightly. This still works though because most of it still there its only the outside parts that disappear. The column layout is reduced to 1 here. This break point is vital as I think 2 columns would be too much. In a sense, this may be better because the first column is larger making it more easily readable. One other i noticed is that the social networking thumbnail links have disappeared. This is because it is far from the most important part of this page.
And finally we have smartphone viewport. For me this website works at an incredibly effect level at all viewports considering the break points. The navigation is the most noticable part of smartphone view for this. In the top left part of the navigation is a small drop down icon that lists everything that is missing. They just drop down in a few bars. The graphics and stylised title have gone. This is appropriate as the viewport is so small that the content is most important here. I like the way the title is placed into the navigation. Not only this but the title has changed colour. If kept the same this would be very un-readable. White in my opinion is a very effective colour. Obviously you need a a lighter font colour against a dark background and this case navigation bar but white is vibrant and just suits this page. Finally the column count is still at 1 but more can actually fit into this one. If you look above this screenshot you can only see the first article about 'Grey Hat Techniques'. On this one we can see the women too. Also the search option is still visible in the navigation bar making it easy search here.
Looking at responsive web design has given me a clearer insight to break points and priority over content to graphics etc.




No comments:
Post a Comment