Design and Development on Mobile Web

I was doing some research and also writing on Responsive Web Design for a while and I started pondering of Design and development on Mobile Web. And from some couple of months I inundated myself with lots of talks and tasks about this. Mobile web is now having ample market share in the web and design industry and of course in the brain of web designers and developers.

Many of the bloggers, design thinkers have painted a huge picture of challenges and limitations of mobile web. And today I would like to have my tiny dot of post on this painting.

Disclaimer: I would like to state that I am not going to propose any solution or announce a new mobile development biz strategy on behalf on anyone. I just want to share a mini-roundup of what my mind-grapes are soaking in.

Challenges for Designers:

Luke Wroblewski shares his “Mobile First” mantra, which is the idea that if you design for mobile platform first, you can end up with superior product.

In design area, the mobile web introduces you with some challenging limitations

Size Matters:

Don’t you think that designing a website on 1024 x 768px is completely different than designing for a 320 x 480px screen. As the resolution and screen size decreases, the challenge for the designer to accommodate everything (most of the things) on that much asset is a challenge. It is like serving a huge roasted chicken in a single soup bowl. The devices available I market are varying in dimensions and resolutions and squeezing more and more pixels in them.

Touch me:

Yeah, this is the most useful feature for the device user but it brings a bigger challenge for the designer. Touch brings a lot of challenges. Most importantly the absence of hover effect. Designers have to do the design, keeping in the mind the fact that there is no hover. Now there is a touch. Fat fingers are less accurate than 1px mouse pointers so things that are clickable need to be big, occupying more precious real estate.

Limited Bandwidth:

If you keep a mobile user waiting for too long, he will simply click the BACK button and you will lose them forever. So while designing, we have to keep in mind the fact that the user will not wait for the website to load for more than 15 seconds. He will show you the finger for not creating a faster loading website rather the fact that he has a slower internet connection. In the end the User is the King! Any website, especially a mobile version, needs to be lightweight, heavily optimized and compatible.

When you design for mobile, you are immediately faced with the challenges of ripping out all the stuff that doesn’t matter and forced to provide the most basic actions. Although a daunting task, there’s an optimistic side. As mentioned in the podcast, the mobile versions of some big websites (Facebook for iPhone, Flickr, GoDaddy) are actually better than their giant counterparts because they offer a simplified user experience. So in some way, it’s a designer’s dream to be able to put their foot down and say “No, I will not make the logo bigger” because it can’t possibly be done.

There’s a financial incentive, too. As shown by the facts at the top of this article, there’s an ever increasing demand for mobile-compatible interfaces. This means that you have legitimate reasons to charge for such services. Mobile sites and native mobile apps are fast becoming a separate portal to businesses worldwide.

I am of the optimistic mindset that any good designer likes to design. And good designers can design well even if given limitations like that of the mobile web. The mobile web gives designers an exciting new horizon and potentially lucrative field to begin targeting their pixels with.

Challenges for Developers:

The Mobile Web IS NOT just the iPhone. Depending on who you talk to, there are around 15-21 browsers that are in need of active support. In its simplified form there are 8 major browser platforms with each of them having multiple browser versions with differing capabilities, differing JavaScript support, and different caching methods or no caching at all. This is so much worse than the IE6 problem; it’s like having 15 IEs.

Information about these browsers is difficult to gather. Peter-Paul Koch ran some comprehensive tests on CSS and JavaScript support. Resig wrote a nice summary of PPK’s behavior research over at his blog, this is the best place on the internet to start learning about the various mobile browsers.

It’s sobering to know your future enemy: twice as many major browsers, fractured browser share, unknown/poorly documented support, and the list goes on. Not to mention, the most important part of developing for a mobile device is actually holding it in your hands and seeing how it feels, interacts and responds.

There is some hope. There are native application compilers like PhoneGap and Appcelerator Titanium which will take your HTML/CSS/JS and build native apps for most of the major platforms. I’ve heard nothing but good things and much excitement from developers using those platforms. Also, the yet-to-be-released jQuery Mobile will help solve some of the browser inconsistencies. So although there’s a light at the end of the tunnel, it’s a hard uphill road up ahead.

Mobile Web:

I’d suggest setting a new standard for the word “Smartphone” using the 2G iPhone as the base standard since it was the original game changer. All other phones would be “dumbphones”. But I dream a dream.

As far as the mobile web is concerned here in the now, I unbiasedly do believe that developing towards the Webkit (iOS, Android, and future Blackberry) platform is the safest bet as it’s one of the fastest growing markets and possesses the least amount of HTML/CSS support headaches. It’s important to note, however, that webkit browsers are not the dominant browser so be prepared for your mobile site to degrade and still have to function on your boss’ old Blackberry.