Mobile Web Pages
In looking at my results for my Just Ask Frank site Someone had posted a question about creating mobile pages or creating TWO landing pages. One for regular browsers and another for mobile web browsers.
That is a VERY good question there is a couple ways to handle this.
One way would be to create a a cascading style sheet (CSS) for each. You can name a style sheet anything you want but if you’re creating multiple it’s best to name them appropriately for example normal.css for the regular browser and mobile.css for mobile devices. (Hang on non techies I have a non tech solution as well.)
To use both CSS Styles I would recommend using the style sheets as includes. You would include them at the top of your pages like…
rel="stylesheet" href="normal.css" type="text/css" media="screen"
rel="stylesheet" href="mobile.css" type="text/css" media="mobile"
The browser would then pick the right one for the correct device. Of course in the example above you would want to make sure you put the correct path to your css.
There are various media types you can use another common one is “print” which would allow you to format a page for sending the correct output to the printer.
Ok for the non-techies (told you I get there). There is a cool WordPress plugin called WP Touch this allows you to simply add the plugin and instantly it formats it in a cool way to be displayed on mobile devices. There is a free version as well as a pro version. Click here to check out more about this plugin. The thumb nail to this post is an example of what the screen looks like using this plugin.
Leave me a comment if you use this plugin or css method or if you have questions about either.
