A step to be ahead: start designing for mobile devices

A step to be ahead: start designing for mobile devices

Our world is evolving. New technologies and new researches are giving us more opportunities to develope internet-based applications for several, and different, devices. In particular, taking a look to the new telecommunication frontiers, it seems to be clear that the challenge is to provide a lot of services on mobile phones. The next level, so, will be to communicate in mobility.
I’m not speaking just about WiFi on your iPhone or Android-based phone, but about a mobile network technology that will allow us to browse our favorite website and use our useful web-apps everywhere (WiMAX, Long Term Evolution and so on).

Get unlimited access to 2500+ design resources for only $7! Take a tour or sign-up now.

Moreover, new features, hardware upgrades and cool applications are trasforming our mobile phone in a productivity machine. These are the main reasons that should drive us, web designers and developers, to digg into the fantastic world of the mobile web design and development.

It is a field relatively new, but, as said, it isn’t science fiction to think in few years a good percent of internet users will browse using brilliant and versatile mobile phones through a stable mobile network.

Why should we consider mobile users now?

Well, if I’d ask you the main use of a mobile phone, I’m sure that the answer is ‘to communicate with people.’ It is not a One Million Dollar Question, but if I’d ask you how many ways you know to communicate today, the answer will be articulated.
Nowadays, thanks to social networking platforms (such as Facebook or Twitter) or instant messaging services (such as Skype, AIM, Google Talk), people communicate using different approaches, with few clicks you can send a notification to a list of friends or write a short message in real time. Try to imagine if this is possible ever and everywhere… this is the future: the mobility.

It’s evident that the web, the classic web, is dying. Internet users are not dummies or beginners who looks for some information. They want services, they want to stay connected with their friends, sharing their passions, in real-time. So, website owners, who offer good information and who love their users, must create a service, not jut a website. Creating a good mobile version of a website contributes to build a good service, right now!

Mail Chimp

MailChimp is a powerful, easy-to-use email marketing service. They have a light version of the app for mobile users.

Mobile Web Design

What mobile users want?

Hard question, at the moment… the technology in this field is evolving and there is an epic ‘battle’ among the companies who works to improve their products. There are new features and hardware upgrades every month and too many devices; so the users don’t have a ‘standard behaviour,’ but there is a fact: they want to stay updated!

Often is sufficient to create a new version of the website (or web-app) simplifying the layout and focusing attention on the content (highlighting the recent articles).

Smashing Magazine

Smashing Magazine delivers useful and innovative information to Web designers and developers. The mobile version of SM is absolutely focused on the content.

Mobile Web Design

Web Designer Depot

The blog is a joint effort and collaboration between leading designers around the world which contribute a wealth of expertise on all fields of design. The readers can stay updated through the mobile version that show the last articles of the blog.

Mobile Web Design

Ride the challenge

Yes, it’s a challenge. The number of users browsing the Web from mobile phones is rising, but the mobile context has a wide variety of devices with different screen sizes and features. You have to create a mobile website that should works considering the screen dimensions of most common phones available: 128x160px, 176x220px, 240x320px, 320x480px; you have to synthesize the content, the navigation menus and the links of your website; you have to design for an optimal user experience.

The mission is not easy, but as web designers and developers we have to stay on top in order to create useful services and to get relevance in the industry. Mobile website development will be really significative for our next web projects; so below there are some points to keep in mind planning the mobile version of a site.

Target your users

This is an important step in all web projects, but in this case you should trace a more detailed profile of your kind of mobile visitors in order to provide them a better service.

The simplicity is the key

As said, the mobile users need quick updates or to accomplish some basic tasks on their favourite web-apps. So, try to provide only relevant information and tools on the mobile version of your website.

Emphasize yor content

Satisfy the visitors delivering what they want. If your mission is the sharing of good and useful information about specific topics, you should show the content hiding other unnecessary elements and providing only the essential navigation options to the user.

Design a responsive website

If we’ve learned a lesson, it is that there so many devices able to render a website or a web-application. For this reason our designs should be really adaptive and responsive to engage more mobile users. One-column liquid layout and/or the use of media queries could be great ideas.

Test to enhance

The best way to improve your design.

Don’t stop to learn and stay updated

In this field the changes are frequent and new technologies are developed daily. The best way to stay on top of is to learn new things day by day. Stay updated, follow interesting blogs and people on social media!

Showcase of well-done mobile websites

jaguars.com

Mobile Web Design

wvutoday.edu

Mobile Web Design

vspink.mobi

Mobile Web Design

wansonvitamins.com

Mobile Web Design

mandelgroup.com

Mobile Web Design

esignbleach.com

Mobile Web Design

marinayachting.it

Mobile Web Design

vimeo.com

Mobile Web Design

mashable.com

Mobile Web Design

nike.com

Mobile Web Design

flickr.com

Mobile Web Design

nclud.com

Mobile Web Design

google.com/finance

Mobile Web Design

visitkc.com

Mobile Web Design

vondicomm.com

Mobile Web Design

diesel.com

Mobile Web Design

Articles and resources

Useful articles:
Emulators for testing:
Resources:

[Note: the next step to improve WeGraphcis will be the mobile version!]

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

piervix

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development. Now he works to make WeGraphics the best place to find design resources

50 Comments

(+add yours)
  1. Very useful infomation !

  2. dany

    Great advices! It’s time to develope mobile version for all our web projects. I think android-based phones and iPhone are the standard, today and tomorrow.

  3. This article is great. I am actually in the development process of creating a mobile site for my current website. My primary concern was flash elements on my page not able to be displayed on I-Pad and I-Phone, but now you have opened my eyes to other design elements I need to think about.

    Thanks

  4. Great post. I’ve been working on doing some mobile design work for a podcasting site. Much appreciated.

  5. Excellent article!! Honestly mobile design is evolving really fast, and there are lots of things to create and try with this technologies. For the moment I am just starting with it with one of my websites and this article was really helpful qith some tips I was letting aside.

    Thanks

  6. Shlomotion

    Great article piervix, clean and well written as always..

    Thank you!

  7. sarah

    Wonderful article! I have bookmarked it for future reference, when I take the leap to designing for mobile. You’ve pointed out some things that I never even thought of.

    Thanks!

    • Thank you for the comment, dear Sarah!

  8. Tuntikorn Asawayuthapol

    Useful Article,In the future I have to develop mobile site for my website too. http://www.designbyarm.com

    Thanks you for share this.

    • Nice! Good work… ;)

  9. HTML5 Boiler Plate has been a tremendous help in this area. A designer or developer must consider mobile when starting their project

    • Great resource, dear Cody. Thank you for sharing!

  10. I agree with you: mobile devices are becoming more and more popular, specially thanks to Apple (iPhone, iPad) and Google (Android). I think that most interesting services are (or could be):
    * friends and POI geolocation services: find my nearest friends or POI regarding my geographic position;
    * tight connection/synchronization between other devices (PC, TV, ecc)
    * extended display on demand (like OLED display like sheets that you can roll out to see clearer).

    • Yes, Christian. Apple with iPhone and Google with Android are the best, at the moment, they add new features and services month by month and hardware upgrades are frequent.

      I’m sure the future will be the mobility: a complete control of our activities via mobile-phone.

      Thank you for the comment, much appreciated!

  11. Thank you for all your comments!

  12. great article and advice, loved the showcase of sites gave me plenty of ideas.

  13. The challenge about mobile design is that you have to implement most of the features/content of the non-mobile version. Otherwise people won’t bother to visit the website only to find out that most of their favorite stuff is not there.

    It’s something like a common chicken & egg problem. You can’t show everything because the screen is too small, and you can’t skip much stuff or the site loses its “thing”. No one said it’s going to be easy ;)

    • I respect your point of view, but in my opinion the challenge is just to develope a good service for the mobile users… a step to be ahead ;)

  14. With the focus on mobile browsing, this trend is definitely a great venture. It’s back to the old times where mobile phone screen start to get bigger all again.

    Nice tips that you have share with us.

    Thanks!

    • Thank you for the comment Aidan… looking forward I’m sure that skills in mobile website development will be necessary for web designers and developers.

  15. Useful, I was thinking if I have to develop mobile site for my website too. and also for next projects.

    • Thank you Fandy!

  16. Great introduction, examples and references to mobile development.

    • Thank you for the comment Michy!

  17. A very userful article about mobile development and design.
    Mobile devices are the future of web applications, more and more people will have condifence with this type of devices. Then get in line with the development and the webdesign on mobile is fundamental to the companies and also for the professionals.

    • Absolutely! Thank you for the comment my dear friend!

  18. This is great Piervincenzo. Love the collection of great mobile sites already out there that are showcased in this post. I access the web on my phone all the time and it’s always nice to be able to access a site without any problemd. I’d like to develop my sites for easier mobile use and this has really helped, but like Karol says you have to sacrifice certain things on your site to allow for mobile use and you may end up losing the special things that make your site stand out on a normal browser, but great post and thanks!

    • As said, in my opinion the challenge is just re-create a good service for mobile users too.

      Thank you foir the comment!

  19. Informative article with some excellent examples of mobile web development.

    Kudos on the Wegraphics site design, looks awesome.

    • Thank you Conrad!

  20. Very useful!!!

    Thank you for sharing!

  21. Awesome post! Very informative indeed and all those pointers you give are really helpful.
    Web Design for mobile devices is something of huge importance right now! Almost everyone I know has some kind of mobile device and browse the web on the go on daily basis.
    And its becoming kinda the mainstream way ppl are surfing the web nowday.

    • Thank you dear Edmar!

  22. Great article, great starting point. I totally agree with your opinion that the mobile version does not to have all of the normal site stuff in it. For example when you visit a restaurant site with your phone you want to check prices, location and availability and not the story of the restaurant.

    I think mobile web will be the next big thing and i think there’s some really good devs resources out there like jqtouch, sencha touch, jquery mobile and others.

    And I think the real game changer was the iPhone with its multitouch concept. Apple changed the mobile world and opened a new market. Android is a great software and I think that a little battle for supremacy will create a better mobile world

    ps: the best thing about mobile devices is that they have different viewport but shares the same standard compliant browser: WEBKIT ( no more IE6 hassle ts time!!)

    cheers to everybody

    • Thank you for the comment, dear friend. You’re right, the key is to understand what mobile users want from our website.

      Cheers!

  23. RodgerFox

    Excellent article. Thanks. I, too, with no long time working on site design for devices IPhone / IPad. Some examples of very interesting.

  24. NIce article …
    If you using Joomla then using T3 Framework will be usuful.
    Or CloudBase by cloudaccess.net based on T3 with some more featured over T3.
    HTML5 Boiler Plate is mazaing for no doubt.

  25. You’re right, i’ve been working on custome websites for mobiles since couple of years, now some clients on our region realized the importance of mobilty and being reachable on different media and devices, the sad thing is the flash content on mobile and handheld devices like iphone and ipad, which i think it will limit creativity because flash is doing great job in terms of having animation and enhanced dynamic UI beside HTML, but still, HTML5 maybe the key on having a rich content and videos on mobiles too.

    Thanks for the article, i think i will have to rewrite my flash portfolio app. from scratch on HTML to be portable on mobiles too http://portfolio.she7ata.com

  26. Great article – I agree that mobile development should be given importance now more than ever. Thanks for the examples too!

  27. martina

    very usefull , bookmarked it just in case i need it later on :D
    great work just continue to do so , we novices need that :D

  28. Nice article, very useful. I haven’t designed many sites for mobile devises yet, but they’re in the future for sure — good reference. Thanks for sharing.

  29. Awesome article, I bookmarked it. This plays so much into what I’m trying to learn now, and hopefully implement soon. Cheers :)

  30. I save link your article, I love it , but i need not you eiei

  31. Wow !! thank you for share..

  32. Cool useful

  33. Wow, amazing blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your web site is excellent,
    let alone the content!

  34. Good way of telling, and nice post to get information about my presentation topic, which i am going to present in college.

  35. Do you have a spam problem on this website; I also am
    a blogger, and I was curious about your situation; we have developed some nice methods and we are looking to exchange
    techniques with other folks, be sure to shoot me an email if interested.

  36. Because the admin of this website is working, no doubt very shortly it will be renowned, due
    to its quality contents.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team