This site is not familiar to the graphic style that I shall be going with for my website (as I will be matching up my graphic style with my previous project), but it presents a good insight into the fundamentals of a successful responsive website which I'd like to analyse and understand further.
This analysis will break down the individual elements on the page and describe what happens to each of them as the platform for the site is being viewed on changes.
Platforms being viewed on: iPhone 5, iPad Mini (both landscape and portrait), 13" Macbook Pro.
Grain & Mortar are a company in Omaha that designs websites and branding for businesses, as well as making apps and motion graphics.
Desktop
iPad Mini (Landscape - Portrait)
As you can see above, the initial appearance of the website changes slightly when you view it on different devices. Cropping of the feature image (slideshow of 3) occurs as well as proportionate sizing of links (e.g. 'Watch the video) to ensure readability and usability and adjustments to the navigation bar.
Navigation Bar
When viewed in a desktop internet browser, the navigation bar appears as above. When your mouse hovers over a button, it changes to an orange background (sticking with the white text) which matches the orange in the logo (also featured in the far left of the navigation bar. There is no change between the 'hover' state of the buttons and the 'active' (clicked down on, is selected etc) state, they are both orange.
There are 7 clickable buttons in the navigation bar, one of those being the logo which, alongside the actual 'home' button acts as a 'home' button too. To signify to the user that the mouse is hovering over the logo, it dims the bright white text slightly to a grey.
Also, the sizing of the text within the buttons is equal to the sizing of the text within the logo, and they line up evenly.
When viewed on an iPad in Landscape orientation, the navigation appears as below:
There are no completely obvious, dramatic changes. No navigation buttons have been removed, but they have been slightly repositioned to make up for the smaller display size (they appear to have text that is ever so slightly smaller?)
When viewed on an iPad in Portrait orientation, the navigation appears as below:
Here there are some significant changes. First of all, an additional navigation option appears in the form of 2 arrows. Clicking the forward arrow will take you forward a page and clicking the backward arrow shall take you back - as if you are viewing a slideshow of each of the websites pages. The logo still acts as a 'home' button too. If you want to access a specific page quickly or want to view the different options for pages, you click the menu icon in the far right. Upon clicking that, the following appears:
The entire page slides to the left to allow the entry of a menu sidebar, and all of this is down with one fluid motion. This sidebar is coloured orange - the same as in the logo and as mentioned above - and covers the entire height of the screen. It is not scrollable itself as there are not enough options for a scroll to be required, but as I will go into further detail later on, the page itself is still scrollable underneath. Upon clicking an option in this sidebar, it collapses back to it's original state, the page shifts back to the right and the page you have selected will load. To close this sidebar without clicking a link to another page, you simply click (or as it's a touchscreen device, tap) on the menu icon again.
The icons used here have got me thinking about icons in the general and whether their design has an impact on a users experience with the website - I think I will look into this further at another time.
There is a similar experience when you view the website on an iPhone, as you can see below.
The initial navigation buttons you are presented with has been condensed further, with the removal of the backward arrow. Left is the menu button, the forward arrow, and the option of using the logo as the home button. When you click the menu button you are presented with the familiar navigation used in the portrait iPad version - a sidebar.
As the iPhone (and most mobile phones) screen is a lot smaller than the iPad, the sidebar appears proportionally a lot bigger and takes up most of the screen. If it were any smaller, the text would have to be smaller, and then the text risks being unreadable. Just like before, you click the menu button to collapse the sidebar and view the website normally, and you can use the forward arrow in the navigation bar to quickly flick through the pages (in the order they appear in the sidebar) quickly.
This website features, in the best way I can describe it, 'layers'.
No matter what platform you're viewing it on, the navigation bar is always the 'top layer'. As you scroll down the site (demonstrated below on an iPad) the navigation bar is always present and always stays at the top of the page, allowing the content to scroll up, underneath and past it. You can even see it scroll up and past due to the navigation bar having a slight transparency to it.
Content
Below the main, large image (a slideshow of 3 different images) there is a box containing a sentence that quickly summarises the company. This box contains actual text, rather than an image, which means that its alignment and amount of text on one line is dependant on the width of the device you're viewing the site on.
If you view the site standardly on your computer (in this case, a 13" Macbook Pro) it appears like this:
All of the main text (in the larger, capitalised font) fits onto one line, with smaller text in lowercase underneath. Then, if you view the site on a slightly smaller screen of an iPad, in landscape, it appears as the following:
Basically exactly the same. The orange 'learn more' button appears slightly larger. If you then view the site on an iPad but in portrait mode, the following happens:
The text runs onto two lines as the width of the page is not big enough to fit the text at it's designated size. If the text was any bigger, it may detract from its readability. As the text falls onto the 2nd line, the surrounding blue box has naturally extended. Also, the ratio between the size of the 'main' strap line and the additional information below seems to allow for that additional info to appear bigger and more readable.
If you then view this piece of content on an even smaller device, such as an iPhone, the following appears:
The content has been pushed further onto three lines with less words on each line. Again, this causes the blue background box to have to be bigger and as a result viewing this piece of content purely will take up nearly the entire screen, resulting in the users main form of viewing the site involving in a lot of scrolling to view all of the information.
There's also a 'grid' of information beneath this that also reacts to the width of the page. If you view the site at its standard size, it appears as the following;
If you then view this on an iPad at a landscape orientation, it moves from a 4 per row grid to a 3 per row grid. A smaller width, such as an iPad at portrait, moves it to a 2 per row grid. Then, at it's smallest, such as on an iPhone, it turns into 1 per row, again resulting in the obvious need to continuously scroll further and further to see all content.
Summary:
- Sometimes there is need to remove the least important information for the iPhone version, as you do not want to clutter a small iPhone screen with info that's not immediately relevant.
- Navigation can be done through a menu bar or in some cases a 'next' or 'move forward' button is successful. This can turn your site into something similar to a slideshow presentation, but works for people just wanting to quickly browse.
- I like the idea of having a hidden navigation sidebar that moves in only when it needs to be used.
- 'Layering' your content to allow access to navigation wherever you are on the page, even if you're right at the bottom.
No comments:
Post a Comment