Credit: Photospin.com

When website projects involve web designers and SEO’s, it’s almost a sure fire recipe for conflict. However, it doesn’t have to be that way if both sides are willing to communicate and understand each other’s point of view. In an effort to help designers, I’ve written down some of the most important and easiest to implement aspects of SEO that all web designers should know about and use in their projects and work flow.

Masthead – The masthead is one of the first things people see when visiting a website. It can create a powerful dramatic impact, impart a sense of trust, and create a lasting impression. It’s also one of the spots most abused by web designers. Not to stereotype, but let’s be honest. Most designers work on big monitors, double monitors, or, worse yet, big double monitors. This has a tendency to distort their sense of proportion. Lots of designers produce mastheads that are 200-300 pixels tall. Once I even worked on a website with 450px masthead. My recommendation: stop wasting so much screen real estate. When I build a website for myself, I have a limit of 100px. Why so small? A masthead almost never produces any revenue. Unless you are putting advertising in it, keep it small and let people get to the page so they can “do” whatever it is you want them to do when they reach your website.

Image Replacement – No discussion of website mastheads would be complete without talking about talking about links, CSS, and image replacement. For usability, your masthead should link back to your homepage. That’s standard operating procedure at this point. The image should also have an ALT tag with the company name and logo. Don’t try and be tricky and add extra keywords in here.

Here’s where things get a little controversial. Google is never going to recommend using an image replacement technique to get anchor text keywords in your masthead. They have said it multiple times, and IMHO they are doing this because they know that, if they open the door a crack, people will take advantage. However, in my experience, it’s just not a real world solution. Using anchor text works much better than an ALT tag. So my recommendation is to use a well known image replacement technique like Leahy/Langridge Method or Gilder/Levin Method. Avoid the -9999px type of things and stay away from adding in “extra keywords” or “helpful keywords.” If it’s not in your masthead logo, don’t use it … period.

Drop Down, Fly-Out, Rollover Menus – This is another one designers love to use, but remember to be careful. If you are going to use it, make it so that search engines can crawl through the URL’s. Generally this means avoid Javascript (even though Google can understand some Javascript) and use a CSS solution. If you’re unsure, use a text browser or search engine spider simulator.

Flash and Ajax – If I had to name the two biggest obstacles people build into their websites, Flash & Ajax would be near the top of the list. It’s not that they are bad by themselves, but people use them in all the wrong ways. Using Flash, Ajax, videos, or any rich media in your pages is helpful and sometimes necessary. And let’s be honest–it’s a lot easier to sell a big ticket item like a sports car with Flash or a video. Using Ajax to change the contents of a page based on user actions absolutely can make a better user experience. However, if you design navigation or links to your website–especially mission critical parts of your site–using only Flash or Ajax, it’s unlikely a search engine will find it.

Page Titles & Meta Descriptions – Make them different for every page. Really, it’s worth the effort. Having the same title and meta description site wide is like wearing the same outfit to every singles event or date you go on. Google finds it just as appealing as the person you are trying to date. Also, don’t put the name of the website at the front of the page title; instead, put it at the end. It’s a very simple thing that really improves rankings. The title tag and meta description are what usually appears in a search engine listing, so try to make them interesting and click enticing.

H1 and Hx Tags – Put an H1 tag on every page. I know it’s ugly by default, but use CSS to make it look any way you like. Your H1 can match your page title but it doesn’t have to. It can be slightly different or completely different if it needs to be. Use H2, H3, or other Hx tags in your pages and navigation when it makes sense.

Breadcrumbs – Breadcrumbs can be a powerful tool. They can help with usability and SEO. They help the user know where they are and can help them move “back up” the navigation tree. Make the breadcrumbs links if at all possible. The actual links should closely match or be identical to the page title for maximum SEO value.

URL’s and File Names – Try to keep file types out of the URL if at all possible (http://example.com/directory/page/). Moving from .html to .asp, .php, .jsp or any other technology becomes a huge pain in the butt after the fact. Yes, there are ways to work around it using htaccess or other tools, but if you do it right the first time, it’s a non issue down the road. Keep file names and directory names as short as possible. Include as few keywords as possible. When you get beyond four or five words in a URL, the value drops off dramatically.

Mobile Websites – Don’t create a separate mobile website. Using m.example.com or example.com/mobile/ will just lead to problems down the road. Even if you can detect user agents and redirect, it creates problems. Instead detect for mobile browsers and serve lighter content and use a different CSS file.

Canonical Issues – The website should only work on http://www.example.com or http://example.com, not both. If it does, you need to fix that problem.  Here’s a tool to help you generate the proper htaccess file.

Duplicate Content – Website content should only exist on one page or URL. If it exists in more than one place, you are leaving it up to Google to figure out which one they think is best.You can help Google by using the rel=canonical tag, but don’t rely on that to solve problems you shouldn’t be creating in the first place.

Moving Files and 404 Pages – Make sure your website has a 404 page and serves a 404 header response when someone looks for a page that isn’t there. Serving a 200 header response is called a “soft 404″ and is bad. You can check with a page header checker. If you need to take down or move a file, set up a 301 redirect. Again the htaccess generator can help you if you don’t know how. Use the header checker to make sure it’s a 301. Using a 302, meta refresh, javascript redirect can lead to problems with search engines.

Number of Images and Image Size – Images may look nice, but never use an image where text will do. Search engines can’t actually tell what an image is. They use the surrounding text and filename to make a best guess. Size images properly. Don’t have a 1000px image and size it down to 200px using CSS. If you have a page with lots of images, use thumbnails and link to larger images.

File Size – File size has recently become a factor in search engine rankings. The faster you can make files the better. Remove superflous images whenever possible, use image reduction tools, and limit third party scripts, widgets, or tracking tools whenever possible.

Navigation – Try to keep the navigation as easy to understand and clutter free as possible. Once you start getting over 100 links on the page, it becomes harder for search engines to crawl through them all. Using navigation that changes based on user input (via ajax or javascript) is a bad idea: search engines will never “see” the secondary links.

Page Footers – Don’t clutter up a page footer with lots of links. It becomes hard for people to find/use them. Search engines don’t pay a lot of attention to footers anyway because people have abused them too much in the past. Don’t assume it’s ok to link to yourself in the footer of website. Ask the client first. If it’s ok, rather than linking to yourself from the whole site link, to yourself just on the homepage or, better yet, have a single page or popup page that links to you. It’s much better for you in the long run to have one strong link than hundreds of weak ones.

Sitemaps – Unless the website you are building is large, you don’t need a sitemap. But having one helps. Ideally you want an HTML sitemap and XML sitemap. There are plenty of free tools to generate them for you if you don’t know how. Keep them up to date and submit them to the search engines through webmaster central when you make a change.

I love ads. No, really – I do.

I watch movies for the previews, I watch TV for the commercials (OK, I watch the Super Bowl for the commercials). As a marketing consultant I pay attention to ads in a way that most people don’t.

I save ads. I have a portfolio of business cards. I have a file folder of my favorite direct marketing pieces, magazine ads, and newspaper ads. I love ads that make me laugh, ads that I can relate to, and ads that really grab my attention.

I recently wrote a blog post About Business Cards. As I was flipping through my business card portfolio one word came to mind, “boring.” So many cards were dull and looked just like the one next to it. In this over-communicative era, it is more important now than ever that your ads stand out!

The business cards got me thinking about the other marketing material, marketing collateral, and ads that I love. Here are a five of my favorite pieces from my files. (Yes, your opinions will vary. This is just a small sample of ACTUAL ads I have received. I am a 27 year old female and mother of one. – These ads worked on me.)

Maybe this one is just so effective on me because I have four sisters; I can relate. This ad addresses a woman’s never-ending search for the perfect pair of jeans. If your sister wants to steal these, they must be goooood.

“The two words every crazy-busy, socially overachieving multitasker wants to hear.” When this came in the mail I knew they were talking to me. I swear, whoever designed this studied both demographics and psychographics. They knew what would make me open this mailing. The inside is a pop up of the phone “Palm Pixi.”

“We’d like to apologize for just how effective Vicks Vaporub can be.” What a combination. This ad has a great emotional appeal. What parent wants to see their active child lying listless? It also clearly shows how effective their product is.

This postcard actually was addressed to me! It says, “Welcome Terra Fletcher.” The back looks like a handwritten postcard welcoming me to the Grand Canyon and Smoky Mountains. What can I say? People love seeing their own name. I’ve seen a similar idea that put the recipients name on the front license plate of a sports car. That’s the stuff that fuels daydreams.

“Will the Internet kill magazines? Did instant coffee kill coffee?” This effective, logical headline got me to read the entire ad. This ad is simple, but a different kind of simple – not as visual as most of these ads, but easy on the eyes and it addresses the question advertisers have been asking themselves.

By the way, none of these are ads I’ve designed. I have (in my humble opinion) put together some pretty great pieces for myself and for my clients. The hardest part for me to design a marketing piece is when I’m limited by the company I’m working with. We are so worried about offending, being misinterpreted, or NOT looking like everyone else – that our ads are BORING! Don’t be afraid to be bold. Be different. Get noticed.

A really inspiring resource is Outrageous Advertising, That’s Outrageously Successful by Bill Glazer. It’s a really easy read with lots of images.

What are your favorite ads? Why do they work? And importantly, do you remember the company associated with them?

By:  Terra L. Fletcher, owner Fletcher Freelance – business writing, marketing, and public speaking

Credit: BigStockPhoto.com

As a blog reader, do you come across some issues in blog design that leave you scratching your head? “Why would they do that?” you might think to yourself. I have those moments too. Now to be fair, I’m far from a fantastic designer, so it’s not my place to be overly critical of someone else’s blog design. But if they want to keep me as a reader, there are some mistakes they simply can’t make.

Here are my top ten pet peeves in blog design and usability:

1. No contact information or author details — If I’m reading a blog, I want to know that there is an actual person behind it. Tell me who you are. Post some information about yourself once in a while. But most importantly, have contact details on the blog! Let your readers know someone’s really behind it all, and it’s not just another splog littering the Web. If you’re not comfortable posting an email address, use a contact form. Your address is hidden so it can’t be harvested, but your readers can still reach you.
2. No dates on posts – Okay. This really drives me up a wall. It can actually be pretty infuriating as a reader to arrive at a post and find no date on it. Is this new information? Is it outdated and irrelevant now? Um, I don’t know, because you couldn’t be bothered to include a date! This is how bad information gets spread on the Web (just think about all of the outdated SEO “advice” floating around on blogs — would you want to follow advice that’s five years old?). Please. Post a date. We shouldn’t have to dive into previous comments just to get a rough idea of when you posted an article.
3. 

   Credit: BigStockPhoto.com

   Where’s the subscription option? — Every now and then I can’t figure out how to subscribe to a blog I like. While rare, some bloggers leave the RSS button off completely. More frequently though, the problem is that the blogger thinks they’re being cute design-wise with a super-duper creative RSS button. I don’t want cutesy. I want to know where to friggin’ subscribe to your blog! It’s fine if you want to get creative. But keep some familiar element to your subscription button so people recognize it for what it is.
4. Poor content formatting – This is another rare one, but an issue that really makes me want to leave a blog and never come back. The paragraphs all run together (like with line breaks between them instead of paragraph breaks, so there’s no space between each paragraph). When this happens it’s generally an issue with the theme. Here’s a tip. If this sounds like your blog, fix it! Either fix it yourself, get a coder to go in and adjust the stylesheet, or use another theme. You’ll annoy your readers a lot less that way.
5. Too many ads – I run blogs as a part of my business model, so I do understand the desire to monetize them. I also have my limits as a reader. If you have two huge ads before the content starts, you just lost me.  If you have a lot of text link ads throughout your content, you probably lost me there too. Strike a balance.
6. Irrelevant ads – This can be worse than having too many ads. If I visit your small business site, I really don’t want to see ads for adult dating sites. I really don’t want to see it. If you can’t find something relevant to advertise, then you’re probably in the wrong niche if you want to make money blogging.
7. Lack of transparency – The FTC might have weighed in about disclosing blog sponsorships and affiliate relationships, but your readers who are what really matter. And guess what — we’ve wanted transparency and disclosure all along! If you’re going to post an affiliate link, disclose that fact. If you’re posting about a client or sponsor, tell your readers that. We deserve the full truth so we can decide how much we trust the opinions shared in that post. You’re much better off telling readers about the relationship up front than having them make purchases based on your post’s information only to find out later that you might have only said those glowing things because you were profiting from them. Readers appreciate honesty. And just for the record, being up front and honest can lead to more affiliate sales rather than fewer sales. It might not seem like a usability issue on the surface, but it is. Transparency (or a lack thereof) influences how your readers behave in relation to your content.
8. 

   Credit: BigStockPhoto.com

   Registration required in order to comment — This is another huge pet peeve of mine, and I have a strict policy — I will not comment on a blog that forces me to sign up or register on the site. There are no ifs, ands, or buts about it. If you force registration on me, I’ll rebel. Worse, I’ll probably leave my comments on my own blog, pointing out the obnoxious behavior of your own (not to mention that I’ll probably turn to a competing blog instead of yours in the future).
9. Blogs trying to be everything to everyone – From the usability perspective, some bloggers simply try to do too much. That makes navigation more complicated for readers. For example if you want to offer business advice, share entertainment gossip, and post book reviews of novels, they probably don’t all belong on the same blog. It makes readers interested in one topic area frustrated when they have to put up with content in other unrelated topic areas just to find the “good stuff.” Use different domains. If you don’t want completely different blogs, you can keep the same theme, but install it separately on different subdomains of the same main domain — treating it more like a blog network than a single blog trying to offer too much.
10. Link preview pop-ups — This is a pet peeve of mine, but I do know some readers like it. Basically, when you mouseover a link, a preview of the site it points to pops up. In theory it’s not a bad idea — I get to see where you’re sending me before I click and leave your site. No surprises. However, I like to mouseover to view the URL in the status bar, and sometimes my mouse pointer just happens to fall over a link when I’m scrolling. In those cases, the pop-up is unwelcome. It takes over my browser, blocking portions of the content I’m trying to read. In my opinion, being able to view the target URL in the status bar is perfectly adequate. After all, it’s not like you get a great view of the site in the previews anyway.

Those are some of my biggest pet peeves when it comes to blog design and usability from the reader perspective. What are some of yours? What features or design faux pas make you want to leave a blog? On the other hand, are there design features you really love that keep you coming back? Leave a comment and share your thoughts.

As iPhone’s, Blackberries, Palm Pre’s and other smart phones become more widespread should site owners and publishers start to offer mobile versions, and from an SEO perspective what should you be concerned about?

Now that smart phones are common, displays are getting larger, and mobile browsers are able to handle more complex displays, are mobile bare bones text version even needed … for many sites the answer remains yes. First let’s look at the two extremes, if you have a rich media site such as Disney.com in most cases mobile browsers aren’t going to have the technical ability to display that complex or that much information. If that’s the case then you absolutely need a mobile version. This is a strategy that Disney has embraced as you can see from the web based and mobile screen shots below.

At the other end of the spectrum are sites which are have no rich media, or complex displays, sites such as craigslist.org which are primarily text based. For sites like this there’s no need to offer a separate mobile version, as the sites render nearly identical on on both platforms

However as is usually the case most sites, aren’t at either extremes, they lie somewhere in the middle, and the answer as to whether they should offer a separate mobile version is, it depends. Many business owners will make this decision based on whether they do business on;line or offline. However if you are a doctor, dentist, or hairdresser your customers may still look for you on their mobile phone, to get an address or phone number in case they need directions, to cancel, an appointment, let you know they are running late, or schedule a new appointment.

Once you’ve established if you need a mobile website the challenge becomes how you do it, many websites offer a mobile version under a subdomain such as m.example.com, however a more sophisticated implementation uses user agents, and serves out the content conditionally. This approach is not without risks, if you serve content conditionally based on user agent you don’t want to cross the line into black hat territory and cloaking. You want to offer the same content to users as you do to search engine spiders. This is a topic Matt Cutts recently discussed in a Webmaster Central Video:

The one bit of good news is more and more CMS website systems are starting to offer mobile modules and plugins, for example wordpress users can take advantage of this plugin, Joomla offers several choices, as does Drupal .

When designing your marketing material, you’ll notice that creating all the elements of the design can take a lot of time. To save yourself some time on often-used design elements, these free Photoshop brushes should be very useful. These 20 sets are some of the most commonly used design items, all for free!

1. Silhouettes brushes

Want to include people in your marketing material, these should satisfy you.

2. Futuristic abstract brushes

Are you in some high-tech industry? If so you these futuristy brushes will give you the high-tech look that you need.

3. Modern shapes & pictograms

These shapes are exactly what you need if you are looking for an edgy design.

4. Sparkles brushes

The perfect brushes to add just a little shine to your material marketing.

5. High-resolution ornaments

A fine set of brushes to decorate anything: website header, event flyer,…

6. Matrix effect

Give your your marketing material the futuristic look it deserves by emulating the Matrix effect.

7. Hands, feet & fingerprints

Another useful set of commonly used items.

8. Line swirls

Those swirls will definitly add some style to your design.

9. Bubble brushes

Give a light touch to your marketing material.

10. Female dancing

There nothing wrong about making your promotion a little sexier.

11. Snowflakes brushes

Obviously much more useful in the winter.

12. Cute doodles

Those doodle brushes are perfect if you need a cute way to communicate.

13. Halftones brushes

Create some cool retro effects with these halftone brushes.

14. Cityscapes brushes

Cool urban landscapes and elements.

15. Smoke brushes

Ever tried to take a picture of smoke? This will make your life much easier if you want to add some smoke effect.

16. Twisted brushes

A very graphical effect, for cool and futuristic topics.

17. People silhouettes

Even more silhouettes, with more action this time.

18. Little stars

This will allow you to add some magic to your designs.

19. Infinite explosion

Another amazing effects brush set, really cool.

20. Watercolor brushes

If you need your marketing material to look a bit more arty, these are your brushes.

About the author: Mirko Humbert publishes a popular design blog and a CSS gallery, you can also find him on Twitter.

The majority of web site layouts fit in one of two directions:

1. Completely fixed width (NBC.com is an example of this)
2. Completely fluid (amazon.com is an example of this)

Fluid sites, in general, have the left and rightmost extremes of their text ‘stretch’ to expand to fit the visitor’s monitor or browsing window size.

Fixed width sites remain at a constant width, and the text does not stretch to accommodate monitor size or browsing window size.

But there’s another hybrid of these two, and although rare, it provides an interesting alternative means of navigation and separation of content from ‘wayfinder’ type information. It combines a fluid header area with a fixed-width content area.

Real Life Examples: CNN and Sports Illustrated

CNN.com is perhaps the most prominent site incorporating this method. Check out the screen shot of the home page below:

We can see the impact of this layout technique particularly on a ‘full news story’ page (e.g. Not a home page or category parent page, but a full, individual news story). See in the screenshot below how well the story is separated from the topmost navigation and search area?

CNN’s approach helps create a definitive structure without disrupting design harmony. This separation of navigation/search from content helps the user’s eye jump immediately to the content, while ensure the top navigation area doesn’t become overly ‘crowded’ and scrunched as it may in a traditional fixed-width setting.

Sport’s Illustrated (SI) uses a similar approach, but their header area also serves as a quick ‘stat report’ for its’ visitors:

Check out how the latest game scores are posted prominently in the header. Avid sports fans will appreciate this very quick and accessible method of seeing the latest scores without having to dig down a sidebar to find such information. Yet the scores do not conflict with the other content on the home page.

Sports Illustrated has a fairly cumbersome/wordy primary navigation. One solution to this would be to reword elements into snappier words. But SI opted for a fluid-width header as the solution, which allows readers on wide-screen monitors to see all the navigation in a manner that isn’t overwhelming. The only beef with this, versus the CNN approach, is that users on smaller monitors or browsing at narrower window sizes will find the SI navigation does not degrade as nicely at a narrower width (see my more ‘squished’ screenshow below that was taken when I sized my browser window smaller):

Baby Got No Back: Wide, But Not Fluid

A year or so ago, creating a visually wide header (without fluid information in it) was popular. Autoblog.com is an example of this, as is wordpress.org. In the case of Autoblog, the header becomes obtuse and overwhelms everything else on the page. If the information in Autoblog’s header was fluid and expanded left to right (ala CNN or SI), the approach might have more functionality and relevance, but as it stands, its dominance seems puzzling and too heavy. Check it out below:

Compare this to WordPress.org. From a design standpoint, they’re using a visually ‘wide’ header area (whose color, but not content, expands fully from left to right) but this theme is carried through in the approach to the main body background color as well as the footer background color. WordPress.org also uses subtle stripes of color—rather than heavy contrast in the header—to create a harmonious and pleasing look and palette. See the next screenshot for this lovely striped harmony:

Bottom line: Design Fluid Headers With Intent

Many media, magazine and news portal sites could benefit from a fluid header/fixed content approach like CNN or Sports Illustrated. The keys to success of this approach are:

1. Put only the most important navigational and information components in the header area. Don’t clog it up and make “less is more” your mantra. Consider carefully the importance and impact of what you’re choosing to put in this header area.
2. Ensure the header’s graphical and color treatment ‘flow’ with the rest of the site’s color work and design. This creates a header that is both functional and easy on the eyes, and your visitors will thank you (even if subconsciously) for it.

I had a tough time finding these kinds of fluid headers (combined with fixed-width content). Have you seen any out there that struck your fancy?

If you read our prior article about magazine style blog design, you hopefully got a good overview of what magazine style design on the web looks like, and examples of sites that incorporate it well.

But analyzing an existing site’s successful magazine style implementation is much easier than taking your own blog and applying a magazine layout to it. It can be overwhelming to even begin, let alone determine how to balance your numerous components into something that services your readers and helps benefit you as a blog owner.

To help stimulate your creativity and get ideas on how you might structure your blog with a magazine approach, we’re going to deconstruct a popular celebrity gossip blog and rebuild it into more structured, magazine layout.

Pink is the New Blog is a frequently updated, conversational and timely blog about celebrities and entertainment. Although its current two-column layout is common for blogs and can allow readers to scroll through celeb news quickly, a restyling of the blog—especially a more structured and ineteractive home page—could benefit both the blog’s owner (through better ad placements and increased clicks to deep archives) and the audience.

Let’s peek at the current layout:
(Click here to see a larger version)

The brand design is lively and fun—appropriate in mood for the subject matter, audience and the writer’s tone of voice. But take a look at what happens if we change the home page to fit into the wireframe below:>
(Be sure to click to see the full magazine layout)

(Note this wireframe clearly isn’t branded or using Pink’s design elements. Trent, Pink’s owner, could keep the same branding and graphics approach, but kick it up a notch with a layout that serves him and his readers better. We’re looking solely at structure, hierarchy and a basic magazine wireframe here, and yes, we know that in terms of text alignment and polish, it needs work).

What does this new approach do for both the owner and the blog readers?

Leverage timelinesss

Design driven by content is one aspect of magazine design we discussed before. In brief, not every blog is a good candidate for a magazine style layout. Those that are frequently updated will find a magazine structure a more natural fit than blogs with infrequent posting. Pink is a great candidate for a magazine structure because of daily—sometimes multiple times a day—postings. Our structure above would let Pink showcase its frequent updates in a more obvious and helpful manner. Readers can quickly scan the page—without needing to scroll—to see the latest and greatest. A constantly changing front page may encourage more repeat site visits and improve Pink’s exposure over time.

Give readers more choices quickly

By showcasing headlines and blurbs of not only the most recent gossip piece, but the other 5 prior ones, readers can scan quickly to determine what they haven’t read and click through accordingly.

Inject new technology and leverage content

Video tech is hot. Celebrities are hot. Marry the two, and you have a combination for a blog that’s made to stick. Even if the video doesn’t change daily, readers new to Pink will be drawn in by the featured video, and loyal visitors may find it a welcome addition to watch a celeb video on the same site they normally read. Different people are attracted to different content—offering video in a prominent location helps provide alternative content and position Pink to look more resourceful.

By placing a section for “latest releases” Pink can offer quick, relevant content for people who trust Pink for information about upcoming movies, CDs and books. The potential bonus for Pink’s owner, Trent, is better affiliate commissions on these releases because of their more prominent placement.

Better ad placements

This leads us to ad placements in general. Trent could sell one (or several) home page advertisements at a premium rate above the cost for an inside page advertisement.

More clear accessibility of archives

A crazy, long drop-down menu currently houses Pink’s archives. This beast of a list can be wrangled with a box and javascript solution that shows archives on a year by year, then month-by-month basis, but hides the other years and months accordingly. (See xxx site for an example of this sort of javascript archiving). Implementing category archives into both a “quarterly hot category” section as well as a general tag cloud targets a variety of browsing preferences and makes it easier for people to browse topically and by popularity, which is particularly relevant on celebrity and entertainment blogs.

Improved flexibility

We don’t know Trent’s goals as a blog owner. It’s possible a lot of what we’ve suggested be highlighted is not information he feels is relevant or where he’d like to focus. But this revised home page structure gives Trent a variety of options for highlighting his chosen content in a manner that’s easier to digest. If he feels site testimonials shouldn’t be given a home page spot, he could swap that out with a photo of him and Madonna. Or, if over time new types of social networking communication methods become popular, he might consider swapping out the “top 5 fall categories” section with something related to that network.

This example just takes a look at Pink’s home page. His inside pages could take on a variety of layout approaches. A “single” entry (with comments) could continue to utilize the current two-column layout style. A monthly archives page could combine a more modular, magazine approach but without as many sections as this home page layout shows. A category archive page might have at least one strong visual that relates to the category name to bring in more imagery into the site.

If your blog contains lots of current and past info, like Pink is the New Blog, and there’s opportunities for you to better leverage ads, videos, social networking information and other valuable content, you might weigh the benefits (as well as costs) of restructuring into a magazine layout design to better serve your readers AND promote your site in a refreshing, and potentially more successful manner.

Although it is difficult to get data on the relative sizes of the mobile web versus the Internet as people access it from their desktop PCs, it seems likely that the mobile web will outstrip the regular Internet, if it has  not done so already.  The relative costs of a smart phone or mobile device is a strong inducement and it is extremely handy to be able to stay in touch when you are on the go.  In some parts of the world the mobile web will be the only way individuals can be online.  The arguments are even stronger for the under 30 crowd, which some have labeled the digital natives.

An indicator of the rapid growth can be seen in the news from Opera which is seeing explosive growth in the use of Opera Mini, a browser specifically for mobile devices with their smaller screens.  They suggest that Opera Mini is the quick, easy and secure way to get any Web page you want.

Number of Users
In September 2008, Opera Mini was used by approximately 19 million users, a 10.1% month-on-month increase from August 2008 and more than 341% compared to September 2007

If a business depends on sales or leads from the Internet, then it certainly should not neglect its visibility on the mobile web and how it will appear to visitors.  This is particularly true for local search, where people may well use their smart phone as an aid in finding stores or service providers close to them.  The importance of this sector should be obvious, but it is certainly confirmed by the efforts being put in by the major search engines.

Local Search

Microsoft and Google are the ones making the running here.  Indeed Search On The Go is a slogan that has been adopted by Microsoft.

Shop and search on the go
We’ve just released the latest updates to our browser-based mobile search at m.live.com. One of our major efforts was to bring the power of product search to the convenience of a mobile phone. Think about how much time people spend shopping in brick-and-mortar stores — without the ability to do the product research they’re accustomed to from their PCs.  We took the great product search features from Live Search and made them easy to use on your mobile phone.

Google is not to be outdone here and has brought out some major innovations for mobile devices.   You can upgrade your mobile device with free Google products, such as Search, Maps, Gmail, YouTube and other Google products almost whatever the make.  You can even identify the location where you happen to be.   As an indicator of things to come, it is also possible to get a street view with your Nokia S60.

This will be made much more powerful when voice technology is added.  GOOG-411 is currently available for free from Google as an indicator of things to come.  Microsoft offers TellMe which is an equally attractive option.

Clearly this online space cannot be neglected.  The launch of the iPhone prompts many to say that Mobile Local Search Has Finally Arrived.

This should all serve to drag mobile search out of the early adopter phase where it has been stuck for years. Through this, mobile search volume should increase; advertiser interest will follow; and more pervasive ad networks and mobile marketing firms will develop.

An Effective Mobile Web Presence

All websites will be seen to a greater or lesser extent on the mobile web.  One indicator of how they appear can be obtained by using the Opera browser and using its Small Screen option.  This may suggest that the user will have a satisfying experience or may indicate major viewing problems.  However even if the view seems satisfactory, the result should be treated with a great deal of caution.  Opera has some very sophisticated software to optimize the appearance.  One cannot be sure that all of the multiplicity of mobile devices being used by the population at large will be equally effective.

The issues involved in developing an effective mobile web presence are complex.  An excellent review of the issues in doing this is covered in an article by Opera on Designing pages to work on all devices, and small mobile ones in particular.

In considering choices here, a document from the World Wide Web Consortium is useful: it is titled Mobile Web Best Practices 1.0. That includes the following:

One Web
The recommendations in this document are intended to improve the experience of the Web on mobile devices. While the recommendations are not specifically addressed at the desktop browsing experience, it must be understood that they are made in the context of wishing to work towards “One Web”.  One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices.

One might assume that this implies the same website should be viewable in all devices.  If so, to modify how the pages are displayed, a process for mobile device detection is needed.

Mobile Device Detection

Chris Mills has a good article on how to serve the right content to mobile devices.  He discusses four topics that may come into play.

• Browser sniffing
• Creating a separate site for mobile browsers
• Media types
• Media queries

The bottom line on all this is that there are no easy solutions.  Cameron Moll brings a similar viewpoint in his post on tips and techniques for mobile web design.

I believe the most robust solution is to consider a separate site for mobile browsers.  Just a small example will illustrate the thinking involved.  Here is the Google mobile search page.

Even though their desktop search page is incredibly simple and has lasted through the years, they did not attempt to reproduce it on the mobile web.

Web pages often are not well designed from a usability point of view even at the desktop level.  With the much smaller screen real estate available on a mobile device screen, the way to interact with the web page should be reconsidered from scratch.  In this way the best possible user experience can be delivered to any visitor, thus  avoiding frustration and difficult scrolling or keyboarding.

Developing a separate mobile web presence has many advantages.  Not least it can be designed to accommodate as many as possible of the mobile devices in use. It does require extra effort to maintain two separate web presences.  However the mobile website is a very much reduced version of the full desktop website and should not present too many difficulties.

The key disadvantage is that the mobile version is not necessarily easily linked to its desktop equivalent.  For example this would require that favorites on the mobile device would somehow be accessible on the desktop PC and vice versa.  Since Sync-ing even contacts and appointments from desktops to Blackberries or iPhones is a challenge, Sync-ing favorites seems unlikely to be implemented.

Linking the Mobile Website with the Desktop equivalent

Perhaps the best solution on this Sync-ing question is to develop a strong brand presence.  If a search for the brand on either the desktop PC or the mobile device highlights the same online presence, then this is the most powerful way of linking the two online worlds.  After all as search technology develops to include speech technology, this will become the prime input method for the mobile device.  Just as Google’s Chrome browser is pushing people towards search rather than using URLs, the voice enabled mobile device will be moving in the same direction.

Conclusion

The mobile web offers huge potential to online businesses.  The question therefore is not whether to have a mobile website but rather how quickly.  Choosing a very simple website structure and design will achieve most of the benefits and provide a robust solution.