A Small Adjustment

A quick update on a small change I've made.

I've added in the 'titles' for each colour section on each of the pages. These were initially designed to look like this.

And that's fine, I've stuck with that design and I like it. When I added the graphics to the HTML and had a look at the end result, though, I noticed an issue. There was a bit of a clash with the layout.

Considering the pages on my website are going to be reasonably long, it's important for the user to be able to easily find out where they are on it. Hence the titles for each chapter that split it up and make each chapter further distinguishable (despite the obvious changes in colour...). To add to the ease of getting to places on the site I've also added a fixed home button, which displays in the top left hand corner no matter how far you are down the page. These are both good additions to the navigation of the page but they display on the page together like this...

They clash. It's okay that the home button sits above it - that's what I want it to do - but them being one on top of the other makes one less readable, doing nothing for my goal of creating a good and easy experience for the user. So, I've switched the subtitles to the other side.

Much better.

How is this aspect responsive? 

When the width of the site goes beneath 769px, this style of subtitle will disappear and text subtitles will replace it.

Above 960px

769px to 960px

470px to 769px

470px and below

Todays Progress: Internal Links, Content Spaces and Making My Life Easier

Today has been another good day of developments on my site. Mainly I've been working on creating the colour content sections that appear below the main, central banner.

I had a few issues when creating this.

I keep forgetting to close the <div> tags.
No doubt, one of the most common issues I've had with simply building this site in general is my habit of making typing errors, constantly. For this, though, I've found Google Chrome's Developer Options very useful.

When trying to create an entirely new container (below my existing one) to start framing out each content section I was having problems with it actually appearing where it was supposed to, and myself and several classmates just could not work it out. All of my tags were correct, I'd used the correct CSS where applicable, my 'classes' seemed okay and the HTML (for the new container) was entirely correct too. This was frustrating and I honestly thought it was just a case of the browser/html file itself getting confused and "perhaps if I just leave it, it will work itself out!".

I opened up the Chrome Developer options to view the code from a different perspective and use their 'find' options to hover over my site.

Thinking I'd be greeted with two containers in the code - my existing container and the new ones I was trying to create, I instead saw this:

Just one container.

Turns out I'd forgot to end 5 <div> tags. Therefore I hadn't actually closed my previous container and was just adding things inside it and not realised.

As you can see in the code above, none of those <div> tags I had opened for each Box (e.g. 'box four') did I actually close. Smart. 

Closing all of the tags fixed my problem, resulting in a new separate container and completely solving my problem.

Solving this has allowed me to create the 4 content sections on my one long home page. I am yet to add the 'arrows' that divide each section, but have inserted the two columns I need in each (as defined in my plan) and inserted some text just to pad it out and get the gist of where all my content will be.

Once I'd done this, I started to add the internal links. The idea is that the user clicks on the links in the navigation bar at the top and is skipped to the appropriate area on the page. This was a lot simpler than I anticipated. All I did was give each section (chapter 1: yellow etc) an ID (which they had already) and each button in the navigation put that id for the href="ID". This does not include any animation (e.g.  a smooth scroll) so for now this is a quick fix that works. I'd like to look into implementing a more slick, smooth motion. 

Making My Life Easier

Even though it's just a small point, I just wanted to mention what I've been doing in my code to ensure that I don't get lost in it. I am in no way an expert when it comes to HTML/any web language, so this has helped to make sure everything is spelled out to me and I know where I am - comments. 

<!--- <insert comment here> -->

I've used comments everywhere in my code to create little headings and subheadings that divide it all up into specific sections. This way, if I need to change something in the navigation bar I do not need to read all of the code to try and find it, I just have to look for the comment. Something small, and certainly not a new discovery (and not even the most appropriate use of the feature), but it's helped me hugely.

(comments in green)

Media Queries and Design Adjustments

Tonight I started working on Media Queries.

Even though we are required to use the Skeleton Framework for our website, a large proportion on whether or not our site is responsive is dependant on 'media queries'. I've never, ever worked with them before, but I got a general gist of the idea of them in class through listening to other people.

I understood that in a way it is applying CSS to certain elements at certain points depending on the size of the page. In the basic index.html we were given to work off of a layout.css file was attached, with the following in:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

From what I understood from here I gathered that within each { } I would put the information for how I'd like an element to display at each point. To gain a further understanding I watched this video:

To explain my new-found understanding!

@media only screen and (min-width: 480px) and (max-width: 767px) {}

'only screen': 'screen' is a media type. Other media types include: print, handheld devices, TV's and projectors. My code defines that this media query is only for screens.

min-width/max-width: This is a media-feature. It does not have to be a 'max' height or width, it can simply be width or height, as well as elements such as colour. 

max - upperbound

min - lower bound

{} : This is where you write your CSS that defines what each element should display like (or if they display at all) at each breakpoint.

Breakpoint: Where a new style kicks in. 

Getting to grips with this inspired me to do something a bit more complex for my site. I started to consider how I could simply my design for when it hit the mobile version - the smallest width. Looking at my existing design, I noticed how cluttered it was. Quite a prominent aspect of the desktop version is the slideshow just under the navigation bar. It is not an element of my site that is 100% necessary - it's there partly for aesthetic benefits. Because of this I came to the conclusion that for the mobile version of the site it was disposable. Removing this slideshow allowed me to trim the length of the (already rather long) central banner. 

Left: Original Banner

Right: New Banner

Implementing this has made me make use of what's now a very useful selection of code:

display: none;

Tells the browser not to display an element (if the page is at a certain size)

display: inherit !important;

Tells the browser to 'inherit' this element and display it. I used this to essentially exchange out the original banner with the new banner.

Combining this with my navigation for the mobile device, my site now displays like this (on mobile). 

You can also see above that I've made the decision to change the colour of my home button to a grey that fits in with the colour scheme (the same grey was used in my iBook). 

I decided to change the colour from red to grey as my chosen red was the exact same red that is featured very heavily in the main, central banner. As you can see above, I have coded the media queries to position the home button halfway over the top of banner when in the mobile state, so having the button and the banner the same colour just did not look good.

New Buttons:

I've kept the same principle of having an over (left) and up (right) state to give a little boost to the users experience.

Building a Website: What do I already know?

As I'm going to be 'hand-coding' an entire website out of HTML/CSS/other various web languages - well, with help from the Skeleton Framework - I figured I'd write out everything that I already know about building websites. This gives me a good idea of where I'm already at and I can identify areas which are going to be 'easy' (I use that term loosely...) for me to build and areas where I'm going to have to delve into some research.

These are also things that I've picked up in our classes at University.

3 basic categories to web pages:
- Structure (HTML etc)
- Style (CSS, CSS3 etc. CSS effects what your content "looks like")
- Interactivity(CSS, jQuery)

Elements
<p) opening tag
</p> closing tag

Anything that has a 'tag' is an element, of which there are only two types.

Type 1: Block Level Element
Aside from 'anchor', 'image' and 'span', every element is a block level element, that is transparent and invisible on it's own.

• 100% width
• Full width of the page or the full width of what it's inside
• Always 100% wide, even if you define the pixels to be shown (e.g. 300px). This means it always owns the entire width of the page and the height that is explicitly defined by the content. As a result, Block Level elements stack and cannot generally be placed side by side.
• 0 height
• Cannot be seen, is invisible
• It's height is defined by its content

You can add margins, padding, borders etc*

Type 2: Inline Elements

Inline images sit next to each other until you run out of space, and then will move to the next line. You cannot give inline elements padding, margin or a border.

*Margins, Padding & Borders

Padding: If you put text inside a box and you don't want it to hit the edges, you put padding to stop it doing so.

Border: The space around the padding

Margin: Empty space to give breathing room.

When adding padding etc you are increasing the defined width of the element. If you have coded the element to be 200px but then add padding etc, the element side increases. A tool such as BorderBox can help with this - includes the padding and the border in the overall size, leaves the Margin as additional.  

A HTML Page
Everything in a HTML page is wrapped in opening and closing <html> </html> tags. Within that there is;
<head>
</head>
<body>
</body>

Everything in a HTML page is wrapped in opening and closing <html> </html> tags.

Within that there is;

<head>

<link-to-css> (this then links the browser to the appropriate CSS stylesheets)

</head> (the browser leaves the 'head' with all the information required to read the rest of the document)

<body>

<insert-content-here>

</body>

Elements naturally want to get to point 0, 0 - the top left hand corner, as long as nothing is in the way. But as they stack, they will appear one by one in the order that they read in the code. This can come in handy as if you want your elements to appear in a certain order, you just code them in that order.

Proposed Design: Mobile

Above is my proposed layout for my website in it's mobile state. It is rather long and allows larger areas for text to be read as well as full width of the screen images and small images being placed alongside each other. I've left room for their to be links at the very bottom of the page, just like in my desktop version. 

The plan with this is to use the Skeleton Framework to allow me to arrange my content accordingly. With Skeleton, as the width of the page is decreased items will start to stack. The box on the left of a row will always appear above the one to its right, so this will have an impact on whether the text of the chapter or the image on the chapter will appear first as the user scrolls down the page.

Analysis: Web Visual Styles

I have found a few websites via the site designfridge.co.uk that I like the visual style of and that are somewhat similar to the graphics I have already created from my iBook.

Jelejah

This website is an educational website about Physics, so it has a similar aim to the website that I am going to be creating. 

The home page has 3 separate sections, featuring what seems to be quite a popular technique, 3 'slides' that you can scroll to. On the right hand side of the page there are 3 dots - buttons - that show you where you are in the page. I can see this being rather convenient if you are on a page that is quite long.

There is very little instruction in this initial home page. It takes a little guess work, but the three illustrations featured on the 2nd page are links to internal pages which is where the educational information is. 

I really love the way this design has been completely simplified and is not complex at all. It does rely on the intuition of the user, and I am unsure whether it would as successful if it were to be used with someone less web-savvy. 

The large logo (above) as the main entry screen is interesting and successful, but I'm not sure I would apply this to my own website design. I like the idea of having an introduction media, but perhaps not something as plain and not-interactive as a flat logo. On the main introduction screen there is also very minimal colour - just three - with the stand out colour (yellow) being used minimally and to good effect to highlight an icon that is relevant to the theme of the website itself. 

Once you start to delve deeper into the sight, neither the layout nor the visual style changes. It still works off of a vertical slideshow style frame, but each 'page' you get to has different content on about each of the planets, also featuring an animation.

Again, I love the simplicity of this and the way information is presented so clearly. A designated place where an image/interaction goes and a designated place where information can be displayed. After the first 1/2 the user then learns the language of the page and expects that layout at each chapter. I like the idea of repeating a layout so it becomes native to the user and the website is easy to continuously use. 

Above this is a, as I spoke about before, 'top layer' navigation bar that stays there no matter where you are on the page. 

You are able to click on the names of the planet and you will be skipped to that point in the page. What I noticed, too, was that the order of the colours where the navigation bar is (dark blue, red, light blue continuous background) is in the same order as on the homepage. This helps keep continuity throughout the website and again increases the users ability to understand every page. 

BarCamp 2013

Another site that takes inspiration from the continuous/the-entire-website-on-one-page trend. 

I love how there's a slight twist to it though. Instead of having each 'page' (section on the entire page) one colour to signify each section, it's been broken up to smaller chunks. So there's a strip across the page in a different colour with a bit of information, then there's another that's a bit longer, then perhaps another smaller one. 

You can see above how this section did not take up the entire page, and leaves the next section peeking through and the previous one can still be seen above it. It seems to provoke scrolling, and when I was browsing the website the fact that I could see more information coming and that I was already engaged with the fantastic illustrations and animations meant that I didn't mind scrolling further and going 'deeper' into the site/page. 

Each 'page' has its own individual colour scheme that is still in keeping with the design as a whole, and their all brilliant. The graphics seem to take inspiration from flat UI and there is heavy use of the same colour again and again but just in different shades. This all works brilliantly, and alongside consistent use of the same font styles (Same style for headings on each 'page' etc), everything ties in brilliantly. 

Examples of the colours in each section.

Analysis: Grid System (Made by PFD)

'Made by PFD' is the website of a design agency. Again I have visited the awwwards.com website, this time under the actual Design business category, as you would assume that the sites would be well designed and the majority responsive.

The website is very much (probably not the official term), 'grid based'. This seems like it makes the website more successful as the grids will continue to flow evenly and shift to the next row if need be. I was reading an article on coffeecup.com about the benefits of using Grids in Responsive design which helped me further my understanding of them.

Main points from the article:

• A fluid grid is dependant on the horizontal width of the page it is being displayed on. It will still fill the page with the desired number of rows/columns but their evenly distributed sizes are reliant on the width of the page. It is 'squishable'. 
• Just because a grid is fluid does not mean it is responsive by nature. If you keep reducing the width of the page the grid will keep on squishing. 
• The sizes of fluid grids are not set in stone, and a responsive fluid grid will stack elements before they become unusable (e.g. they get too squished). If the width of a column hits a certain point it will be moved and arranged until it is positioned so that it can be read properly. 

The following image is copied from the article:

Above you can see that instead of squishing the columns onto the one row and continuing to squish them even if they become unreadable as the width of the page decreases, a column has been shifted below.

The Made by PDF website demonstrates this well. You can see the website in the desired form below:

As you reduce the width of the page the descriptive text rolls onto additional lines and the images - the element that is most obviously in a grid layout - start to reduce in size. In order to keep the 2 images on the same row together they start to shrink to compensate.

As you continue to reduce the width of the website, though, there comes a point where it's decided that the images have been made too small for them to be enjoyed and understood properly. So, they are re-stacked to bring them back up to the correct size.