www.webdeveloper.com
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 48

Thread: Designing Websites For Mobile Devices

  1. #1
    Join Date
    Apr 2009
    Posts
    346

    Designing Websites For Mobile Devices

    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.

  2. #2
    Join Date
    Mar 2012
    Location
    Saint-Petersburg, Russia
    Posts
    97
    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.

  3. #3
    Join Date
    Mar 2009
    Posts
    452
    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...

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    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/

  5. #5
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    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.

  6. #6
    Join Date
    Mar 2012
    Posts
    1
    Thanks for those link. It helped me a lot on how to make a web for mobiles.

    __________________________________________
    digital marketing agency | wordpress designer

  7. #7
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Quote Originally Posted by cassiejones View Post
    Thanks for those link. It helped me a lot on how to make a web for mobiles.
    Very welcome. Glad they were useful.

  8. #8
    Join Date
    Apr 2012
    Location
    Philippines
    Posts
    1
    Quote Originally Posted by Major Payne View Post
    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/
    Thank you for this references you've share to us. It really helps me a lot.

  9. #9
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Quote Originally Posted by safiya View Post
    Thank you for this references you've share to us. It really helps me a lot.
    You're very welcome.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,560
    Quote Originally Posted by handcraftedweb View Post
    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.
    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.

  11. #11
    Join Date
    May 2012
    Posts
    7
    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.

  12. #12
    Join Date
    Sep 2011
    Posts
    30
    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

  13. #13
    Join Date
    Mar 2012
    Posts
    1,560
    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).
    Last edited by jedaisoul; 06-18-2012 at 12:04 PM.

  14. #14
    Join Date
    May 2012
    Posts
    2
    nice posting man really good i like it

  15. #15
    Join Date
    Jul 2012
    Location
    usa
    Posts
    2
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles