Help me understand fluid css and mobile

I understand in principle how a standard html5 mobile site work,

I have worked on joomla with responsives sites that use the bootstrap system and again understand how that works,

I am having a site built using expression engine with customization, a high criteria is that it must work ans scale well on all devices, they will be using fluid css,

Is this in principle the same as twitters bootstrap?
will it be using media sizes?

in joomla you just make components not viable for certain media sizes, playing with this you could get the design to look well in all media sizes, the downside was that everything got loaded and was just not visible, so your mobile was loading the same as your desktop and that’s not so good if you have a heavy image site,

is this the same with fluid css?

is it possible to have fluid css and also a dedicated mobile site?

thx
Steve

Hi Steve. Yeah, it’s not good practice simply to hide stuff for mobile devices, as the user still has to download it all. Using CSS, the user pretty much has to download everything, which is a limitation for some sites. If you want decorative images to appear on a desktop site but not on mobile, then you can serve them as background images just for desktop devices, but that’s about it.

The good thing about this issue is that it forces you to look at what really needs to be on your site. If there’s a lot of stuff you don’t want to appear on the mobile version, it often is a sign that it shouldn’t be on your desktop version either, because it’s probably just junk and clutter. If that’s not the case, then you probably should be looking at a separate mobile site.

If you go the CSS route, then yes, it’s the same principle as Boostrap, where different styles are served up to different screen sizes using @media rules. EE makes it easy to do this, as you have complete control over your HTML, CSS and JS.

Hi Ralph
Thanks for that, is it possible to have a combination of fluid css for desktop and tablets then a dedicated site for mobile?

also does anybody jnow of any good reading that covers the subject?
Steve

To serve up a different site for some devices, you need a rather complex script to sniff for devices, and those devices can lie. The script also needs to updated often. I’ve never delved into this, though. Unless this is a big site that truly needs to do different things on phones, I’d go for the one site styled with CSS. Having multiple sites to manage is a big call, so make sure it’s worth your while.

Thx again Ralph
just trying to get my head round it so when I talk to the developers I can at least pretend I know what I am talking about,

I have been doing the design for our holiday website, because we have the villas professionally photographed I was trying to utilize this in the design, so the images are large (820px wide) I suppose i was thinking they could be a bit smaller and of a lower quality on the phone, saying that the resolution of some of the new smartphones is huge,

Ah yes, images! You can set images to, say, width: 100%, and they will fit nicely on any screen, but of course you have the problem of excessive file sizes for mobile. A lot of people have been working on solutions for that, and there are some handy scripts and services out there that will scale down your images for you before they are served to mobile devices, so that would be good to look into. Here are some links I have:

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
http://css-tricks.com/which-responsive-images-solution-should-you-use/
http://adactio.com/journal/4997/
http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/
Focal Point: Intelligent Cropping of Responsive Images: http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/
http://retinajs.com/

I’m glad you are getting your head around this before talking to developers. I wish I could find clients who did some research first!

It sounds to me like a single site that is optimized for various devices is the better solution for you.

thanks for that ralph its much clearer now :slight_smile: