We’re getting closer to an era where having a website compatible with mobile will play an important role in your success. That being said what does it take to make your website compatible for a mobile?

The answer: not much.

Mobile phone browsers come in different shapes, sizes and capabilities. You should be ready to accomodate the fact that all mobile phones might not support stylesheets, images, tables, columns and floats. And you can almost forget about using Javascript (for example, dropdown menus) and Adobe Flash. Unlike monitors, resolutions can all be different. That means items with set widths such as images or css items might end up causing scrollbars or other usability nightmares.

The best way to tackle all these problems? A stylesheet dedicated uniquely to mobile media, of course.

Setting up a mobile stylesheet

It’s simple really, just as we did previously to set up a print stylesheet, all it takes is a separate stylesheet file (or files) with an HTML markup like so:

<link rel=”stylesheet” media=”handheld” type=”text/css” href=”myMobileStyleSheet.css” />

Simple!

What are some things you can do with your new stylesheet?

• Delete Everything - Yup, you heard me correctly, delete every single element from your CSS file, and have a look at your page. This should be your starting point.
• Keep It Simple - As soon as pages start getting complicated, who knows what can happen with the hundreds of mobile phones out there.
• Hide Useless Elements - Huge banners, huge images, irrelevant information (links to PDFs?). Mobile users will typically have teeny-tiny screens to fit loads of content in, hide the useless stuff. In CSS, you can use the syntax: #myHugeHeader {display:none;}
• Make Sure It Works - Disable Javascript in your browser (you’ll have to poke around the options) and see if your website and menu items still generally work.
• Make Flash Alternates - Use SWFObject to display alternates in the event that Flash and Javascript are not supported.

That’s all for now. Good luck.

Banner blindness is a phenomenon where users will naturally ignore advertisement banners, regardless of what they’re about or how relevant (or irrelevant) they are. For us publishers, it affects us because advertisers will be willing to pay less and less for an advertising method that does not work.

Eye-tracking studies have shown that a user’s eyes […]

Read the full article »

This has happened to me, I’ve slaved days over a single .FLA file, regularly saving back-ups. One day, the worst possible scenario… I can’t open the FLA file. (I was using Adobe Flash CS3)

What eventually happened is that I could open another file, and it was only then that I was able to open up […]

Read the full article »

It’s time for story time. Hopefully you won’t mind that I’m dealing with $66 instead of $6600. Yesterday, I checked my mail and I saw what looked like a check through the cellophane window on the envelope. I thought to myself that this was likely the result of me being included on some sort of […]

Read the full article »

I believe (and I’m not alone in this Web 2.0 train of thought) that your website’s header should be void of the use of imagery. I’m having a hard time finding a well-known organization or companies website to use as an example because modern companies have realized their mistake. So I whipped one up as […]

Read the full article »

Programming is something that can be done in an application as simple as Notepad or TextEdit, however, there are programs out there that will make your life easier.

Notepad++ - This software is your lightweight freeware alternative. It supports color coding for over 30 languages and makes it easy for you to edit how you […]

Read the full article »

I was poking around DigitalPoint forums, and there was a promotion from TNX.net, a new contender in the text link brokerage market. You could get 5000 points, points they use as currency. Of course, tempted by anything free, I bit. (See the thread here).

What I found, was a site that was really serious about what […]

Read the full article »

Here’s a really, really basic list for all you beginner’s out there who aren’t quite familiar with some of the aspects of web applications.

ASP.NET and ASP (sometimes known as classic ASP) are not the same.
ASP, PHP, ASP.NET is a short list of server-side languages. HTML code and other server-side bits are generated based on these […]

Read the full article »

This is something you’re taught as a print designer. You’re taught to kern all large text. I’ve peaked around and I’ve come across pages produced by web designers and developers that overlook this very small detail. That being said, I think it’s important and does make you look professional.

What Exactly Is Kerning?
Simply put, Kerning is […]

Read the full article »

Here’s yet another easy, detailed tutorial on making a web 2.0 styled button in Adobe Photoshop. Enjoy.
1 - In Photoshop, go to File -> New. In my example, I set my canvas to 150 pixels by 150 pixels. Replace the background color (if needed) with the desired color. In my case, it’s off white.

2 […]

Read the full article »