The Start of the Journey - HTML5 & CSS3

I have started the development of my website, after a short tutorial from George on tuesday morning all of my previous HTML & CSS knowledge starting coming back to me, everything has changed slightly since I lasted built my website at A-Level; it is not longer considered good practise to code 'in-tag' or use div id's and even coding at the top of the HTML document is a nono. Everything is styled in the CSS3 styling sheet, everything is created in the HTML5.index. After a short practise session getting grips with the basics again I really wanted to just get straight into it, so I did.

---

I spent the rest of the lesson working on the skeleton frame work and trying to make sense of all this foreign code that we have been given to work on after looking at it for an hour or two I started to see what controlled what and immediately this gave me a clearer idea of how to manipulate my webpage into what I wanted, not by what I could do. Below is a screenshot of my website thus far with about 30 minutes of work.

CSS3 Code:

This piece of code above is the code I used to get the filling background image. Basically it is telling the background at the URL of: to not repeat, to be in the center vertically and the center horizontally and be fixed in that position. The 'cover' code makes the background cover the view port size and when resizing animate with a 'zoom' a really nice a simple piece of code.

---

HTML5 Code:

In my HTML code it is currently very simple it has a <div> which is taking on the class of the .nav class in my CSS (more on that later) with two paragraphs within that <div>, one for my main title and one for my lesser subheading which both have different opacities and colours.

For my navigation I have a simple unordered <ul> list <li> with links to each of my other content pages and then the closing </div> tag, obviously this is barebones stages and I want to completely re-do the navigation but still a good start!

Design for the Web - Research - Part 3

For this research and analysis I'm going to be looking at the website http://landerapp.com/ I was redirected to it by the http://www.awwwards.com/ website once again, it is proving to be a reliable source in terms of top quality websites to gain inspiration from.

First lets take a look at the homepage, the first thing I noticed was its simply illustrated objects, all everyday things in a designers life, coffee, iPhone, sketches and screwed up bits of paper with stale ideas on them this immediately gives me a sense of their target audience. The next thing I notice is the complimentary blues and whites which are just incredibly satisfying (for me personally) to look at and are all a testament to how well it has been designed and thought about.

The navigation is simple, subtle but obvious. I know that is contradictory however often the navigation can be so harsh that you almost want to navigation away from it which is definitely not the idea.

The title and subheadings are also very professionally displayed. The thick white font which is called 'Proxima Nova' I discovered on inspecting the elements. The subheading is also clear and contrasts well against the blue background.

The secondary navigation buttons are really well made, the rounded corners make them want to be pressed which ultimately is the idea and will boost their sales. This style of 'flat UI' that I've covered before is becoming more and more common, the same style of button is shown in the top right with a nice sales 'sign up FREE' which makes people more likely to sign up if they know there is know entry of credit card details required which is often what deters people.

---

If you scroll down or click on one of the three circles on the right hand side of the website it completely changes the colour scheme and the illustrations:

This is the second 'version' of the website and as you can see everything has changed, apart from the navigation and sub-navigation. It simply is advertising another perk of their companies product in a unique way.

When looking at the responsiveness of this website it is good, but could be a lot better.

This is the mobile version of the website, it looks simple and easy to navigate if you were on a mobile phone. When you click the 'three lines' icon to expand information it starts to go downhill.

A slightly transparent cover appears with new options however they dont have a roll-over effect, or any feedback that you have pressed it which I would like to see. additionally the layout could be improved there is a lot of empty space and it is just simple text, I feel that they could add some smaller versions of the previous illustrations to fill the space and make it more visually pleasing like it is on the desktop.

Finally, flexibility. If you try to resize the website to mobile view when you are on the orange/green colour version of the website it immediately reverts back to blue, some code that remember what version you were on and keeps the experience consistent would of also been nice to see.

Overall I think the title/subheading and navigation are the strongest points of this website and I definitely will be taking inspiration from this for my own project in the future.

Design for the Web - Research 2

For my next analysis I'm looking at the website http://piotrswierkowski.com/portfolio/, I found this website through http://www.awwwards.com/ which is a website that gives out Website Design Awards for websites that are unique, well made and professional.

---

On first glance then navigation of the website is the thing I notice first and to be honest you can't miss it. The 'brick' like formation of the different projects that he has worked on works really well, it breaks down what could be a very confusing list into a easy to read tiled background.

Each tile has a roll-over effect of 'view project' this is feedback works really well that shrinks in and out. It gives you just enough response to make it satisfying. In terms of additional navigation on the left hand side of the website you can see the 'three lines' icon which translates to, hover for more. Once you hover over the side bar it grows wider with a nice animation three options appear that fade in an out [Portfolio] - About Me - Contact, these are simple and to the point.

Here is the image of the left hand side bar, its nice touch that doesn't take your attention away from his work which is the most important thing on a portfolio website such as this.

---

When looking at the responsiveness of the website it certainly doesn't disappoint. It's transitions from page to page alone fade in and out which give it that little extra edge of professionalism. 

If I resize the website down to mobile size in my browser you can quickly see the seamless transmission of elements into a more suitable layout for viewing on a smaller device.

On the mobile version of the website the projects go from a tiled formation down to a simple list, the side bar swaps to the top of the website with the same available options. This exchange from Desktop to Mobile is a really good example the theme remains and the hierarchy of information remains the same giving a consistent experience across all platforms which is not the case with a lot of responsive websites these days.

---

AF103 Design for the Web - Research

After a needed easter break it's time to get back into the routine. We've been set a new brief for our new project which is Design for the Web, we are required to transfer all of the information and content we used for our previous iBook project into web form, this involved rearranging the information we gathered and making it suitable for use on the web.

Before I go into that I'm going to look at existing websites that are out there and what makes them successful covering the design aspects, interactivity elements and general build and navigation quality, these factors all make the difference between a good and bad website.


First up - http://www.jr-associee.com/ a artist management and creative content agency.

Desktop

Here is the full size, desktop size version of this management website. The main content elements are full size and in a three column layout the right hand size expandable bar is present.

Laptop

Here is the slightly smaller, laptop size version of the website this is adjusted by simply making the website smaller and watching the responsiveness automatically adjust the dimensions and grid system of the website.

Tablet

In this screenshot you can see the the tablet version of this website, there isn't too much of a difference in terms of layout and column style however there are a few changes,  if you look at the welcome message it is on a three line paragraph in a bigger font making it easier to read on smaller devices this is a sign of responsive web design. The main thumbnail images have also become smaller.

Mobile

This when scaled down to an even smaller size is the mobile version of the website, it has reduced its column size of the main content to just one in a single file order, the welcome page has now gone and the interactive side bar that slid out has no been moved up to the top that reveals the welcome information, a nice touch to keep the website as simple as possible when viewing it on a 4" mobile screen.

This is the basic and fundamental process of a 'Responsive Website' it changes depending on the resolution of your view port and scales the websites elements in % rather than pixels to give it a consistent, not stretched and professional look across all platforms, this is a very simple and useful element of a website that is so often overlooked and is absent in even website such as www.bbc.co.uk.