Google came on really strong this week at IO. It has taken me several days to process all of the announcements and I am just starting to grok what happened. There was so much that I am going to approach it in several posts. My first post is Google TV.
First let me say that I knew about Google TV the night before the public announcement. I was playing the IO SCVNGR hunt and couldn’t find the barcode on the water fountain. I wandered upstairs and was told by a big security guard that the only water fountain on this floor was “that one over there.” I walked where he was pointing and found myself in the main hall where the keynote is. There on the screen in huge letters was “GOOGLE TV – TV meets web, web meets TV.” Yes, I blew the opportunity to snap a photo and send it to Techcrunch.
I don’t own a TV and hardly ever watch one. All of my media is consumed through my laptop, ipad, android devices, ipod touch, or good ole fashion book. I just don’t like TV. To me it is an offensive medium. The shows are sensational and lowest common denominator. The ads are obtrusive and irrelevant. The fact that you have to watch things on schedule is outdated. TV to me represents one of the last holdovers from the old age. The age of one to many.
The web on the other hand is like an infinite faceted jewel. It is something different to each person. Watch what you want when you want. Go from the mainstream hits all the way down the long tail to the super niche. Text, video, music, games, and data all mashed up into compelling web apps that are accessible 24 hours a day from your computer or mobile device.
TV has been waiting to be rethought. As Google pointed out during the keynote–television is a $70 billion a year advertising market. It’s the broadest market on earth. But like I said, the problem is that it’s lowest common denominator. You have to throw the largest net possible to scoop up as many people as possible. Enter Google TV.
Google TV’s interface is deceptively simple. It’s just a search box that drops down in a light-boxesque manner at the top of the screen. You type in a search term and it searches whats on tv right now – whats on tv in the future and whats on the web. Of course it uses a little AJAX to suggest terms from what you’ve typed in. During the keynote they typed in “Mother’s Day” and it suggested “Mothers Day MILF.” 
At this point I was still basically not interested. Like I said, I don’t watch TV. But then they started showing Android on TV and that is when the scales fell off of my eyes. The first thing they showed that was really interesting was pushing an app from a pc to the TV. They fired up the marketplace. Bought an app and told the app to be downloaded on the TV. In real time the TV started downloading the app. This is pretty cool.
Then they showed pushing a website from the pc to the mobile phone. They fired up the browser on the PC and went to a website. Then acting like it was time to leave they sent that exact site to the phone. In real time the browser opened on the phone with the website. That is also pretty cool.
Next they brought up a google map on the computer and pushed it out the the phone in real time. When you combine these three situations you have something that is extremely compelling.
Imagine being able to get an app and push it between your phone, your pc/mac, and your big screen tv. Also imagine surfing a website and pushing it between your phone, mac/pc, and TV. That is a very exciting situation. To top it off you have the entire Android platform built into the TV. This opens up the potential for an entirely new generation of applications that will be suited to that environment.
Android still very much has a UI issue when compared to the iPhone. It just isn’t as elegant. There aren’t the smooth animations between orientation changes. And the accelerometer only recognized 2 orientations compared to the iPhones 4. The marketplace was revamped but could still use a little polish. But all in all the Android platform has made some serious strides very quickly.
The Google TV announcement part of the keynote was one of the most uncomfortable I have ever seen. It was a total fail. All of the geeks in the crowd were slurping up the bandwidth and these poor guys couldn’t even get the thing to work properly. All the while there were 8 CEO’s backstage getting ready to come out and talk about how great it was. On top of this they had actual tv playing on the two huge screens on both sides of the stage. So we literally saw somebody bonging a beer on the evening news. Some news reports about child abuse and war. Stupid and offensive TV commercials. It was the epitome of evening american television and it seemed to go on forever. I truly felt bad for these guys.
But I can take a step back and look at the big picture and realize that this is the beginning of a big shift for television. TV now gets modern in a big way. It will also grow on an innovation rate with android now. And android is on fire. This is exciting.
Below are some pictures from the first day after party and keynote. Keep in mind this is before they gave us the EVO and my droid’s camera isn’t that great. And yes that is the actual IO podium
This year I attended the Maker Faire—an amazing gathering of makers of all things creative and eccentric. This is a place where hardware hackers meet with art car builders with a small dose of model battleship enthusiasts thrown in for variety. I have never witnessed a gathering of this kind and can only say that if you have kids this is a MUST ATTEND.
The Maker Faire gave me a good chance to test out the camera on the new HTC EVO that Google gave me a couple of days ago. All in all the 8 megapixel camera is really nice and I think the pictures turned out great.
No tags
Recently I had my DNA genotyped. I have been wanting to do this for years and had the chance to do it with a company that I have been interested in and decided to take the chance. I opted to have my ancestry and my disease predisposition made known to me and have decided to post the results into the public.
“BUT WAIT!” I hear you screaming. “Isn’t this important private information? Won’t this affect what medical insurance you can get? Isn’t this revealing too much about yourself?” Possibly, in fact probably. But I am doing this to underscore a point about my life. My life is an open book. I have mentioned before my passions (the web, uplifting the human condition, art & music). I have mentioned before my triumphs (family, job, life). And I have mentioned my great failures (drug related criminal record, drug use as a young adult). Everything about me is public. I have no secrets to hide from you as you have no secrets to hide from me.
I also had my DNA genotyped and am sharing the information because I am on a quest of self discovery. Both figuratively and quite literaly. It is my hope that this information brings me further along that quest. It is also my hope that by revealing such intimate information about myself that I inspire you to consider opening up information about yourself. After all – we live in public.
No tags
26
“Multi-page” form using jQuery
2 Comments · Posted by admin in HTML5, Tutorial, Web Applications
Often when creating a large form there is the desire to break it up into multiple “pages” to make it easier for the user to fill out. The more advanced web designer might use AJAX for this but what if you don’t understand AJAX? Using jQuery you can create the effect of an AJAX form that goes to a new “page” when the user clicks the “next” button. We’ll call it “AJAXish” This “AJAXish” method takes advantage of 4 of jQuery’s methods—addClass(), removeClass(), click(), & html().
jQuery is an amazing javascript library. It takes alot of the cross browser headaches out of working with javascript. The jQuery API is the most simple thing I have read since my HTML/CSS 101 class. You simply use a CSS Selector to grab any element. Ex: $(‘.myclass’) And then you do something with it. Ex: $(‘myclass’).click();
If you are doing web development and you aren’t using jQuery I highly recommend you check it out and see what your missing.
To work with jQuery simply include this link of code in the <head></head> section of your HTML.:
<script type=”text/javascript” src=”http://www.google.com/jsapi“></script>
<script>google.load(“jquery”, “1.3.2″);</script>
This points to the jQuery library that is hosted on Google Code. I personally use the version of jQuery that is hosted on Google for 2 reasons.
1. I trust that Google will always keep an up to date version at this URL.
2. Since my websites get millions of hits a day (yeah right) I like to save a small amount of bandwidth by passing the buck to the King of the Cloud Google.
So to start out open your text editor and put in the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
<title>AJAXish</title>
<script src=”http://www.google.com/jsapi“></script>
</head>
<body>
</body>
</html>
Save the file as ajaxish.php
Note that this html uses the HTML5 doctype, charset attribute, and lack of type=”text/javascript” on the script element. So clean, so beautiful.
Let’s take a quick break and get to know our friendly methods() that will make this AJAXish magik possible:
- addClass() – This method allows you to add one or more space seperated class names. So basically you can define a class or two in your css and then with this method add them to any element in your markup. It’s important to note that this method merely adds a class to the existing class (if any). Remember that in html you can have multiple class names.
- removeClass() – This is the counterpart of the above method. It allows you to remove one, multiple, or even all classes from an element.
- html() – The html() method, when called with no arguments, gets any descending html from the element that the method was called on. When passed with an argument the html() method sets descending elements with the passed argument.
- click() – You can call this method on any element with a bit of code to execute when that element is clicked. Extremely useful
That’s it. 4 simple methods that will give our form a more advanced look and feel.
Now create a simple form.
<form action=”validation.php” method=”post” name=”ajaxish” id=”ajaxish”>
<div id=”first”>
<p>
<input type=”text” id=”fname” name=”fname”> First Name:
</p>
<p>
<input type=”text” id=”lname” name=”lname”> Last Name:
</p>
<p>
<input type=”text” id=”street” name=”street”> Street Address:
</p>
<div>
<a id=”next1″ href=”#”><img src=”images/continue.gif” alt=”next button”></a>
</div><!–end of next-button div–>
</div><!–end of first div–>
<div id=”second”>
<p>
<select>
<option value=”html”>HTML</option>
<option value=”css”>CSS</option>
<option value=”scripting”>Scripting</option>
</select> Type of work required:
</p>
<p> Budget<br>
<input type=”radio” value=”999″ name=”budget”> Less than $1000<br>
<input type=”radio” value=”1000″ name=”budget”> Less than $10000<br>
<input type=”radio” value=”10000″ name=”budget”> More than $10000<br>
</p>
<p>Select all that apply:<br>
<input type=”checkbox” name=”option1″ value=”option1″> I have a design already<br>
<input type=”checkbox” name=”option2″ value=”option2″> I have a domain already<br>
<input type=”checkbox” name=”option3″ value=”option3″> I have a logo already<br>
</p>
<div>
<a id=”back1″ href=”#”><img src=”images/back.gif” alt=”back button”></a>
<a id=”next2″ href=”#”><img src=”images/continue.gif” alt=”next button”></a>
</div><!–end of next-button div–>
</div><!–end of second div–>
<div id=”third”>
<p>Feedback:<br>
<textarea rows=”10″ cols=”30″ id=”feedback” name=”feedback”></textarea>
</p>
<div>
<a id=”back2″ href=”#”><img src=”images/back.gif” alt=”back button”></a>
<input type=”submit” name=”submit” id=”submit” value=”submit”>
</div><!–end of next-button div–>
</div><!–end of third div–>
</form>
I have included several different types of input controls including:
- text
- select
- radio
- checkbox
- textarea
Notice that I broke the form up into 3 different divs—one, two, & three. This will allow me use jquery to display these parts of the form one at a time. Also notice that I put a next button in the first div and a next and back button in the second and third divs as well as a submit button in the third div.
Now using Illustrator (or any other graphic program) create an a set of 3 images that will be shown at each respective stage of the process.
also create a back and continue button for the user to click on.
With this complete all that we need to do is add the jQuery.
jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event:
$(document).ready(function(){
// put your code here
}); // end of $(
Simply put your jQuery code where you see “// put your code here” and you will be fine.
Now keep in mind that what we are going to be doing is making a part of the form display while another part of the form doesn’t display and vice versa. To do this first define a couple of CSS styles:
.display-none{
display:none;
}
.block{
display:block;
}
The first class is called display-none and it does exactly that. It tells any element that it is applied to to not be displayed. The second class is called block. It tells any element that it is applied to to be displayed like a block level element. These are the two classes that we will add and remove with jquery. Also add class=”display-none” to the second and third div of the form. This will make them not show initially.
Now behold the beauty of jQuery.
Within the jQuery ready event
$(document).ready(function(){
// put your code here
});
place this code:
$(‘a#next1′).click(function(){
$(‘div#first’).removeClass(‘block’).addClass(‘display-none’);
$(‘div#second’).removeClass(‘display-none’).addClass(‘block’);
$(’span#formsteps’).html(‘<img src=”images/formsteps2.gif” alt=”form steps 2″>’);
});// of click(
Here’s what is going on:
1. I am grabbing an anchor with an id of “next1″ and giving it a .click(). That says to run the next bit of code whenever the a#next1 is clicked.
2. If and when a#next1 is clicked I am grabbing a div with an id of “first” and removing the class of “block” and then adding a class of “display-none”.
3. Also I am grabbing a div with an id of “second” and removing a class called “display-none” and adding a class called “block”
4. Finally, I am grabbing a span with an id of “formsteps” and changing its descending HTML to be an image element. This image is the step two image that we created earlier.
This first bit of jQuery demonstrates two interesting points.
1. The jQuery methods are extremely simple and obviously named. They do what you think they are gonna do by what they are called.
2. You can “chain” jQuery methods together. Notice how I first call a removeClass(‘block’), then “chain” an addClass() method onto it:
Ex removeClass(‘block’).addClass(‘display-none’)
This bit of code will allow you to hide the first part of the form and reveal the second part of the form when the user clicks the continue button. In case the user wants to go back you add the following code:
$(‘a#back1′).click(function(){
$(‘div#first’).removeClass(‘display-none’).addClass(‘block’);
$(‘div#second’).removeClass(‘block’).addClass(‘display-none’);
$(’span#formsteps’).html(‘<img src=”images/formsteps1.gif” alt=”form steps 1″>’);
});// of click(
This code is very similar to the bit of jQuery that we have already used. Here is what is going on:
1. I am grabbing an anchor with an id of “back1″ and telling it to run the next bit of code if and when it is clicked on.
2. If the anchor is clicked I grab div#first and remove the class of “display-none” and add the class of “block”
3. I then grab the div#second and remove the class of “block” and add a class of “display-none”
4. Finally, I grab span#formsteps and change its descending HTML to be the first step image.
This allows the user to go back to the initial page if she/he has decided they would like to change some information about themselves.
Remember that there were 3 parts to the form. So you are going to need to copy and paste the two bits of jQuery we have so far and change a small bit.
$(‘a#next2′).click(function(){
$(‘div#second’).removeClass(‘block’).addClass(‘display-none’);
$(‘div#third’).removeClass(‘display-none’).addClass(‘block’);
$(‘#formsteps’).html(‘<img src=”images/formsteps3.gif” alt=”form steps 3″>’);
});// of click(
$(‘a#back2′).click(function(){
$(‘div#second’).removeClass(‘display-none’).addClass(‘block’);
$(‘div#third’).removeClass(‘block’).addClass(‘display-none’);
$(‘#formsteps’).html(‘<img src=”images/formsteps2.gif” alt=”form steps 2″>’);
});// of click(
}); // end of $(
This code is the same as before except I have changed the anchors that i am grabbing to the ones in the second part of the form. And I also changed the links to the images.
And that is it. Put it all together and you have a form that is broken up into 3 parts. Of course you can customize the form to however you need it to be. The point to take away is that you can use jQuery to easily add and remove classes as well as set HTML. This allows you to add basic funtionality to a form that gives it a more professional look and feel.
Here is a live example of a 3 part jQuery form
No tags
25
My thoughts regarding the Facebook F8 announcments:
2 Comments · Posted by admin in Facebook, Google, Meme
where to even begin….
On a macro note I think this is the beginning of Facebook really really coming into focus on whatever it is ultimately going to become. Attempting to tackle the semantic web is huge and they are taking a very unique and untried approach. There team is waaay smart and they obviously get the web.
On a micro note my suspicion is that the simple gesture of “liking” something will be really natural and nonchalant. I already “like” things often in Google Buzz. I haven’t looked too closely at the API but there were emails going around today on the HTML5 working group mailing list mentioning that it is based on RDFa. I superficially understand RDF (subject-object-predicate expressions. lame examples: Carlos is 29 or Carlos Cardona has the initials CC). I think I got off point..
On the flip side there are the usual privacy concerns. From what I understand the Open Graph is opt-out. So we will see what unfolds there.
Also I thought it was interesting how Bret Taylor, the engineer who came to facebook with the friendfeed acquisition, played such an important role in the keynote and afterward press session. It seemed like he was #2, which surprised me.
Finally, for a brief moment I wondered if this company wasn’t going to be as big as google in 5 years. Which of course is the cliche and meme going around the web today, but I really did ask myself that.
But I kinda forsee one problem. The link that google reverse engineered, the <a href=”">hyperlink</a>, is fundamental to the web. It’s just natural to link from one document to another, hence the web’s creation, growth, ubitquity, etc. The current web is overwhelmingly a link economy. I don’t know that “liking” things will be as natural or ubiquitous as a hyperlink. It’s not that I doubt that it can be. It’s just that I don’t know if it will have the pervasiveness of <a href=”"></a>.
Double finally, I don’t think it’s a great idea that only one company has control of the semantic web. OpenLike much?
Your thoughts?
No tags
I’ve been thinking how time is the ultimate scarcity economy. There is only so much time in a day. I only have so many years before I die. I only have so much attention to spread around and everyday there is too much new stuff to know and learn. Time is the ultimate scarcity economy
That is why it is so hard to get people to try new things. They too, whether they realize it or not, at least sense that they have a finite amount of time to do things and an infinite variety of choice.
You might say, “What if you could live forever or at least extend your life?” That doesn’t solve the problem because the longer you live the more stuff there is going to be to occupy your attention. It’s not as if you live long enough you will be able to see and know all things.
“But what if you could slow down time and experience everything in every moment before moving on to the next moment?” That doesn’t seem to work because a crucial part of living and experiencing is flowing in time with those around us.
It might just be that time really is the ultimate scarcity economy. Theres only so much time to go around. Don’t waste your time.
No tags
13
spotbright.org—Focusing the world’s awareness and attention
1 Comment · Posted by admin in HTML5, Mobile, spotbright
Recently I have been thinking of ways to use the ubiquity of the web for positive benefit. One idea I had was for a site that allows anyone to report inhumane or ecologically unsound acts by describing and geo/date tagging them. A Yelp of social, ecological, or human rights violations if you will. With the help of a good friend Steve Gabrio I created spotbright.org
The concept behind spotbright.org is extremely straightforward. Everyday people all around the world are lied to, stolen from, or generally oppressed in some other manner. These people are often economically and technologically challenged and have no way to tell the world about what happened. They have no digital voice.
At the same time the planet is being damaged beyond repair in the name of immediate profit and gratification. There are people who witness this damage first hand but are afraid to speak out for fear of personal safety. They have no easy way to quickly document and anonymously report this. They have no digital voice.
spotbright.org changes that. It allows you to anonymously (or not) document something you witness by tagging it with the date and time, your longitude and latitude, and a description. And it is extremely quick and easy to use.
Simply go to spotbright.org and immediately spotbright will use HTML5 to grab your geolocation. This is an entirely opt in procedure and spotbright will not be able to grab your latitude and longitude unless you agree. If you agree you will see a form that has 4 simple inputs fields.
1. First Name (Optional)
2. Last Name (Optional)
3. Email (Optional)
4. Description
You will also notice that along with your latitude and longitude the date and time have been generated. Now fill out the form and press submit and you are done. You have shined a spotbright on the situation. Your post will become the latest on the spotbright stream—a reverse chronological list of all the spotbright posts.
The purpose of spotbright is to focus the worlds attention and awareness and to start conversations. That being said we have decided to take a novel approach with spotbright by not providing any commenting or blogging features. Each spotbright post in the stream will have a permalink. This will be a unique URL that displays just that post. There will be no way to comment on the post. There is no one to friend or follow. There is no account to sign up for. There is only the stream and individual posts.
We recognize that there are a plethora of blogging and social media tools out there and hope to leverage their existing infrastructure. In other words—we want you to talk about spotbright on your blog! Not to stroke our egos. Its just that spotbright is the kind of service that will be most effective when shared between friends.
spotbright being an HTML5 thing it can only get your longitude and latitude if you are using a browser or phone that supports HTML5 geolocation. That means firefox on a PC or Mac. Or an iPhone/iPod/iPad or an android device. Currently spotbright is entirely text based. We will be adding the ability to add images, audio, and video very soon.
To sum up—I created spotbright.org so that people who would otherwise have nowhere to report ecological or human rights violations could do so quickly, easily, and anonymously. My hope is that this tool will embolden people to speak out, document, and bring to light situations that can then cause those responsible to be held accountable.
Each person or group has a different view of what is acceptable behavior and what is worth doing something about. spotbright.org hopes to be the digital voice of those who are oppressed that communicates with those who are in a position to help.
No tags
One of the great things about the iPad is the iBooks app. There are over 60,000 books to choose from with over 30,000 free books from the Gutenberg Project. So while there are thousands of blog posts about how great it is to read on an iPad what most people don’t realize is that the iPad comes with a built in text to speech reader. So now it’ possible to have all of those 30,000 classic works read to you.
This morning I downloaded Gulliver’s Travels and have already listened to over half of it. Below are the steps to take advantage of text to speech on the iPad.
Step 1 Open the Settings
Similar to a Mac or an iPhone/iPod Touch, the iPad has a Settings section where you can handle app specific and system wide preferences.
Step 2 Choose General Settings
The left hand column has list items for all of the different parts of the iPad. Choose General
Step 3 Click Accessibility
The “General” settings will appear on your right. At the bottom of the “General” setting is an Accessibility button. Click it.
Step 4 Triple Click Home
iPad, like the iPhone and iPod touch, only has one physical button on the front face. This button is called the “Home Button.” The iPad has a very interesting convention called “Triple Click Home.” This allows you to assign a behavior to a triple click of the Home Button. Click the “Triple-click Home” button located at the bottom right of the right hand “Accessibility” column.
Step 5 Toggle VoiceOver
The right hand column will now have 3 options. You want to choose “Toggle VoiceOver.” VoiceOver is an amazing accessibility feature that is built into the iPad. A voice will speak any part of the screen that you touch. It changes the interface slightly because you will need to double click to access apps or press buttons (because the first click speaks what you are clicking) but it is extremely useful for making the iPad accessible to blind or poor sighted people.
Choosing “Toggle VoiceOver” allows you to marry this feature to the Triple-click Home behavior.
Step 6 Double Swipe
Ok, that was the “hard part.” Now open your iBook app and choose the book you want to listen to. Make sure that the iPad speaker is turned on. Find the place in the book that you would like to begin and then click your Home Button 3 times rapidly. You should hear a voice confirm that VoiceOver is active.
Now touch the sentence where you would like to begin and then with two fingers swipe downwards. The iPad should begin reading your book out loud! It will continue reading from cover to cover.
There you have it. To turn off the VoiceOver feature click the Home Button 3 times rapidly. Keep in Mind that the iPad comes with access to 30,000 free books. Enjoy!
No tags
6
iPad Portrait and Landscape CSS Tutorial
3 Comments · Posted by admin in HTML5, Mobile, Tutorial, iPad
Similar to the iPhone, the iPad has both a portrait and landscape mode. Portrait mode is when the device is taller than it is wider. Landscape mode is when it is wider than it is taller.
Conveniently enough the iPad supports
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”css/portrait.css”>
&
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”css/landscape.css”>
With these two simple tags you can serve the ipad appropriate style tweaks for whichever orientation the user happens to be looking at your site or app in.
To understand what I mean check out this example of the iPad portrait and landscape orientation. If you have an ipod hold it in portrait and then landscape mode and you will see what looks like two different web pages.
In portrait orientation the website looks like this:
In landscape orientation the website looks like this:
Although this appears to be two different pages it is actually one small bit of html that is served a different css file depending on which way the iPad is being held.
The HTML code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iPad Portrait and Landscape CSS tutorial</title>
<style>
#container{
width:55%;
margin:0 auto;
}
#header{
width:33%;
margin:0 auto;
}
</style><link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="css/landscape.css">
</head>
<body>
<div id="container">
<div id="header">
<h1 class="portrait">
Portrait
</h1>
<h1 class="landscape">
Landscape
</h1>
</div><!--end of header div-->
<div id="image">
<img class="landscape" src="images/landscape.jpg" alt="landscape">
<img class="portrait" src="images/portrait.jpg" alt="portrait">
</div><!--end of image div-->
</div><!--end of container div-->
</body>
</html>
The landscape.css file looks like the following:
.portrait{
display:none;
}
html{
background-color:#f6cf74;
}
And the portrait.css file looks like this:
.landscape{
display:none;
}
html{
background-color:#a06346;
}
This code simply says “What way are you holding your iPad? Ok, I will serve you code for that orientation. The code that is served uses CSS display:none to hide the unappropriate elements.
If you don’t have an iPad and want to see this work you can simply shrink the size of your browser until it is either wider than taller or vice versa.
more information:
http://mislav.uniqpath.com/2010/04/targeted-css/
http://www.cloudfour.com/ipad-orientation-css/
No tags
6
Using desktop safari to see what your website looks like on the iPad
2 Comments · Posted by admin in HTML5, Mobile, Web Applications, iPad
Earlier today Mashable posted an article on a site that supposedly allowed you to see what your site looked like on the iPad. This claim was quickly shot down by another blog that tested their site on an actual iPad and found more than a few differences. I think we can all agree that there is gonna be a rush to format webpages to look and interact great with an iPad similar to all of the iPhone optimized sites out there. Luckily Apple provides us with a quasi-simple method of actually seeing what our website would look like without relying on any third party hacks.
Step 1 Let’s go on a Safari
First and foremost you are gonna have to agree to play by Apple’s rules which means that you need to use the Safari browser for this to work. But that’s not so bad. Safari is a pretty great browser when it comes to cutting edge standards support and a blazing fast rendering engine. If you don’t have Safari already you can download it here. It is completely free, works on a mac or pc, and takes about 3 minutes to download and install. I’ll wait…
Step 2 User Agent String
In web world the “User Agent” is a fancy word for your browser. You know, firefox, chrome, or in this case Safari. Safari is the user agent. Each user agent has a way to identify it called a user agent string. The iPad’s user agent string is:
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
Wah!? Don’t worry, you won’t need to memorize it or anything. You simply need to copy and paste it in the next step.
Step 3 HTTP Request
By now you should have safari running. Load the website you wish to see through the lens of an iPad. I recommend gmail.com – who recently launched an HTML5 iPad version of their popular email site. This site gives you a great sense of the new 2 column layout that is so prevalent in many of the iPad apps like the Wolfram Alpha app below.
Next, open Safari’s Advanced Preference pane. Check the checkbox next to “Show Develop menu in menu bar.”
After this from the drop-down menu select Develop -> User Agent -> Other You will see a prompt that says “Type a custom user agent string for this page” like the picture below. Copy the iPad user agent string from above and paste in it into the dialog box that appears.
Step 4 Done
When you click ok your page will reload. If prompted verify that you are NOT serving ipad the mobile version of your site. You should now see what your site looks like on the iPad. To confirm that this works check out gmail to see the iPad specific 2 column layout. Keep in mind that this user agent string setting persists on a per-window basis.
I hope that this helps those of you out there who don’t have an iPad (yet) to get an accurate picture of what your site looks like on this great new device. For more info on how to prepare your website for the iPad check out this great material from apple (where I got the information for this post and more) and please check back to this blog.
No tags
