Designing for Desktop and Mobile at the same time

**NailYener** · 08-22-2011, 02:19 PM

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

**ChinaMobi** · 08-22-2011, 09:10 PM

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.

**NailYener** · 08-23-2011, 08:28 AM

Originally Posted by ChinaMobi

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.

**ChinaMobi** · 08-23-2011, 09:06 AM

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.

**NailYener** · 08-23-2011, 09:35 AM

Originally Posted by ChinaMobi

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.

**vkaravir** · 08-23-2011, 04:40 PM

Originally Posted by NailYener

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

**ChinaMobi** · 08-23-2011, 09:07 PM

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!).

**MobileDesigner** · 08-24-2011, 07:11 AM

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?

**vkaravir** · 08-24-2011, 05:35 PM

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.

**ChinaMobi** · 08-24-2011, 09:14 PM

Originally Posted by vkaravir

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.

**noonoo1** · 08-24-2011, 09:44 PM

Have a look at this post.

http://mobility.mobi/showthread.php?...or-all-mobiles

**ChinaMobi** · 08-24-2011, 09:56 PM

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?

**Scandiman** · 08-24-2011, 10:24 PM

Originally Posted by ChinaMobi

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"

**noonoo1** · 08-24-2011, 10:33 PM

Originally Posted by ChinaMobi

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.

**vkaravir** · 08-25-2011, 06:42 PM

Originally Posted by ChinaMobi

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.

**Jeffzilla** · 08-26-2011, 05:52 PM

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)

**MobileDesigner** · 08-27-2011, 03:32 AM

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.

**vkaravir** · 09-01-2011, 06:48 PM

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

**coast** · 09-03-2011, 01:03 AM

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?