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.
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!
3 Of The Best Web Editors For Mac
Most of us these days use a Mac, and they are pretty good in everything they do, there’s just one problem, it’s hard to find a decent free web editor for use on a Mac. Well, help is at hand! In this post I will show you 3 of the best web editors for this OS.
I personally use Amaya on my Mac, it’s one of the best web editing experiences I have ever had. In fact who needs Dreamweaver, when you’ve got Amaya? The editor doesn’t just act as a web editor, but also a web editor. Incudes WYSIWYG.
In my opinion, and the words of others KompoZer is also a good WYSIWYG editor, but personally – it’s not as good as Amaya. KompoZer is likely to be a favourite amongst those who where fans of the Nvu software package. They are both quite similar.
Aptana Studio is one of the most advanced web editors out there, it too is almost influenced by Dreamweaver, it’s hard to believe it is free!
New Theme : Super Awesome Red
Hello, I mentioned in earlier posts that I would now start developing themes for websites (prehaps even WordPress) – that’s why it’s been quiet round here recently.
This is my first theme that I will be posting to this website. So, what does the theme look like? Take a look below!
As you can see the theme has a nice basic layout. And in future releases of the theme, I will extend the features of the theme! So – what are you waiting for? Download now:
Make A CSS Circular Search Box
Well, It’s been a while since I last posted on this blog. (I swear – I’m gonna have to start posting more)! So in this post – I thought it was time I covered another HTML / CSS tutorial. In this post, I will show you how to make a circular search box for your site, just like the one below:
Screenshot taken from my theme: Super Awesome Red. Available soon on this blog!
So, it looks hard to make is it? No. All it is - a text box placed over an image (with margins – using CSS.)
So:
Step 1:
Download the image below – DONT CHANGE THE NAME!
Step 2:
Create a directory on your host (or computer), with this layout:
img – directory
index – html file
style – css file.
With the image above downloaded, save this to the img directory.
Step 3:
Create a CSS file with this code: (style.css)
#search{
float:right;
background-image:url(img/searchframe.png);
background-repeat:no-repeat;
background-position:center;
}
input.pink {
background-color: #FFF;
font-size: 17px;
font-family:Verdana;
color:#333;
border-color:#FFF;
border-width:thin;
border-style:none;
margin-left:45px;
margin-top:10px;
margin-bottom:10px;
margin-right:15px;
}
Step 4:
Now, it’s time to bring it all together in the html file (index.html):
<div id="search"> <input class="pink" type="text" name="T1" size="13"> </div>
And that will give you the final result! You can downlaod the files below:
