Why You Need A Mobile Web Site NOW

The use of mobile phones for accessing the Internet is exploding. Did you know you need a separate web site for these phones to access? If you assume your normal web site will suffice, you are going to leave a ton of money on the table.

First of All, the Hard Data

On May 14, 2007,  Telephia and comScore announced the results of their latest study of mobile vs. PC-based Internet usage. The study reveals that 30 million (or 19 percent) of the 159 million U.S. PC Web users of age 15 or older accessed the Web from a mobile device during the same month.

Secondly, the Reasons Why Web Access from Mobile Phones is Growing

There are several reasons for accessing the Internet from mobile phones.

• One is that search engines are providing more information than ever before about the street addresses and phone numbers of local establishments. This information comes in really handy when you’re driving.

  For instance, if you are driving down Madison Avenue in Manhattan wondering where the nearest Pizza Hut is, you just access Google Maps or Yahoo Maps on your cell phone and type “Pizza Hut Madison Avenue NYC” . Bam, the search engine sends you back a list of the Pizza Huts on Madison Avenue with their street addresses and phone numbers. Clicking on one of them brings back driving directions and the phone number. Click on the phone number and your mobile calls the restaurant. Veggie delight anyone?

  In a similar manner you can find where the nearest hotels, restaurants or stores are. Or maybe a specific office where you are due for a meeting. You will probably also want driving directions and data on the weather on the way.

• Also, an increasing number of web services are being made cell-phone friendly.. banking and downloading your email automatically (as soon as a message comes in) are examples ( Gmail has a program that you download into your phone to get your Gmail on the fly).
• Apple’s Iphone is hitting the market on June 29, 2007, and 10 million Iphones are expected to have sold by the end of 2008. The Iphone features a very easy-to-use web browser which will result in millions of new mobile phone-based web surfers.

Non-Apple cell phones are also becoming radically more web-enabled: user-friendly browsers, such as Microsoft’s Deepfish and Yahoo’s Yahoo Go!, are being released for them.

The net result is that surfing the web from your cell phone will no longer be as difficult as writing a book on quantum physics, and there are going to be a flood of new people doing it.

• Google is going to drastically lower the costs of mobile surfing. According to TechCrunch, Google is going to become a mobile phone operator in the UK along with mobile phone company O2, and offer cheap handsets preloaded with various Google mobile applications like Google Maps. Google’s CEO Eric Schmidt is even talking about making mobile phone usage… free (of course this means your cell phone would be like a free newspaper, the kind filled with just ads).

Your business’ future could well be very dependent on your having a mobile web site.

Give it serious thought: it might deserve one of the top spots on your to-do list!

Technorati Tags: mobile web, web design

XHTML and CSS from Photoshop

By R Kamalathasan
Edited by Lucky Balaraman

You have a magic lamp in your hands, you rub it, and a genie emanates from the spout.

You to the Genie: I’m an experienced Photoshop user… my wish is that I should be able to program a web page in XHTML and CSS without being adept in these languages and without outsourcing the task. Can you deliver, Genie?

Genie to You: Your wish is granted, oh Mighty User!

***

What the Genie was talking about is SiteGrinder,  a plugin for Photoshop that creates valid XHTML code and CSS code from a web page you design in Photoshop. Here’s an overview of the program:

Firstly, using Photoshop alone to create a web page will be as tedious as walking 200 kilometers without food, water or shoes. It involves slicing the image, exporting it to HTML and creating the other pages using an alternate web authoring program.

Added to that, if you need to change the design of the page later, it will be as tedious as catching a fish, throwing it back into the water and trying to catch it again. You would also need expertise in HTML and CSS to work with the fish. But what if you don’t know HTML or CSS?? Are you doomed to a fishless existence?

Absolutely not! With SiteGrinder, you don’t need to be a PhD in HTML and CSS, you don’t have to slice your images up and you don’t need to create code for rollovers or popups. You merely have to perform a few simple steps in Photoshop to make your page SiteGrinder-ready.

To prepare a Photoshop web page for SiteGrinder, all you have to do is assign an independent layer to each element in the document. You should append a suffix (a “hint”) preceded by a hyphen to the layer name to describe the nature of the element to SiteGrinder.

For example, if a text layer in Photoshop contains the text “About Us”, and the name of the layer is ‘About Us - button’, SiteGrinder will understand that the text ‘About Us’ is a button link and convert it to XHTML accordingly.

In this way, you can create all the pages of your web site in Photoshop, and transform them into an integrated XHTML and CSS web site with a single click. Is that a miracle or what?

SiteGrinder comes with abundant help files including detailed video tutorials. Everything is explained, especially the 35 hints (which comprise a feature unique to SiteGrinder and not commonly known).

CONCLUSION:

I have exercised the basic commands of SiteGrinder (hence my terming of this article an “overview”) and have not found any drawbacks so far. I am convinced beyond a doubt that this tool will definitely save a web developer an incredible amount of time.

It’s certainly worth giving SiteGrinder a try — explore the capabilities yourself: in all probability you’ll be delighted!

You can download a trial version from their site here. (not an affiliate link).

You can download a trial version of Photoshop here (not an affiliate link).

Good luck with SiteGrinder, and come back with comments on your experience!

Technorati Tags: photoshop, css, xhtml, web+design

Web Site Reviews: Gmail Home Page

Everybody knows and most of us love Gmail and are intimately familiar with its index page, shown at left.

Many of the web designers amongst us would also love to know what the HTML code under the page is like, so we have stripped it naked, looked at it and had some private thoughts about it… we share them with you below.

It is our hope that you will spend a moment or two to express any significant thoughts you have on the article with a comment. Where beneficial to visitors, we will respond to comments.

Before we get down and dirty, we must tell you that we have analyzed the Google Groups page earlier in our parent site, so we already have a fledgling idea about Google’s page code appearance. With that background, our tour of the source code of Gmail’s index page now begins.

We start off with the styles. In contrast to the Google Groups’ style sheet, the main Gmail style sheet is well organized with no clumsy patches of commented-out code. It is embedded instead of external, which is alright considering the fact that the rest of the web site is in JavaScript. It does not contain styles for any of the HTML tags, and lists only class styles with their properties.These styles do not appear to be in any particular order.

Comment: It would be preferable for the styles to be in order of appearance or alphabetical order.

The page uses a simple table-based design and the code is neatly formatted. At one point where a table is closed and another opened, it is pleasant to see a comment explaining why this was done (the reason pertained to a peculiarity of Internet Explorer).

But alas, there is a bit of clumsy CSS in the middle of the HTML code. We note with suspicion two style sheets placed in the section with nothing in between.

Comment: Placing a style sheet in the body section is not customary and perhaps even weird. That said, there is no reason to have the two contiguous style sheets. All this has the smell of patchwork repair.

We are surprised that Google, with its mountain of cash and army of programmers, has not taken the trouble to make its behind-the-scenes workings neat. This is not the case with other large Internet companies like Yahoo, whose code is better by a degree of magnitude. (Check back after a few days for our analysis of a certain Yahoo page.)

Surprise Bonus: An Analysis of the Displayed Page

The Layout:

The displayed page is very good from the usability angle.

It is not ‘busy’, meaning that there is no clutter and no multitude of links to confuse and consternate the visitor (for instance, there are only six links above the fold).

There is an invitation to try the Gmail mobile phone interface: it contains a list of benefits and a call to action, which is good, except that the order of these two features is flawed.

Comment: We think the benefits should have come before the call to action and not after!

The page has been optimized for 1024 pixels width, which conforms to the latest design recommendations.

The Page’s SEO:

The page has a humongous 26,500 backlinks (according to Yahoo Site Explorer), many from government sites like the New York Public Library and authority sites like Wikipedia.com.

There are links to a Privacy page and a ‘Terms of Use’ page.

The page contains many excellent secondary keywords such as ‘account’, ‘attachment’,’ pdf’, ‘photos’, ‘megabytes’ and ’storage’.

Comment: For the above reasons, the page is nicely SEOed.

This concludes our analysis of the www.gmail.com page. It is important that you you add your opinions on this analysis through our comment form; we look forward to receiving and responding to them.