Responsive Websites

After looking into some inspiring website design i then decided to take a look at a variety of different websites which are responsive, in order to see how certain websites present themselves and the content when in a smaller or condensed window screen.

Desktop:

Mobile:

Link to site: http://danielvane.com 

The website shown above is a responsive site which changes itself according to the window size of the browser. As you can see on the first screenshot it displays the full desktop widescreen size of the website. Whilst the second screenshot displays a more condensed version which is the 'iPhone' sized version. 

The way the website structures the site is by using the name of the site/logo at the top of the page and has the navigation right underneath the logo where people can click on and navigate through. The website places the gallery in single images one after the other underneath each one when scrolling down on the site on the iPhone sized version. 

The layout on the iPhone version is very straight forward and simple and works pretty well with a website like this. i.e. images. The site is easy to navigate and allows the user to scroll through all the images on the site.

The visual style of the site is a little plain and simplistic and doesn't really have much appeal or interest, which is a shame as the responsive elements work quite well. The site is very minimal in terms of the content which is a good thing for the handheld versions as it doesn't make the website too overpowering through text or content.


Desktop:

Mobile:

Link to site: http://wearyoubelong.com

With this responsive website above there are many aspects which are well laid out in the small size window (iPhone size). However there is one aspect which i really disliked about this website. The main bad aspect of this site is the text on the top of the screen (1st screenshot). In this screenshot at the top of the page contains the logo on the left and the navigation to the side of it across the screen which links to other pages of the site which aren't responsive. However the heading of the main page is too text heavy and eye aching, because of the type of san serif it is.

Despite this, the idea of having that amount of text in general for a heading is very unattractive and makes the site on this size look very unappealing and messy as well as making it hard for the user to read it.

Another problem with this site is that the navigation links to the same site but hasn't been made responsive, so only the main homepage is, which isn't a good way to create a site, it all needs to be responsive and because of this issue it makes the overall site look and feel messy and disorganised.

The good aspects of the site are the design and the layout of the site, the colour scheme works really well and everything has been displayed really well especially for the iPhone version and this helps to make it easier for the user when using the site on a screen like this.

Desktop:

Link to site: http://www.digitalatelier.ro/#/work

Above is a screenshot from a website i found which was also interactive and caught my eye. As you can see above this page is the main homepage and doesn't really have any or as much content which is a good way to make people not put off when they first come on a website if there's too much going on or too much text or screen.

Instead they use icons / pictures in the circles which are clickable and will take you to their work, and if you hover over one of these images it will be in colour, which is a good indication to the user what they are hovering over on the site and its makes it stand out from the rest of the group of images so its very eye catching and a focal point.

With the navigation it is placed right at the top of the page with only three choices to click on which makes this website seem a lot more minimal in terms of navigation and amount of pages, however some navigation is hidden in the images so there is a variety of different navigation on the site in different formats, and is something i want to achieve, in order to make my site more interactive and not one sided.

Here above are some of the pages on the website and what they look like. Overall the layout is quite straight forward and visually attractive and the colours help to compliment the overall style. The use of the bright colours from the icons on the picture to the left helps to make them eye catching and to draw the user towards them. The background is very subtle and blends in nicely with the blue background.

Above is an example of one of the pages that can be clicked on from the icons on the main home page, and the page displays the work below where the user can scroll down to view the work through the imagery. There are in cons at the side of the site and allow the user to scroll from one project to the other without an annoying process of going back to the main page and clicking a new one, so this makes the website a lot more efficient and easier to work through.

Mobile:

Because this website is responsive that means that the website can be viewed on a tablet or mobile device and above is an example of how the site is laid out on a mobile device. The navigation is at the top and using icons instead, which is an interesting incorporation and makes the site on the mobile slightly more fun and enjoyable. With the icons on the main page the have one per row in order to make it easier for the user to view the image and click on it.

On the right is one of the pages i showed above with one of the pieces of work and it pretty much looks the same but is condensed at the sides for it to fit on the mobile device.

I'll be looking at more sites the are responsive and see how they incorporate the website to make it fit within a smaller screen. But also looking at some visual inspirations as well.