In yesterday’s session we also learnt to code websites for mobile devices, NOT how to code native applications, but how to make websites work in mobile browsers. Although we were told the type of programming code we would have to carry out if we were to create a native app for mobiles, which is more advanced:
- iPhone/ ios – Objective C / Xcode
- Windows Phone – C# / Silverlight
- Android – C# / C++ / Java (not javascript)
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:
- Viewport – resize to device width:
- Fullscreen Mode: can run in full screen without toolbars:
- Detect Phone Number:
We then created a new CSS file named ‘mobile.css’. But how does a browser detect a mobile style sheet? ‘Media’ parameter….
- Media Parameter: set the style sheet for type of media:
- Media Queries: site is changed when browser is resized to certain size e.g. when width resized to 400px or less, change background to blue:
- Get rid of margins:
- Set container:
- Remove Header Image:
- Change Navigation: also remember previous padding…
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…
Like this:
Tags: Android, Change Navigation, Coding for Mobile, CSS, Design, Detect Phone Number, Fullscreen Mode, HTML, HTML 5, iPhone, Media Parameter, Media Queries, Meta Data, Meta Tags, Mobile, Mobile and Flash, Mobile Browsers, Mobile Ready Images, Native Apps, Navigation, Remove Header Image, Responsive Design, Set Container, Sites, Tablets, Tips, Usability, Viewport, Websites, Windows Phone
Very interesting! Im a little behind on website coding for mobiles..it seems even more complicated than normal website coding haha!