Venturing into the world of web development for mobile devices
I am a bit behind when it comes to developing websites for mobile platforms I’ve only recently jumped on the iPhone bandwagon, so have come to appreciate when designers and developers spend the time to make a mobile-friendly version on their websites.
I am currently in the process of redesigning and updating the content management systems of the websites for the company that I currently work as an in-house web designer/developer/administrator. I came to realise that certain aspects of the new website (and the terrible, current one) would not logically make sense when using a mobile device such as an iPhone or an iPad – in particular elements that require the user to hover over an aspect of the site. You cannot hover when using an iPhone, so I would have to rethink these parts of the website. I decided to construct a mobile version of the website, which surprisingly didn’t take very long.
I used CSS3 media queries to include an iPhone-only stylesheet which I changed the layout and functionality of the website without touching the HTML. I also restricted the user from zooming on the website, keeping the site at 100% width of the iPhone. I hid any unnecessary items using CSS and rearranged the location of the navigation. I also had to change the style and layout of the forms on the website to fit on a narrower screen.
I still need to fix a few issues with the mobile version, but I am generally very happy with it for a first attempt. I can’t give a link to the website, because as of the time of writing, the website is still in development and running locally on my work machine.
