This is somewhat off topic but since this is my blog I reckon I can use a bit of poetic licence. I have been updating the main zeidman.info website so that it can be used easily on mobile. Everybody talks about the percentage of visitors coming from mobile platforms as having increased and will certainly increase over time.  When you have a good smartphone you do look at sites much more on the web. Having recently (within the last two years at least) redesigned our website I was somewhat reluctant to do it all over again. The homepage sort of worked for mobile. There were three large icons that could easily be clicked on to get into the site. However the rest of the site was far from optimised.

The concept of responsive design was very new to me. Much of the website broke many of the responsive design concepts. That is there were many fixed width areas (too wide for mobile) and some tables that really didn’t work. I really didn’t want to go through a whole redesign but at the same time I didn’t want to create an entirely separate mobile site. This would mean updating two websites. Instead I created a second cascading style sheet (CSS) especially for smaller screens. I did have to update the regular, larger screen CSS file a little and update the pages to remove any fixed widths. Fortunately most of the fixed width handling was done in the original CSS file so there was no need to change large areas of the website. Where I did have to make changes to all the pages of the website, using Dreamweaver templates certainly made it much easier. By simply updating one of the templates and applying it to all the pages using that template it was much quicker to update the site.

I used media queries to select the correct CSS file for the required platform. If a screen size of 480px or more was being used then the regular CSS file was used. Under this value and the mobile CSS file was used. There is apparently a difference between CSS pixels and device pixels. (This website gives a good technical explanation).

There were a few changes that had to be made to both regular and mobile websites. The current lightbox functionality for showing the screencasts would not work on mobile. It would open up a lightbox but not play. I suspect that it was because it was using a flash player to do so. After trying different alternatives I went for a lightbox that would open up for a larger screen but use the built in tools for a mobile screen i.e. on my Samsung Galaxy S3 it opened up in my Youtube player.

On the mobile site I sacraficed the right sidebar as there would be no space for it. One problem with that though is that logged into our ZeidZone extranet that sidebar contains all the navigation links. Consequently I had to move that whole div to sit under the banner image. It does not look great but for a first attempt it will do.

Some of the layout does look somewhat of a compromise under the mobile site. If I were designing the whole site from scratch then I am sure it would look better but it is much harder to adapt a site to responsive design than to build from scratch.

Let me know what you think in the comments. Check out our site on your mobile http://www.zeidman.info. Note that looking on an ipad will probably give you the regular site.