The HTML
]]>
Before we talk about actually getting into the first 10 listings in Google, I think we need to first cover some exceedingly important ground.
You see, if you optimize the wrong keywords, you will likely never see results. It does you absolutely no good to become the number one ranked site for search terms people aren’t using much.
Personally, I really like Overture’s Search Term Suggestion Tool for figuring this kind of stuff out. I’m also very ambitious. To me, when I go after something, I want to go after something big. Maybe it’s just plain greed — or heck, maybe just plain laziness, but either way, I want to hit the top of something worth being at the top of.
So, I don’t start with that tool. Instead, I first head on over to Word Tracker and get their completely free keyword report. It’ll tell you what the absolutely most searched-for terms are.
I’m not interested in adult keywords, so I get the “adult filtered” version of the report. Taking a look at this, I see that “dogs” is the 43rd most searched-for thing on the planet.
Now that I have some idea of what I want, I take a look at Overture’s Search Term Suggestion Tool. At this point, if you’re smart, you do not try to become one of the top ranked sites for “dog” or “dogs.” At 1,072,295 searches, this is going to be an exceedingly competitive and cutthroat term to try to break in with.
Besides, there are easier ways to “crack” these difficult terms (which we’ll get into later in the series). If you scroll down a little, you’ll see that ”dog training” gets a whopping 109,510 searches. I realize that’s only a little more than 10 percent of the biggie term “dog”, but one hundred thousand searches a month is nothing to sneeze at. Especially when you figure that Google will get roughly eight times that number of searches. That takes you to very close to the one million searches a month mark.
Now that’s a market worth some time!
]]>In all the previous versions of HTML, developers have had no real control over the information that users were providing. It made no difference if a web form was asking for a date, a time or some combination of the two; it was always just a simple input element which rendered in the form of a text box. If you wanted to validate the information coming from the user you had the either do it on the client side with JavaScript or process it on the server side with a server-side technology like PHP or ASP.NET. What HTML5 has done with time and date input is to restrict the selections so that developers can always be assured that the data that is being sent is a valid date and/or time.
The Type Attribute
The behavior and presentation of the input element is controlled by the type attribute. Simply put, the job of the type attribute is to let the browser know what type of information is being expected for an input element. The browser then takes the type classification and decides how to present the input element (e.g. a date picker calendar, a text box for time with buttons, etc.) and how to validate, when applicable, the information that is provided by the user.
date, datetime, datetime-local, month, time, week types
date
This will likely be the most commonly used type of the date and time types. It allows the user to input or select a simple date. The value that is returned is the international standard with year-month-day, e.g. 2011-12-14.
]]>
Screen Resolution
1024×768 pixel resolution (9.7-inch (diagonal))
This is as big as a normal computer screen. According to the Analytics stats for this Web Development Blog, 10.47% of the total visitors have 1024×768 pixel resolution.
User Agent String
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
This is useful if you have a device detection script on your server that redirects mobile devices to a different website. For example, since iPad doesn’t support Flash, if you have a flash website, it is a good idea to redirect iPad visitors to the HTML version of the website.
CSS for iPad
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="ipad.css" type="text/css" /><link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
As with optimising websites for iPhone, you can specify a CSS file just for iPad devices. You can also have different CSS for Portrait and Landscape orientations without using Javascript. This is useful if you want to hide certain elements (for example, sidebar) on Portrait orientation.
HTML 5 and CSS3
iPad supports HTML 5 and CSS3 so you can go crazy with box-shadows, text-shadows, border-radius, multiple backgrounds, video, canvas and geolocation features on your iPad friendly website.
JavaScript
As with iPhone, Javascript is supported on iPad. This will enable your iPad friendly website to have web 2.0 features, AJAX, dynamic content, and animation effects. If you are looking for a good Javascript Framework to use, check out jQTouch which is a jQuery plugin for mobile web development.
Flash
Neither iPad nor iPhone supports Flash. And Steve Jobs has made it pretty clear that he has no intention of supporting Flash in the near future.
Viewport
<meta name="viewport" content="width=device-width" />
Use a constant width for viewport rather than a fixed pixel width. Similarly, when it comes to layout design, consider Fluid width rather than Fixed width design.
Touch not click
This is something to bear in mind when designing websites for iPad and iPhone. They are both touch devices and not point and click, so make sure there is enough padding between links (eg: Navigation items) and buttons are large enough to be clicked touched on.
iPad Friendly Website ≠ Mobile Friendly Website
With iPhone, you can simply redirect to your existing Mobile version of the website for iPhone users, but you can’t do the same for iPad. iPad screen resolution is many times bigger than a normal mobile screen, hence, there will be a lot of whitespace when you view a mobile friendly website on an iPad. For this reason, it is sometimes better to serve the same version of the web friendly website to iPad devices rather than redirecting them to the mobile version of the website which is designed for small screens. And according to Apple, Safari on iPad is capable of delivering a “desktop” web experience.
Preview
If you want to check out how your website would look in iPad without an actual iPad device, open this Simulator in Safari browser and type in the address of the website you wish to view in the address bar on the iPad image (not the browser address bar). You can click on the top left corner of the iPad image to switch between Landscape and Portrait mode.