iPhone Site (Part 2): HTML
Assuming you have already seen Part 1 of this series, in the Final Part (2) we will take a look at actually delivering the mobile site to the visitor – this like any other desktop site can be done through good ol’ HTML.
Take a look (and cut’n'paste) the below code into a new html file (in the same directory as your style.css created in the first part of the tutorial). For the purpose of this tutorial – I’ve called my file index.html
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no"> <title>My Example Mobile Site</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="headtitle"> <p>My Example Site</p> </div> <div id="headsub"> <p>Tagline</p> </div> <div id="content" style="overflow:hidden"> <p>This is my mobile site, hard to believe it is so small on a normal browser, but in a mobile browser for iphone, it fits to screen and looks perfect!</p> </div> <div id="footercont"> <p>© 2010, MyTutorialz</p> </div> </body> </html>
I shouldn’t need to explain the code above if you already know about HTML, but hang in there – what about this line?
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
This line of code simply scales the content of the page to fit to the screen. So in a desktop browser, the page will normally look like this:
But in a iPhone browser, the content will fit to screen, and the text will also scale to be bigger. The code also stops viewers of the site from using their fingers to zoom in.
Go have some fun creating mobile sites! If you need any help, drop a line below!
3 Essential Plugins To Mobilize Your Blog
In this post I will show you 3 of the best plugins and themes for use with your WordPress blog, to enable your visitors to view your blog in a stylish and mobile-friendly theme.
WPTouch
Download: Here
One of the things I love about WPTouch is the fact that it runs and looks just like a native iPhone app, just take a look at the styles and the AJAX coding in the plugin – you can’t fail to notice that it looks like a wep-app – on the plus side – it’s an awesome experience and admin interface!
WordPress Mobile Edition
Download: Here
WordPress Mobile Edition was a plugin that I previously used on this blog before WPTouch. The main reason I changed was because, well – it just wasn’t right for me – as much as the author’s try to make it look like an iPhone app, it does (sort of) but on the whole it just doesn’t – and as a result it looks terribly dull and a bit of an eyesore.
WordPress Mobile Pack
Download: Here
And my final choice of plugins to mobilize your blog is a plugin known as ‘WordPress Mobile Pack’ – it’s a nifty plugin, mainly because it comes with a fine selection of pre-installed themes, and a really comprehensive admin panel!