alessandra's blog

Mobile Web Design

alessandra — Fri, 19 Mar 2010 04:08:39 +0000

Adjusting a site for the mobile environment is a great challenge. A lot of techniques you are used to applying on web design would not make any sense on mobile, and vice-versa.

Mobile is a great place to try new things with different limits. People using the mobile web are much less patient than those in front of a computer--cellphone screens are much smaller and the mobile internet connection, usually 3G, isn´t as fast yet.

Design Adjustments

Navigation

The omnipresent menu can´t be applied in many cases because of the screen size. The menu probably would have to be in a vertical way and it could be very uncomfortable if for every single page people would need to scroll down all the menu to see the content. So, only use omnipresent menu if your site has only three links or less on its top navigation and, because of that, it can be horizontal. The solution is to put the navigation on the first page and on the others pages use a link at the top to come back to the first page or use breadcrumbs.

Content

Your content should be the highest priority. The screen is very small so make your design as clean as possible with less images and a lot of white space. The mobile connection isn´t as fast yet to handle images, and it can make it harder to focus on the content.

Links

On mobile everything is smaller and it is not different with links. You have to make them easier to click on. That can be done with, once again, more use of white space around them and bigger font sizes. When the link is selected, instead of just underlining it or changing its color, it should change the background color, even if the link is in the middle of a paragraph. It´s much better for mobile user to see what they have clicked on.

Various Screen Sizes

Each phone has a different screen size, and the iPhone has two positions: vertical and horizontal. So, your site cannot have a fixed width with pixels. It´s much better to use percentage and EMS. This method will make your site adaptable to the various screens sizes. Also you can limit the zoom of the interface and the size of the screen using the META properties for mobiles

Cross Platforms

Don´t expect your mobile site to look the same in all mobile browsers; there are dozens out there. There are some HTML elements and CSS properties that aren´t supported by some mobile browsers or, at least, it doesn't work the way it should. The various heading markups for example will look different from browser to browser. But if all you want is a site that works well on the iPhone and android, you won´t have too much trouble with the code as you already have with desktop browsers. All you need is to adapt the site as I said in the other topics. Check out well coded sites at Mobify, a place where you can build your mobile site. Some designs aren´t as nice but the codes are all valid. You can test it and see if it works for you. Some design blogs use it very well, others not so much. I tried it but I ended up building a mobile site all by myself. And here you can validate your code.

Great Examples

Below are some great mobile adjusted web designs, all of them and more you can find at a very useful mobile website showcase, Mobile Awesomeness.

Other Resources

Learn How To Develop For The iPhone - It shows you how to build an alternate page and style sheet for the iPhone and iTouch.

Give Your Website a Custom iPhone Bookmark Icon - This tutorial teaches you how to get your own custom icon to appear when someone bookmarks your website on their iPhone home screen.

Create a Slick iPhone/Mobile Interface from any RSS Feed - This article is about creating a web page that is formatted for the iPhone that will dynamically fill itself with content from a RSS feed.

iPhone Apps Design Mistakes: Over-Blown Visuals - The development of iPhone applications has recently become a hot topic. However, many of these applications are poorly designed and just don ´t become useful as it could be.

MobiSiteGalore - A free site to build your mobile site
Create a Unit Converter Application for Flash Lite Enabled Devices- Flash Lite is an implementation of the Flash runtime for mobile phones, consumer electronic devices, and Internet-connected digital home devices.

Developing with Flash Lite - Mark Doherty over at FlashMobileBlog has teamed up with Dale Rankine to produce a video tutorial series: "Developing with Flash Lite" on their Adobe Flash Lite Vimeo channel.

Doctype: jQTouch and Mobile Design - In this week’s 7 minute episode of Doctype Jim covers jQTouch, a plugin for jQuery that enables quick iPhone websites, and Nick talks about how to design for the small screen.

About the author

Hi! My name is Alessandra dos Santos and I´m a brazilian designer. I love design, photography, advertising and arts and I hope sharing inspiring stuff about all these with you. You can find some of my work at Carbonmade, Flickr, Behance and my blog at http://blueberrycheesecakebrowie.wordpress.com/

Beautiful Experimental Photos by Marcin Stawiarz

alessandra — Wed, 13 Jan 2010 11:01:54 +0000

Marcin Stawiarz is an experimental photographer from Poland that has a sort of fascination for landscapes and urban scenes. I've been a great fan for a quite long time already and that's why I decided to share some of his photos with you, especially because Marcin is able to transform very ordinary subjects into almost surreal images through excellent illumination and different angles.

All Marcin's photos look like they come out of a dream or something, very subtle and at the same time impressive. Not surprisingly, he has been awarded several times and also featured on many publication.

For more information visit: http://www.stawiarz.com/

I’ve always been fascinated by landscapes – places that are absolutely desolate, where I can stay one on one with nature. For me, the growing joy right before pressing the shutter button as well as the possibility of interacting with the world filled with inspiration is as important as the creative act itself. This initial fascination has rapidly grown into obsession that eventually took control over my life.

Since the beginning of my adventure with photography, every landscape has been an unforgettable experience, thanks to which I’ve learned how to interpret light – the single most important (and the single most waited for) factor that shapes my images. On the other hand, lighting is directly connected with another key element of photography – luck.

Proper weather, interesting cloud patterns or even a couple of sunrays breaking through the clouds, have many times decided that after a couple of failed attempts I was able to reach a satisfactory effect the moment nature displayed her most unpredictable face.

Whereas taking pictures with the main focus on a person involves emotions that are relatively easy to define, depicting an empty street or portraying pulsing nature usually requires qualitatively different feelings that have to fill in for the missing elements, thus making such photograph something more than a simple document.

About the author

Beautiful Hand Drawn Websites

alessandra — Wed, 11 Nov 2009 09:25:01 +0000

Illustrations are a nice way to give to your site a less formal style. With hand drawings, the style gets even less formal and also it gives to the site a super unique feel, allowing the designer to show off his/her skills. This type of element can be used for small details or even for the whole site layout. One thing is almost certainty, hand drawings will make your site looks more friendly, however it's very important to find the balance and make sure that they fit with the theme and subject of your site.

In this post I will show you some beautiful hand drawn websites. They push the style close to the perfection, in my opinion, and I'd like you to pay attention to the usage, as I said, in some cases they use the hand drawings just for details, while in others, it's the whole site. I hope you like them

alessandra's blog

Mobile Web Design

Adjusting a site for the mobile environment is a great challenge. A lot of techniques you are used to applying on web design would not make any sense on mobile, and vice-versa.

Design Adjustments

Navigation

Content

Links

Various Screen Sizes

Cross Platforms

Great Examples

Other Resources

About the author

Sponsored Links:

Beautiful Experimental Photos by Marcin Stawiarz

About the author

Sponsored Links:

Beautiful Hand Drawn Websites

About the author

Sponsored Links: