I read an article a few weeks ago that stated that there are now more mobile devices (iPads, iPhones, Android and Windows phones and other tablet devices) than desktop/ laptop computers accessing websites. This has interesting implications on websites. Up until a 3-4 years ago, most websites were static layouts. You just got a smaller version of your site on your iPhone/ iPad, but it was essentially the same site and the same layout.
Now it is becoming increasingly important to have different versions of you site for mobile and computer users.
How do you know the difference?
When a device tries to access your website, the server (where the website is located) can ask the device for information about the screen width. Once this is known decisions can be made to adjust the screen width and layout of your site depending on the device that is accessing it so that it is optimised for the device.
Home-Start Responsive Template
I had a request in July for a responsive Home-Start website. The sites I have built for Home-Start satellite offices so far, (40 of them), have been fixed layouts. While I have some experience with responsive layouts and adapting them from free templates, I had not created one for Home-Start sites. Well, the good news is we have one now, and it is close to being completed.
Here are two different versions of the same site:
PC Screen (Normal) Simulated, I have had to shrink it to show it on this page.
The image below is simulating a mobile device. You will notice that the side bar has disappeared, it is now under the main content area off of the screen, and the menu has been reduced to a black square with three white lines going across.
Text and images change too, making it easier to access the site from a mobile device.
You can simulate a responsive website by adjusting the width of your browser window. you can see how the website reorganises itself. Check out this one: http://www.homestartuttlesford.org.uk/
Can I have an upgrade?
(edited 3rd August 2015: Yes I can providing upgrades to Home-Start sites go to here to learn more.)