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
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
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.