As the website Design and Development Director at Simply Lawyers it is my role to produce the websites, starting first with design and then developing the ideas into living and breathing websites.

The Personal Injury and ‘Make a claim’ sector is highly competitive, possibly one of the most competitive with regards to ‘search’ on Google.

Search Engine Optimization is essential to get a site ranking high on Google, but a well prepared website helps as we found out.

When I designed and developed the Simply Lawyers website, Josh Whiten, the Marketing Consultant and SEO Specialist at Simply Lawyers informed me that the site, plus the others in the brand were naturally climbing very fast on Google due to the way they had been built.

So what had I done to help the sites climb so well? It’s no secret. It’s just very well written HTML and CSS3, planning the overall structure of the page correctly and keeping the code to a minimum and as semantic as possible.

Google’s main job is to produce the best results it can to those searching, so naturally if you plan the build of your website correctly, Google will see this and you will start to rank. But this is only the first part of a journey and it is here that the web designer passes the baton to the SEO team who will then push the site hopefully to the top of Google for you.

Being a web designer I routinely work with photographs in portrait position rather than landscape. I decided some years ago to buy a monitor that enabled me the ability to twist it 90 degrees so I could work with portrait imagery easier, relieving me from having to constantly scroll up and down.

To the left is an example of the website Pinterest with my screen turned at 90 degrees.

Recently I decided to turn the monitor on it’s side, so to speak, for a piece of work. Whilst working on the clients design I flicked through various websites for a break. This included facebook, twitter, pinterest and various news websites.

With height now as a premium, rather than width I suddenly had a much better experience on the websites above because I didn’t have to scroll so much to see news, articles or comments further down the page.

In a market that is moving forward with screens that are getting wider (obviously for video and tv viewing) it’s important we take into consideration that we are also fanatics for information sites that have endless feeds as you scroll further down the page, which are still being built to fit within the width of 1024px.

To the left is an example of the website Pinterest on a normal laptop or desktop monitor.

Smart phones are primarily held in portrait position too, with the ability to turn it to the side for wider viewing. Tablets also begin in portrait position.

So why are we still working with monitors in the landscape position when information is clearly dictating a better experience with a portrait position?

Will the future see desktop and laptops perhaps moving in this direction?

Every couple of years web design evolves and takes on a new face. 4 years ago we moved from having fixed width websites at 700px to 980px to use the extra space we gained as monitor resolutions increased.

We now have entered a new period where websites need to work not only on laptops and desktops but also on tablets and smartphones, and with the significant increase in their usage, it is something that cannot be ignored.

So how do we do this? Responsive CSS. And what is that you ask?

Basically, the website is built with 3 (or any number if you choose) different sizes to change size to. Usually something like 980px, 650px and 480px in width. This accommodates firstly desktops and laptops, then Ipads and tablets and finally smartphones; Iphones and Android phones etc. 

Using different stylesheets and media queries with CSS3 this enables us now to target the different resolutions without touching the content.  And then, when we open up a site in the different formats of media, the website will modify itself, giving the user the best experience.

So as you can see, we are also entering into user experience and information architecture here.

As an example, grab the right-hand bottom corner of the screen and drag inwards. You will see this website slowly change shape. This is the CSS3  and media queries at work. Now open the site in a smartphone and you will see a complete change in the site, plus you won’t need to pinch the screen to make it larger either.

So what we are doing here, is making the website much more accessible to all it’s potential users. And remember, it’s the users that count.