What is the main difference between designing a site for a mobile device and one for a personal computer? I've looked up resources online but the don't really discuss layout types (fixed, fluid, elastic) or web page sizes.
Printable View
What is the main difference between designing a site for a mobile device and one for a personal computer? I've looked up resources online but the don't really discuss layout types (fixed, fluid, elastic) or web page sizes.
You'd better specify which kind of mobile devices you mean. Tablet-PCs, smartphones or even cheap cell-phones with J2ME browsers.
However there is no any good guides I think since there are too many varieties of the mobile browsers. So you only need to decide which kind of devices you are targeting (for example do you need your pages to look good even on 320*240 or 128*128 screens, and whether you would require javascript to be enabled on client side).
Good idea is to check the capabilities of client at first request and choose among several templates most suitable for this client.
on mobile devices you have very limited resources. screen size and navigation controls as well as Javascript, CSS support. so mobile sites should be very lightweight as loading only what visitors require. easy to navigate. less graphics, fonts and background color schemes should provide maximum readibility etc...
Might help:
Mobile Website:
Learn the Mobile Web: http://learnthemobileweb.com/2009/07/mobile-meta-tags/
10 Ways the Mobile Web is Different: http://www.elated.com/articles/10-wa...-is-different/
Redesigning a Site For Mobile: What's Involved?: http://www.elated.com/articles/redes...hats-involved/
How to Validate and Test for the Mobile Web: http://designfestival.com/how-to-val...&utm_term=More
Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/
The strategy I'm working on/thinking about is to have one design (layout) that will work on desktops, laptops and iPad sized screens, and a second layout for smaller screens. But I'd also like to understand how to better the experience on tablets and phones by taking advantage of the touch interface.
Things are changing faster than ever though, with the new iPad's resolution, how Windows Metro/IE10 will affect things, etc.
Thanks for those link. It helped me a lot on how to make a web for mobiles.
__________________________________________
digital marketing agency | wordpress designer
Very welcome. Glad they were useful.Quote:
Originally Posted by cassiejones
Thank you for this references you've share to us. It really helps me a lot.Quote:
Originally Posted by Major Payne
You're very welcome.Quote:
Originally Posted by safiya
I would suggest that, if you take as the minimum screen width as 320 pixels, you can build screens that scale to 320, 640 and 960 pixels width by using divs just under 320 pixels wide, that float to fill the available width.Quote:
Originally Posted by handcraftedweb
While designing a website for mobiles which information to be shared is one of the most important factors needed to be thought about. Browsing web on mobile is very difficult.
Even it is difficult to brows web on iPhone and the Android phones, even though they have made great progress in web usability.
You can all read all 3 parts of the series it will give you better understanding http://www.seomoz.org/blog/the-real-...le-misindexing
Further to my earlier comments, my initial thoughts seem to be holding up. I.e. You should not be developing separately for mobile devices. The larger screen sizes, and the fact that 99.9% of the web is written in HTML, seems to be making XML redundant. What you need to do is:
1. Decide on the minimum screen width you are going to design for. I suggest 320px.
2. Decide whether you are going to support Symbian devices. There are bilions of them out there, but they are little used on the web. E.g. Latest global web volumes from w3counter:
Apple iOS 5.66%
Android 1.81%
BlackBerry 0.57%
SymbianOS 0.18%
--------
Total 8.22%
--------
The total mobile presence on the web is less than 10% (but growing fast) of which Symbian devices account for less than 0.2% (and falling). So it's time to start taking mobile seriously, if you are not already. It seems that iOS and Android are the "must support", BlackBerry a niche market, but Symbian on the way out?
3. If you do decide to support Symbian devices, you need an actual Symbian phone to test on, to see what works, and what doesn't. I use one that connects via WiFi (it's a lot cheaper that way!).
4. Test your site on the w3c mobile validator. I've got one site up to 70% mobile compatible, just written in HTML 4 + CSS 2, and can improve on that still...
The main constraints seem to be:
a) Do not rely on JavaScript for essential functionality.
b) Animation is a problem, with Apple chosing not to support Flash. The best compromise in the short term may be old-fashioned GIF animations. But even they may not work 100%. E.g. GIFs loop on my Symbian device when they should not, and the timing is ignored on the Kindle!
c) You can write mobile friendly sites in HTML and CSS, but only a sub-set of the languages may be supported. E.g. Iframes may not. So keep it simple.
d) Use fluid design techniques to allow the pages to contract down to 320px and expand up to 800px, or so.
e) Think small. Ideally your web pages should be less than 20K Bytes (including graphics)! That's pretty horrendous and, thankfully, increasingly irrelevant as it relates to the 2G networks. But it's a target to aim for. Size matters, particularly the initial loading of a page. Even 3G is not particularly fast (by broadband standards).
nice posting man really good i like it
The biggest problem with mobile web design is the variation in browsers.Mobile phones are very greatly in both size and ability. http://http://www.attorneysmax.com/moreservices.htmlCommon screen sizes range from 128 x 160 to 320 x 480. Other common screen sizes are 176 x 220 and 240 x 320 but often the actual resolution will very slightly.
