UP


www. Teachwebdesign .Com
Design2
Design3
Design4
Design5
Design6
 

Website Design 6
Mobile Page Design

web 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 700px 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...

Responsive Web Design (relatively new in concept) uses several methods of redesigning your current desktop page so that it becomes more linear (single colume design) therefore becoming more usable in a small screen width... you can read up on it Here or simply just Google for it!

In this lesson we have chosen to study the second choice and simply build a New Page... you should study both options before you begin your efforts which will depend on many variables specific to your current desktop page design...

NOTE: Our entire web site, including THIS page that you are now viewing has been designed using RWD methods...

So with that in mind, let's proceed... 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...

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... we 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 <= 699) { document.location = "http://your_mobile_page.html"; } //--> </script>

We used 699px 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... requiring the user to "use gestures" to Zoom to read better as it were...

Now let's proceed to building your mobile page... remember it should be presentable in the small screen divice's total screen width (both portrait and landscape views)... so since iPhones and many other small screen devices have screen widths of 320px or greater... we will build our mobile web page with that in mind... and also we will place the following Meta Tag into the head section of the mobile page, which directs it's browser to fill the screen width with our mobile page, as well as halting any Zooming of our page...

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

So here as an Example, is our Magic Secrets For Sale Web Page, the Mobile Version ... to show you how we designed our Magic Secrets For Sale Desktop Web Page ... Here is the Mobile Version when Viewed with an IPhone 6:

So it truly becomes more concise, easily useable (remember clicking links with your finger on a small Smartphone screen can be difficult, sometimes), and completely inclusive of Only The Essential Content from our Magic Secrets Desktop Web Page ...go ahead and compare the two versions...

So now let's point out a few Key Factors in building the Mobile Web Page... (1) Use CSS Styling to ENLARGE the area of your Text Links so that users can easily touch their finger onto the link [hint: use the CSS Display Property along with Extra Padding]... (2) Put any other pertinent content as needed and eliminate all "bells & whistles" and extra Images since small screens have limited real estate...

For checking your Mobile Web Page, Google's Chrome Browser (get the latest version) has a built-in Device Emulator that seems to work well... to get to it, simply open up the browser's configurations (the little black horizontal lines near the right uppermost corner) then goto... More Tools>Developer Tools ...and then click the small check box at the top:

Here is Google's helpful source for using their Device Emulator... Click Here

This concludes our discussion on Mobile Web Pages, we hope you have lots of fun with Your Designs...

Design 5---Intro