Location: Amsterdam, Netherlands
URL: writewell.nl
Translating a Website Into a True Mobile Experience
Andrew at Writewell was already happy with the site I had built a few years ago, which was displaying fine on mobile devices in its current state.
But since now it seems everyone (including Google and their latest update) is settling more in favour for responsive web design over websites redirecting to an app on mobile devices, we decided it was time to re-code the website and take the experience for mobile users that one step further.
A Two Step Plan – Part 1
The change in layout for a mobile friendly website is only the first part of the project, which includes restructuring all the current content into something that will work across all devices, from phones to tablets, to desktops and everything in-between.
All while still keeping to the theme of the original website.
If you ever thought this is easy, think again. Feel sorry for the web designer who at one time only had to check their work on about 10 different web browsers on the PC or Mac.
These days I can pop into the analytics reports for a website and see visits from devices that I’ve never even heard of, some with their own set of quirks.
For the curious here’s just a basic list of device and operating system combinations from my favourite testing suite…
For most mobile layouts, ideally you want the following:
- A mobile specific menu
- Responsive images that resize depending on the screen size and layout
- A fluid layout that resizes to different screen sizes
- Anything that can’t be rendered or won’t operate as expected needs to be replaced or completely pulled from the website, for example Flash animation or certain jQuery effects.
- After all of this, the content on the website still needs to be kept in context no matter which device of screen orientation the site is being viewed on.
A Two Step Plan – Part 2
Once the website looks ok you need to take into consideration performance issues.
This was highlighted only too well with another client who wanted a site finishing for his IT academy.
The original site built by an outsourcing team weighed in at over 3MB for each page.
On a standard 3G connection this would have taken in the region of 25-30 seconds to load, don’t think there’s many of us who are patient enough to wait that long on a mobile device.
Every website I build now goes through performance testing by default.
Ideally on a regular broadband connection for a basic website I’ll always aim for a sub 1 second load time. Sometimes there can be issues that will not make this entirely possible from features the client has requested to the way the hosting company have set up the server.
In both cases I’ll always consult the client on a best way forward that fits their budget.
In Andrews case there were none of these potential issues, as you can see from the screenshot above I managed to achieve a blistering sub half second load time of 447 milliseconds. Andrew is yet another client on a basic hosting plan achieving dedicated server performance levels saving him at the very least £50 per month in unnecessary hosting costs.
You can also see from Andrews testimonial how he finds working with me.