Website Design 5
Mobile Page Design
If you want your web page to be EASILY USABLE on a SMALL SCREEN Device, like Smartphones which typically have screen sizes smaller than 799px in width... then you have a choice to either use Responsive Web Design techniques OR simply build a NEW PAGE for the smaller screen devices... So with the latter in mind, first you need to know when a small screen device, like a Smartphone is actually trying to access your desktop version of your web page... then you need to REDIRECT it to your newly designed mobile version web page which has it's unique HTML Source Code...
You could try sniffing out, using Javascript, the User Agent of the small screen device... however since there are literally hundreds of them now days, it seems wiser to use a Javascript to sniff out the Screen Size of the device, then set requirements for it to be redirected to your corresponding mobile page... I have chosen this simple script, which you need to place into the head section of your current desktop page:
<script type="text/javascript"> <!-- if (screen.width <= 799) { document.location = "http://your_mobile_page.html"; } //--> </script>
I used 799px as the requirement for redirect since almost all Smartphones are less than that in screen width... and as for devices greater than that screen width, including tablets and iPads... your current desktop version will suffice...
However... Responsive Web Design (relatively new in concept) uses several methods of redesigning your current desktop page so that it becomes more linear (so to speak) therefore becoming more usable in a small screen width, which means you do not have to design a separate page just for smaller screens!!!... you can read up on it Here or simply just Google for it!
Designing using RWD is not difficult to learn... and first the following code MUST be placed into your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You can read more about Viewport Meta Tags Here or simply just Google for it!
If you are using Google's Chrome Web Browser ...Excellent... because it provides a Tool for viewing your webpage in various size screens, emulating Tablets, Laptops, Smartphones and MORE!
Here is Google's helpful source for using their Device Emulator... Click Here
You should Read My Developer Tutorial to learn how to use the Device Emulator on your Chrome Browser!
Responsive Web Design uses several methods of Layout Page Grid Control so that the page Adds or Removes various parts of itself to accomodate the changes in Device screen sizes... therefore becoming more usable in a all screen widths by using only ONE PAGE SOURCE CODE... you can read up on it Here or simply just Google for it!
This concludes our discussion on Mobile Web Pages, I hope you have lots of fun with Your Designs...