If you are at all involved or exposed to the world of web design and web development then you have no doubt heard of the phrase “responsive” web design. If you browse the popular theme sites for themes for platforms like WordPress and Magento then you can see responsive themes becoming more popular.

So what does it mean and how does it work?

What does Responsive Web Design Mean?

Responsive designs change the layout and visible content on a page depending on the width, height and other factors of the device or window rendering the page. You can generally test out responsive designs by simply unmaximising a browser window and then resizing it down to smaller sizes such as 320 pixels wide. On a normal design you would be quite lucky if the site still rendered in a readable way at that width. More than likely you will only be able to see a fraction of the page and would have to sideways scroll to see the rest of it.

On a responsively designed site, the layout would change as the screen width gets smaller. It might hide certain elements such as side columns and may make things rearrange in a more vertical way to allow them to be displayed without the need for side scrolling.

In a nutshell, this is what responsive web design means.

How Does Responsive Web Design Work?

Responsive web design works by using a CSS3 technique called Media Queries.

CSS has had the concept of media specific style sheets for quite some time. Traditionally though this was limited to print and screen, allowing for example to remove background images from a page when printing and perhaps adjust font family and size for better printing results.

The media queries functionality extends this concept significantly, allowing custom style rules to be applied based upon a range of differnt media options. The most commonly used of these for responsive web design are width and height.

The full list of properties that can be utilised with media queries include:

width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

Get Your Web Site Working Responsively

If you want to upgrade your web site to use responsive design techniques to better support the wide range of internet devices in use today then get in touch with Edmonds Commerce today to discuss how we can help you.

Some Useful and Interesting Links

http://www.w3.org/TR/css3-mediaqueries/
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
http://reference.sitepoint.com/css/mediaqueries
http://mediaqueri.es/
http://mac-blog.org.ua/css-3-media-queries-cheat-sheet/

http://www.webmonkey.com/2011/11/the-end-of-an-era-internet-explorer-drops-below-50-percent-of-web-usage/

Anyone who had had to either do an extra 50% of work to get IE working, or had to pay someone else to do so. I’m sure you are thinking what we think. Yes!

If you are putting together a new web site and would like a logo and design creating, the traditional approach is to first choose a design agency and then get them to create a design for you.

However a new approach is to get the agencies to create the designs first and you choose your favourite.

For logo designs, check out Logo Tournament

For full site designs, check out 99 Designs

Both sites offer a similar idea.

The quality of the designs is often really quite good, though I think you have to accept that a lot of agencies will not be able to compete in this kind of market place so you are only really catering to designers who are freelancers and are able to do work with potentially no return.

I have seen mixed results with these kinds of sites, but they are definitely worth looking into especially if budgets are tight and you are prepared to take a bit of a risk.

Just came across Kuler – by Adobe.

A nice little flash app for creating colour schemes

http://kuler.adobe.com/

Recently came across this article all about working with IE6.

http://sixrevisions.com/web-development/definitive-guide-to-taming-the-ie6-beast/

Noted here for future reference and for anyone else looking for this.

I recently came across rgba colours which are a very simple and logical way to produce a colour (rgb) with alpha transparency as well. This is ideal if for example you want to create a translucent white box to put some text in.

CSS does have some (dodgy) opacity controls, but they set everything as transparent including any text or pictures contained within the element. By using rgba, we can set a translucent background colour and have opaque elements contained within.

As usual, to get it to work in IE requires some extra effort, however this hack mentioned here and originally credited here seems to offer a solution.

Just came across this and its so cool and easy I had to blog about it straight away..

http://www.fivesecondtest.com/

Basically people see a screenshot of your design and then get 5 seconds to ‘take it in’ and give you feedback on which bits they managed to assimilate.

Very useful

My favourite platform for web development has to be Ubuntu Linux. As a desktop system to work on (rather than play) I think it is unsurpassed. However there are some times that you really need to use windows. For example my laptop seems to refuse to install Ubuntu which means that I am forced to stick with windows XP for the time being. However windows can be a perfectly adequate web development environment.

One of the trickiest aspects of web development on windows used to be setting up the Apache, MySQL and PHP stack. However this is no longer the case thanks to the wonderful little package called XAMPP. This is short for XP, Apache, MySQL, PHP and Perl.

Xampp allows you to run a webserver on your local computer. This allows for superfast editing and checking of your web application. Anyone who has repeatededly edited and FTP’ed a file to a webserver will know that it can quickly become a pain and definitely slows down your performance as a programmer.

By editing the file locally and simply refreshing your web browser you can quickly see how your web design is looking or ensure that your PHP is not throwing any errors etc.

Furthermore, using XAMPP allows you to start and stop the entire web server stack easily from one simple control panel.

Download XAMPP from here 

osCommerce is an awesome ecommerce package. It has many critics and this is mainly due to the fact that unlike many modern open source packages it is not really ready to run “out of the box”. That is a drawback, however it is not really so much of a drawback when you take into account that anyone that would want to establish an ecommerce presence is going to be very keen to modify the package to make the site look and feel unique.

This is where osCommerce really shines as it is very easy to modify and there is a huge user base with literally thousands of plugin modifications or “contributions” in osCommerce speak which can help you to make your store work in exactly the way you want.

There are some things though that are highly recommened for every osCommerce store though:

1. Search Engine Optimisation

As standard, osCommerce really is not very search engine friendly. Search engine friendliness is the first step towards search engine optimisation. This of course means that there are a fair few things you need to do to your store to make it truly search engine optimised. However, they are worth the hassle (especially if you get us to do it for you) and once you have some SEO modifications implemented, you will be able to start to get indexed and gaining visitors from the search engines without having to pay per click.

2. Speed

There are a few key things that every store should really do to speed up osCommerce. If however you expect your store to have a lot of visitors and/or display a lot of products and categories then you will really benefit from giving the front end of the site a bit of an overhaul in certain areas. The speed improvements possible are really quite dramatic and can make the difference between your visitors sailing through the site straight to the page or product they want or them getting bogged down, bored and finally leaving before they even get where they want to be.

3. Security

osCommerce is pretty secure out of the box. The admin side obviously needs some password protection and can be made more secure if it is felt neccessary. An easy modification is to simply rename the admin folder into something that only you know.

4. User Friendly

The osCommerce ecommerce system is fairly user friendly from the outset. One area that many people prefer to modify though is the checkout procedure which can be a bit long winded for some.

5. Easy Administration

Admin side there is a whole host of things that you can do to make your and your employees’ lives easier. For example adding products one by one using the admin tool can be a bit tedious and slow. Easypopulate is an awesome addition to any osCommerce store allowing easy population and editing of the product catalogue using your favourite spreadsheet program. We like Open Office for this task.

Part of the joy of running your own web site is that you are free to edit, change, personalise and improve it to your hearts content. Some things you will add because they make a real difference to your bottom line and some things you will add just because you think its a good idea or will be cool. The great thing with osCommerce is that you can edit it and make it work the way you want.

If you are not confident with PHP or the change you want to make is a bit more complex than you can handle, then we are more than happy to get in there and give you a hand!

Ubuntu Linux is undoubtedly the most successful desktop version of linux available today. It has managed to tempt across many dedicated windows users with its easy installation procedure, comprehensive bundle of applications including open office and firefox, its greater security and reduced vulnerability to internet viruses and malware. And of course the fact that it is free to download and install.

For a web designer, it is nice to have a sleek desktop environment to code in whilst being able to run a full LAMP stack web server as the localhost – meaning that designing and developing web sites is a breeze.

However, there are times when you simply need to check that a design is going to work with Internet Explorer. Microsoft’s Internet Explorer web browser is bundled with windows and is therefore the most popular web browser at the moment. However as a web designer it causes problems as it often behaves erratically or unexpectedly. For this reason a web designer always needs to make sure that they check their designs in Internet Explorer.

Another reason that Ubuntu users may need to use Internet Explorer is to log into certain sites which are not compatible with anything other than Internet Explorer. This is a real pet hate as it is real sign of laziness on the part of the web designers not to ensure that their web sites are accessible by all web browsers. Unfortunately the sites that tend to be like this are the ones that you really need, such as online banking sites. Its probably something to do with sloppy handling of ssl secure and insecure content, but I am not sure on that one.

Anyway – to save you having to maintain a windows installation and reboot everytime you need to check something in Internet Explorer – there is the excellent IEs 4 Linux package. This great package allows you to easily install Internet Explorer under Ubuntu (or any other version of Linux).

You need to have WINE installed and working, and also have the cabextractor working. Both of these packages are available in the syntaptic package manager in Ubuntu.

Related Resources

http://novicenotes.net/2006/08/04/ie_on_linux_wine/

http://blog.taragana.com/index.php/archive/how-to-run-microsoft-internet-explorer-7-6-55-51-in-linux

http://alternativenayk.wordpress.com/2006/11/27/internet-explorer-on-linux-help-for-xfld-ubuntu/

http://www.liewcf.com/blog/archives/2006/04/install-internet-explorer-6-on-linux