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!
iPhone Site (Part 1): CSS Style
In the first of this 2 part special series, we will be taking a look at how you can design a simple but quite pretty looking and fast loading iphone website. The good part about having a mobile website (moreover iPhone website) is that some of your visitors will want to access your site through a device such as an iPhone. And the last thing your visitors want is to find your page is too dynamic for mobile browsers, and therefore takes ages to load – due to the vast amount of ads, javascript and other memory-hogging objects crammed onto your page. So it’s a good idea to have a spacey mobile site.
In the first part of this tutorial, we will have a look at developing the required .css file for the mobile site, within the .css file will be the styling commands for our page.
Below is the code you’ll need for your .css file, cut-n-paste this, and scroll down the page for an explanation:
body{
background-color:#FFF;
font-family:Arial;
font-size:10px;
color:#000;
border-style:solid;
border-width:medium;
border-color:#036;
}
#headtitle{
background-color:#096;
height:95px;
color:#FFF;
font-size:8px;
padding:5px;
margin:0;
}
#headsub{
background-color:#069;
height:55px;
color:#CCC;
font-size:6px;
padding:5px;
margin:0;
}
#content{
width:100%;
}
#footercont{
background-color:#036;
height:35px;
color:#FFF;
font-size:5px;
padding:3px;
margin:0;
So, basically there is not much to explain here if you understand .css, all this basically does – like I said before – is define how the page should look when loaded in a mobile browser. The .css has been kept nice and simple for faster loading, so there are no “not really required” DIVs defined here.
In the next and final part of this series, I will show you the .html page that your mobile visitors will actually see. Stay tuned!
Update: here’s Part 2.
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!
Customise Your iPhone/iPod Touch Screen
Hello,
In the first part of this blog post, I will show you how to ‘shuffle’ your iPod Touch/iPhone home screen application icons. So to start turn on your device, and you should see the ‘main’ home screen (below) or the last screen you left your device viewing.
Then slide to the page you wish to re-shuffle.
By holding down on an app icon, you will notice all the icons ‘dance’ about, see above, small x’s will also appear above the ‘deletable’ apps. By holding and dragging an icon, you can re-shuffle the icon layout. You can’t delete the apps which came with your device (e.g. Safari).
Slide to the screen which holds the application you wish to delete, press and hold the icon, the icons will then shuffle about (see below).
Then press the ‘X’ in the top -left corner of the corresponding app icon. You will then see this message (as below):
Tap ‘Delete’ to delete the app, or ‘Cancel’ to leave as! If you decide to click delete, then you will be greeted with a message asking you to rate the app, you can skip this step by tapping ‘No Thanks’.
And you can exit ‘edit’ mode at any time by pressing the ‘Home Screen Button’ (The Circle Button With The Square.)
Enjoy!