Results 1 to 19 of 19

Thread: Designing for Desktop and Mobile at the same time

  1. #1
    Mobility Member NailYener's Avatar
    Join Date
    Apr 2011
    Location
    Turkey
    Posts
    59

    Default Designing for Desktop and Mobile at the same time

    Hi,

    Up to now, I designed mobile version of many websites and my approach was to create a brand new mobile website with different HTML, CSS etc. This was a good approach as the websites I worked with were simple, static sites that didn't have updates.

    Now, I have a classifieds site that I want to make its mobile version but I guess my approach will not work well in this case.

    I think I need to redesign the desktop site and have only one site for both desktop and mobile but with different styles and images etc.

    Have you ever done something like this? What's your opinion? Can you direct me to some tutorials maybe?

    Thanks,

    Nail

  2. #2
    Senior Member ChinaMobi's Avatar
    Join Date
    May 2010
    Posts
    1,593

    Default

    Hi Nail, if your issue is a lack of site, you can create a subdomain, such as m.sitename.com, which "practically" serves as a separate domain.

  3. #3
    Mobility Member NailYener's Avatar
    Join Date
    Apr 2011
    Location
    Turkey
    Posts
    59

    Default

    Quote Originally Posted by ChinaMobi View Post
    Hi Nail, if your issue is a lack of site, you can create a subdomain, such as m.sitename.com, which "practically" serves as a separate domain.
    No, I want to design one single site that will have the same structure but different looks on the desktop and mobile. I found this article about web design for desktop and mobile but I need some more resources and examples.

  4. #4
    Senior Member ChinaMobi's Avatar
    Join Date
    May 2010
    Posts
    1,593

    Default

    So you need a device detection function to query the device and serve content appropriately using adaptive CSS3? Please do a search on this forum. There has been discussion on this topic. As far as I remember, Andy Moore has developed something for this purpose. Yes, I think a grid system will be good.

  5. #5
    Mobility Member NailYener's Avatar
    Join Date
    Apr 2011
    Location
    Turkey
    Posts
    59

    Default

    Quote Originally Posted by ChinaMobi View Post
    So you need a device detection function to query the device and serve content appropriately using adaptive CSS3? Please do a search on this forum. There has been discussion on this topic. As far as I remember, Andy Moore has developed something for this purpose. Yes, I think a grid system will be good.
    Thanks, I will see what I can find.

  6. #6
    New Member
    Join Date
    Aug 2011
    Location
    Helsinki, Finland
    Posts
    9

    Default

    Quote Originally Posted by NailYener View Post
    No, I want to design one single site that will have the same structure but different looks on the desktop and mobile. I found this article about web design for desktop and mobile but I need some more resources and examples.
    Don't know if your search got you the results you needed already, but here are a couple of great resource (that is, if you want both devices to get the same content). A List Apart article Responsive Web Design (alistapart .com /articles/ responsive-web-design/) is a good tutorial on developing layouts that adapt to different screen sizes. The book with the same name (abookapart .com /products/responsive-web-design) goes even deeper on the topic.

    Sorry for the spaces in the URLs but I'm not yet allowed to post links

  7. #7
    Senior Member ChinaMobi's Avatar
    Join Date
    May 2010
    Posts
    1,593

    Default

    One issue I still don't understand is how to adapt the sizes of image files to different devices. I'm talking about physical size, not width and height on web page. Currently, my solution is to prepare two sets of images files -- the original ones for tablets and much reduced ones for phones (all have width less than 240 pixels. BTW IrfanView's batch conversion function is great!).

  8. #8
    Mobility Regular
    Join Date
    Sep 2007
    Posts
    115

    Default

    Not all have the 240px width. You should also consider UX. A lot of large companies make the mistake of simply making their mobile UI the same as their desktop version.
    If you're looking for samples, go to this website:
    http://www.MobileDesign.com
    Know your users, know your target. What would your users like to see when their looking at your mobile website? Go outside with your phone and use it as you would when you are away from your desktop. Get into their shoes.
    Would you buy the same gift for your girlfriend as you bought for your ex?

  9. #9
    New Member
    Join Date
    Aug 2011
    Location
    Helsinki, Finland
    Posts
    9

    Default

    Adapting the images is the difficult part of adaptive layouts. I guess doing the image resizing once and then serving the "right" size for a device is the most common approach. But as MobileDesigner pointed out, choosing the right sizes is difficult at best.

    A really interesting looking service (which I haven't tried yet) is src.sencha.io which basically acts as a proxy for your images and resizes them based on the device screen size.

  10. #10
    Senior Member ChinaMobi's Avatar
    Join Date
    May 2010
    Posts
    1,593

    Default

    Quote Originally Posted by vkaravir View Post
    A really interesting looking service (which I haven't tried yet) is src.sencha.io which basically acts as a proxy for your images and resizes them based on the device screen size.
    Is it done real time? The performance may be an issue when different-size devices all access your site at the same time.

  11. #11
    Senior Member noonoo1's Avatar
    Join Date
    Jul 2007
    Location
    Wales, UK
    Posts
    3,261
    ENOUGH SAID


    Mobile Web Search, forget google, bookmark... JUST.mobi

    Snowboards.mobi | Convert2.mobi | Caravans for Sale | VOTES.mobi

  12. #12
    Senior Member ChinaMobi's Avatar
    Join Date
    May 2010
    Posts
    1,593

    Default

    noonoo1, my question still remains. Are the sizes of image files altered on the fly? For example, if I have a file that's 1MB on the site, will it be altered to, say 100KB, for presentation on iPhone?

  13. #13
    Founding Member Scandiman's Avatar
    Join Date
    Jun 2007
    Location
    NorCal
    Posts
    9,538

    Default

    Quote Originally Posted by ChinaMobi View Post
    noonoo1, my question still remains. Are the sizes of image files altered on the fly? For example, if I have a file that's 1MB on the site, will it be altered to, say 100KB, for presentation on iPhone?
    google "resizing images with php"

  14. #14
    Senior Member noonoo1's Avatar
    Join Date
    Jul 2007
    Location
    Wales, UK
    Posts
    3,261

    Default

    Quote Originally Posted by ChinaMobi View Post
    noonoo1, my question still remains. Are the sizes of image files altered on the fly? For example, if I have a file that's 1MB on the site, will it be altered to, say 100KB, for presentation on iPhone?
    I do not know, you will have to try it out.
    ENOUGH SAID


    Mobile Web Search, forget google, bookmark... JUST.mobi

    Snowboards.mobi | Convert2.mobi | Caravans for Sale | VOTES.mobi

  15. #15
    New Member
    Join Date
    Aug 2011
    Location
    Helsinki, Finland
    Posts
    9

    Default

    Quote Originally Posted by ChinaMobi View Post
    noonoo1, my question still remains. Are the sizes of image files altered on the fly? For example, if I have a file that's 1MB on the site, will it be altered to, say 100KB, for presentation on iPhone?
    Yes, the images are altered on the fly. Performance on their part could be a problem, but I guess sencha caches the results. And they probably cache the original image downloaded from your server, so this approach might actually result in fewer request to your server.

  16. #16
    First time poster!
    Join Date
    Aug 2011
    Posts
    1

    Cool Glad ya liked my article!

    Heya, glad you liked my article on adaptive web design! If you check out my site now, you'll see I'm using the TwentyEleven wordpress theme, which uses an adaptive layout that scales content. The only current issue with it is that video embeds from youtube are still not dynamically scalable, so the layout gets screwed up at narrower widths on pages with youtube embeds.

    Anyway, let me know if you have any questions - would love to discuss more.

    -Jeffrey (JeffreyDonenfeld.com)

  17. #17
    Mobility Regular
    Join Date
    Sep 2007
    Posts
    115

    Default

    Sencha does resize the images but man, quite difficult to program or edit from their templates and restricts a lot. One of the easiest and cleaner wordpress templates (acting as widgets-not themes) is WPtouch. Free unless you want to do more with it. Until you master Sencha, WPtouch would be my recommendation.

  18. #18
    New Member
    Join Date
    Aug 2011
    Location
    Helsinki, Finland
    Posts
    9

    Default

    I just ran into an interesting server-side php solution for resizing images:
    adaptive-images . com
    Seems really simple to set up.

  19. #19
    MobiEnthusiast coast's Avatar
    Join Date
    Jul 2007
    Posts
    4,720

    Default

    Our old friend James Pearce wrote this article in response to Responsive Web Design http://tripleodeon.com/2010/10/not-a...20px-wide-one/

    Does anyone know how using CSS to resize images will impact load time and data transfer costs?
    Need a developer? MobileSiteStore.com | More good stuff at Drosty.com
    Accepting Quality guest posts via PM only for mobiEnthusiast.mobi
    (NO press releases or story ideas, completed, unique articles only
    )

Similar Threads

  1. Designing with tables
    By coast in forum Mobile Web Development
    Replies: 1
    Last Post: 06-23-2011, 02:00 PM
  2. Learn Designing
    By herpreet0123 in forum Mobile Web Design
    Replies: 4
    Last Post: 12-08-2010, 01:29 PM
  3. Designing websites for mobile users - What PC?
    By Scavenger in forum Latest "dotMobi" News
    Replies: 0
    Last Post: 05-12-2009, 02:30 PM
  4. Replies: 2
    Last Post: 08-04-2008, 11:31 AM
  5. Designing for Teenagers
    By gogo in forum Mobile Web Design
    Replies: 1
    Last Post: 12-14-2007, 09:46 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
A Yup.mobi Mobile Site
Mobile Dating