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.
Get Users To Interact With Your Blog!
Well, these gaps between my posts are getting larger aren’t they? It’s time to start posting more! So – in this post I’ll be looking at the different methods to get visitors more involved with your blog, this will range from plugins to things you can do yourself.
Meebo Bar: Ah, yes the Meebo bar deserves alot of attention! There are alot of social bars out there for your blog, from bars like Wibiya to ones you make yourself, but none seem to compliment your blog/site/whatever like Meebo does. So what’s all the fuss about? Well, like any other bar it floats at the bottom of the screen. BUT: hover over an image in your post, and down flies a ‘dock’ of social networking icons, enabling visitors to share this image with others. Also, from the Admin dashboard – you can also insert items such as your recent Facebook Page Activity, and ‘Like’ this post capabilities. The meebo bar is available from: http://bar.meebo.com/
Reward Your Visitors: Let’s face it – you and I are in this for the freebies, yep? Nothing beats going to a webpage to find that you can enter some sort of competition for free, and win a prize – no matter how big or small, nothing beats it! So, isn’t it a good idea to focus around this on your blog? A few months back, I held a comment competition, here I selected one random commenter from any of my posts to win a prize (vouchers), the uptake was amazing, try for yourself and see!
Be Personal: (In the clean sense!) Talk to your visitors, engage your visitors in the conversation – and let them express themselves via the comment section! As you will see at the bottom of this post I will ask all visitors to share their ideas in the comment form on how to engage visitors in your site. By directly asking visitors a question, increases the likelihood of your visitors dropping a comment on the post. Kerching!
So, have you got your own method that you use? I invite you to share it below… Everyone would be so grateful!
8 Free Social Networking Icons
In this post, I attatch 8 social networking icons, that you can save individually and use on your own site/blog for free. Enjoy!
Just a note: In the process of making these icons, I did not use any copyrighted images, all aspects of the icons were made myself.
5 Of The Best Ways To Increase Your Alexa Page Rank
Install the Alexa toolbar or Firefox’s SearchStatus extension – why? Well, it appears that Alexa ranks are dependant on who visits your website with the Alexa toolbar installed or the Firefox alternative.
Encourage visitors to use the Alexa toolbar, you can do this through jQuery pop-ups, banners – however you want, just encourage, encrouage, encourage your visitors to install that toolbar! It will make all the difference!
Use Alexa redirects on your website URL. Do this: http://redirect.alexa.com/redirect?www.mysite.com . Replace ‘www.mysite.com’ with the www. address of your site. So what effect does this have? Well, if you leave this URL in blog comments, forum posts etc. This directly increases your rank, regardles of whether or not the visitor has the toolbar.
Flaunt Your Address in sites like forums, blogs, and other popular sites – in summary, wherever you think you can get your site name and address, get it in there! But be cautious not to start spamming.
Blog About SEO and SEO related content, such as Alexa – this is one of the things that gets webmasters hyped up! They love to hear about it! So obviously they will read about it, meaning better rank for you!