Reactive Mobile-Friendly Websites
In 2013 something massive happened. For the first time more people accessed the World Wide Web from their mobile devices than they did from desktop and laptop computers for the first time.
So, the chances are that you are reading this article on your mobile phone. This shift away from now more traditional computers has major implications for any company that has a website, not least because mobile website users have different needs and different priorities.
What is the difference between a mobile website and a desktop website?
The main difference between a mobile website and a desktop website is the size of the screen. Whereas on a laptop the screen is usually upwards of 1000px wide, by around 640px tall, a mobile phone screen can vary widely between 800px to 200px wide - and can be flipped between portrait and landscape views dynamically.
You also then have the complication that even if the screen displays 800px, those pixels may be so small that the words may be illegible without zooming in. While many mobile users are used to having to zoom in to read the content, this can quickly become tiresome if this also means scrolling left and right at the end of each line.
The other thing to consider for mobile users is that although 3G and 4G phones are much faster than they used to be, they are still nowhere near the speed users get on home and business broadband. So the time your website takes to download is a lot more important on a phone.
Finally, because there are a wide range of mobile devices, there are also a wide range of browsers that need to be tested, each on slightly different operating systems and with different rules. Some devices also don't support flash or other technologies that were once commonplace online.
How can I make my website mobile-friendly?
A lot of our customers are now realising that mobile users are not a group they can ignore and simply expecting them to zoom in and out of their full size website is no longer an option.
When so many other websites provide a good mobile experience, it is now becoming something that people expect, not just something that is desireable.
Thankfully there is a relatively easy solution to the problem and one that is quite easy to implement on any website using HTML5 and CSS3.
Reactive websites are websites that adjust depending on the size of your screen, adjusting the style and layout of the website accordingly.
They do this using CSS3 to show/hide and resize text, backgrounds and features depending on the size of your screen. For example, on our home page we have a scrolling banner displaying links to some of our most recent articles. However, if you are viewing this on a phone or a smaller tablet this has been hidden, because we've decided that it isn't an essential feature.
Besides just re-sizing text and hiding features you can also change the way that the menu systems work, providing the now commonplace 'hotdog' menu icon which then displays the menu in a more touch screen friendly way.
How long does it take to make an existing website mobile friendly?
While it's hard to put a 'one size fits all' price on making a website mobile-friendly, since it largely depends on the way that the code has currently been written, in the simplest cases it can take just a day.
On average we would suggest that the process will take 2-3 days, which would include designing mobile and tablet views prior to making the changes to the code itself.
I don't yet have a website, how much extra would a mobile version cost?
If you haven't set up your new website yet, we'd definitely recommend you including a mobile friendly version in your brief. We now include the cost of making your website mobile and tablet friendly in the set up costs. So the price you see on our website now includes the reactive mobile version.
How do I get started?
If you already have a website or you want a bespoke website quote, get in contact with us today by calling 07817 851856, emailing firstname.lastname@example.org or filling out our Get A Quote form here.