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:
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
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!
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
- 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
- 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.
Fluid (Liquid) websites are built using relative values (such as percentages) to allow a scaling process to occur
- 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
- 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.
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.
- At set browser sizes the site looks good
- Can control what the design (content and layout) looks like
- Less work to build and maintain
- Does not perfectly encapsulate the in-between sizes
- Have to create different layouts for the different screen sizes
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.
- 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
- 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.
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.
Images retrieved from:
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:
- Top 10 CSS Table Designs
- 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.
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.
It gives a score based on a number of semantics and then breaks it down even further.