This is the beginning of another cheat sheet, this time, for mobile coding. A mobile design is basically a miniature copy of your desktop designed site, usually displaying only the important information first, with links to the rest. Its design is fluid because it has to accommodate different sizes of mobile devices.
Make sure you fill the view port
The following code is vital, because without it, your mobile design won’t render properly. Standard smartphones today come with full browsers. And if you ever looked at a mobile designed site in a desktop browser, you’ll see how weird it looks – it usually spans to the entire length of the window. This is what your mobile design will look like in a mobile device if you don’t put the following code into your <head> section. What this code does is tell the mobile device to zoom in, fill the view port, and display the content at the width of the device.
<meta name="viewport" content="width=device-width, initial-scale=1">
Redirect to mobile & back to the full site
Another thing you’re going to want to do is redirect users who view your site on a mobile device to the mobile version of your site. There are many javascript solutions for this, but the problem I had was: how can I then give the user a link to view the full site if they choose to? All the scripts I initially found kept the mobile user on the mobile site with no way to return to the full site.
Sebastiano Armeli-Battana wrote a script called: JS Mobile Redirection. You can download it and get all the details from his page on GitHub. It does exactly what I needed. And I think this is ideal for developers who want to give their users some options.
It’s a simple set-up: You add the following code to your <head> section:
<script src="/js/redirection_mobile.js"></script>
...
<script type="text/javascript">
SA.redirection_mobile ({
mobile_url : "yoursite.com/mobile/",
mobile_scheme : "http",
});
</script>
mobile_url: this is where your site will redirect to. mobile_scheme: is the network protocol – usually you don’t have to change this. Now, you’ll need to add some code to the end of your links that will allow users to go to the full site. Add this to your link:
<a href="http://yourfullsite.com/?noredirection=true">Link back to full site</a>
That’s all for now.