Coding for Mobile Devices/ Tablets
In comparison to this is mobile web coding (HTML, CSS, jQuery) which can be used across all phone platforms on all mobile browsers. Here are some tips and coding we learnt:
- Mobile & Flash: don't rely on too many plug-ins on phones, this drains battery quick and is too CPU intensive for mobiles, this can be a problem if you have video embedding in your website
- Mobile Browsers: you need to ensure your mobile site works across all browsers on every platform (safari, opera, windows etc.)
- Mobile Ready Images: check PPI, save them as PNG-24; this gives highest quality for small files. Always name your files based on what they are for e.g. filename-btn-up.png
- Different ways to go mobile: 1. Subdomain e.g. mobile.hannahfurnell.co.uk, then use a bit of clever jQuery to say 'if the device user is using an iPhone, then send them to subdomain' 2. Make it responsive - responds to browser size (easier as you only need to change html/css files)
- Meta Data: here are some meta tag codes we added to the website code to make it more suitable for mobile use, these are always inserted between both codes and passes information to the browser:
We then created a new CSS file named 'mobile.css'. But how does a browser detect a mobile style sheet? 'Media' parameter....
With this simple code we have managed to change a desktop website into an acceptable mobile website (more could be done, but this would work for the basics). Also remember these tips when creating a responsive website for mobile:
- keep it simple and always make images 'bigger' - use responsive sites to eliminate elements from main site e.g. adverts - de-clutter! - We worked in pixels, but this can also be done using percentages
MORE TO COME...