What is SEO?

Graphic Design, SEO, Web Design

SEO stands for Search Engine Optimisation. SEO is a number of techniques that are used to improve the visibility of a website when using a search engine (such as Google, Bing, Yahoo, etc.). SEO is all about creating a seamless user experience and communicating to search engines the intentions of your webpage so they can recommend your website for relevant searches. It is the application of improving the ranking of a webpage so it will be the first page that comes up in the search results.

So one might ask why it’s important to have a high ranking for your webpage? It increases the traffic to your webpage. A study was undertaken by Slingshot SEO in 2011 which compared the position of a website in the search engine results page (SERP) to the respective click-through rate. Below is a table with the results they found:

Study Results SERP vs. Click Rate http://webdesign.tutsplus.com

Study Results SERP vs. Click Rate http://webdesign.tutsplus.com

It is easy to see that if your webpage is at the top of the list it will have a higher click rate through to it. It’s also a little bit of common sense. Think back to all the times you go to Google or Bing or any other search engine you like to use (maybe even AskJeeves), do you always click on the first option? The majority of the time I do.

The next question one might ask: what do I need to have on my page to make it a good one?

I found this cool Periodic Table Of SEO Success Factors and thought it would be a good place to start. I won’t go into all of these but you can follow the link to find out more information if you would like to know more about that:

The Periodic Table Of SEO Success Factors from Search Engine Land

The Periodic Table Of SEO Success Factors from Search Engine Land

Some of the things you can to do to optimise your webpage for SEO:

  • Make content indexable
  • Make sure content is good quality
  • Use the necessary keywords and phrases
  • Create a relevant title for your pages
  • Create an easy to read description for the URL of your website
  • Incorporate Meta descriptions on each page of your website
  • Be concise, descriptive and brief

Hope you found that to be enjoyable reading!

– KH

Web: Responsive Layouts (and some of the other ones)

Graphic Design, Layout, Web Design

And the topic for this week is…..layouts for web design and their pros and cons.

Fixed* websites have a set width and using a different screen size won’t change the layout

Pros 

  • Exact known width to work with makes it easy to customise
  • Don’t need to use min-width or max-width
  • The website design won’t change no matter what size screen you are viewing it on

Cons

  • Doesn’t work on anything 1px smaller than the exact width
  • They don’t look good on large screens, creates white space on larger resolutions
  • Can need a horizontal scrolling bar
  • The website design won’t change no matter what size screen you are viewing it on (Won’t look good on tablets or smart phones)

*Fixed is not a good option for smart phones and tablets.

1. Fixed Layout

Fluid (Liquid) websites are built using relative values (such as percentages) to allow a scaling process to occur

Pros

  • Grows and shrinks with the page
  • It’s user friendly as it will adjust to whatever screen size the user is using
  • Can eliminate horizontal scrolling bars which will improve the visual aesthetics
  • Columns are relative to one another and can scale up and down fluidly

Cons

  • Can look ridiculous on super large or super small screen
  • Less control as to what the viewer sees on different screen sizes
  • May have to set multiple widths for images, videos, etc.

2. Fluid_Liquid Layout

Adaptive websites use media queries to target specific device sizes

The site will look different depending on the device being used and has ‘breakpoints’ – the point at which the layout changes.

Pros 

  • At set browser sizes the site looks good
  • Can control what the design (content and layout) looks like
  • Less work to build and maintain

Cons 

  • Does not perfectly encapsulate the in-between sizes
  • Have to create different layouts for the different screen sizes

3. Adaptive Layout

Responsive websites is a combination of both fluid and adaptive design. It uses the relative values of a fluid website with the media queries of an adaptive one.

Pros 

  • Less work to build and maintain
  • More fluid when changing the screen size
  • Pages are designed with all layouts in mind and uses media queries to adjust for varying resolution sizes

Cons

  • Less control
  • Longer development cycle
  • Loads slower

In a situation where you had to design a new webpage, it would be more beneficial to design a responsive webpage, whereas an adaptive design would be better when converting an existing webpage into a mobile friendly version.

4. Responsive Layout

This website lets you look at these four different options and see how they’re different so follow the link and see for yourself how it works:

Liquidapsive – Web Layouts

Hope you enjoyed the read, maybe learnt something new.

– KH

Images retrieved from:

http://blog.teamtreehouse.com/which-page-layout

Web Design: Tables – When to use them and when not to use them

Graphic Design, Web Design

In HTML there is a table element that is used to represent data with more than one dimension and in the form of a table. Tables can be used to present tabular data in a functional way. This could be any information that you keep track of or record in a spreadsheet or it could be communicating the pricing page of a website. Tables in this sense can be (and should be) used to organise information and make it easy to understand in one, quick glance.

These two articles highlight a number of different styles that can be applied to tables to help communicate the message effectively:

  1. Top 10 CSS Table Designs
  2. 15 Tips For Designing Terrific Tables

In the past tables have been used in web design to structure the whole layout of an entire page. This method is very outdated and is no longer the way to create your webpages. Using tables is no longer an easily accessible format for webpages and the use of tables makes it hard to navigate the page.

This is a quote taken from W3C’s Editor’s Draft of the HTML 5.1 Nightly:

Tables should not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

HTML5 Elements & Old Browsers

Graphic Design, Web Design

Another day, another blog. Introducing HTML5. For those who don’t know what this is, it’s Hypertext Markup Language – the most recent language of the internet used for describing the contents of a webpage and how it looks.  It has been updated to allow for more efficient content and improved performance.

Just a short video that explains HTML5 in simple terms:

There are new media elements such as <video>  and <audio> which define a standard way to embed them into a webpage. These are good for web design, especially the <video> one, because it is no longer necessary to use plugins to view the videos.

List of HTML5 Elements

While these elements are supported in modern browsers, it’s important when designing a webpage to keep in mind older browsers and what to do if they aren’t supported. The main browser that doesn’t recognise some of the elements is Internet Explorer. I’ve been looking into some different ways to get around this so the elements can be recognised. A tool that has been found to workaround IE is the HTML5Shiv. This is a code that can be put into the <head> element so that IE can read them.

I also found a website that can test how well a browser will support HTML5 so this could be a handy tool to see and compare other (and older) browsers and determine which ones your elements may not work in.

HTML5 Test

It gives a score based on a number of semantics and then breaks it down even further.

Websites: Good vs. Not So Good

Uncategorized

This week I’m going to show you a very impressive website and then another website that is not really as impressive.

Impressive Site:

http://grainandmortar.com

So what elements from this website could be used in my own web designs…all of them? Ok, I’ll try to just pick a few.

  • It’s really simple and minimal!
  • The simplicity of the navigation. The main navigation is fixed at the top of the page and there are other sets of navigation panels to get around other pages.
  • Text and icons are highlighted when you hover over them.
  • The website is a long scrolling site. You can just keep strolling instead of clicking through a whole heap of links. (Side note: I found another great example of super effective scrolling is: http://www.quoplus.com Enjoy!)
  • The images. They are big, great quality and help to promote the website. They also use a number of handy illustrations/icons for different sections of the webpage.
  • Having ‘About’ and ‘Contact’ section is important so viewers can tell straight away what the website is all about. People like to know about other people.
  • The information in the footer bar.

Unimpressive Site:

http://www.suzannecollinsbooks.com

Now, Suzanne Collins is a great author but I think she may need to invest in a new website.

  • New fonts would be a good start.
  • A new layout — on the ‘Works’ page there’s big images of her books and then not a lot of text which leads to way too much white space. The side bar doesn’t look very good – it’s full of short quotes which is unnecessary because on the home page under each image are even more reviews of each book.
  • A new colour scheme — maybe to match her books.
  • Maybe highlight The Hunger Games as it is very popular and a best selling series.

There are many more changes that could be made to this website but I won’t go into any more because I’ve gone on a bit too long here.

Thanks for reading.

– KH

What’s trending in Web Design?

Uncategorized

I’m currently doing a class on web design and we are looking at some of the popular layout trends around at the moment. While there are numerous current web design trends out there at the moment, I’m just going to give you a quick summary of a few I think are the popular and therefore make for some pretty effective websites:

  1. Filling a single screen with full width, high resolution images or videos. When it’s an image sometimes it will be a scrolling slideshow to highlight different aspects of the website.
  2. Responsive design – this is where the website adapts depending on what device you are looking at it on (computer, tablet, smart phone, etc.)
  3. Scrolling instead of clicking – the background moves at a slower rate to the foreground.
  4. Modular/grid/card designs – very organized and is responsive, can browse a lot of data, clean and simple.
  5. Flat designs – clean designs, bright colours, two dimensional.

Websites need to grab your attention and make an impression pretty quickly otherwise viewers won’t stay on the page and this is a big problem – why have a website if no-one is going to look at it? McLeman (2015) found that you only have up to eight seconds to get the viewers attention.

Websites that demonstrates some of these trends:

Websites that needs to adopt some of these trends:

I found an infographic that goes through some of the trends I’ve mentioned and then one or two different ones as well.

References:

Ali. (2015). 5 Best Web Design Layout Trends for 2015. Retrieved from: http://designposts.net/best-web-design-layout-trends-for-2015/

Kunwar, A. (2015). 10 Web Design Element and Layout Trends That Dominate in 2015. Retrieved from: http://www.pixelatingbits.com/10-web-design-element-and-layout-trends-that-dominate-in-2015/

McLeman, D. (2015). Is your site lagging behind web design trends? Retrieved from: http://crosswebideas.com/web-design-trends-2015.html

Randall, A. (2015). 7 Top UI Design Trends for 2015 & Beyond. Retrieved from: http://gotgroove.com/ecommerce-blog/7-top-ui-design-trends-2015-beyond/

Weller, N.B. (2015). Web Design Trends to Look out for in 2015. Retrieved from: https://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015