Making a site mobile by resizing -how does it work?

I’m looking into the various solutions to make a site work on both desktop and mobile platforms and understand from reading about it that the most failsafe solution is to have it automatically rearranges itself depending on the screen size.
A neat example I came across which does this is Creattica.

I’m trying to learn more CSS but could someone please explain to me the general concept of how the mentioned site does this? It works without Javascript, but it won’t even let you in with cookes disabled so I’m wondering if that has anything to do with it or if it’s all in CSS.

What Creattica is doing is just floating the ARTICLEs. That automatically makes it wrap so that it doesn’t become too big on mobile or smaller screen sizes. An efficient way, to be sure, but probably not the best.

What you’re looking for is Responsive Web Design (the author, Ethan Marcotte also wrote a book on the topic, found [url=http://www.abookapart.com/products/responsive-web-design]here. Really what it is is a website that responds to the user. Meaning, as you described, whatever the user is using (be it a 27" desktop, an 11.5" laptop, a netbook, or a mobile phone) will make the website respond to it and therefore suit it better.

There are many ways to do this. Fluid web layouts, [url=http://www.w3.org/TR/css3-mediaqueries/]CSS Media Queries, and [url=http://unstoppablerobotninja.com/entry/fluid-images]Auto-resizing images. These all help to adapt the website to the user.

One way to make this quite simple is to build for Mobile First as suggested by Luke W. But, of course, that would be something to consider when you fully grasp the concept. I’d recommend reading those articles first.

~TehYoyo

Impressive, but a lot of it is over my head (I’ve quickly read through all the above links). I still don’t fully understand how the box model works although I now grasp the concept of DIVs being invisible “boxes” next to each other (but don’t understand how they relate to each other’s placement). The grid system which is referred to in those articles seems overly complex to me, so is it really necessary to go that route in order to build a working website which works on multiple devices, or is that mostly for very complex and advanced sites?
I’m still in the process of deciding a layout for my site, so at this stage I’m open for all sorts of ideas, but based on my content I’m aiming for a 2-column design where the site navigation fixed (regardless of where you scroll) is at the top of the rightmost column. And of course a header and footer. Simple and functional.

Back to the Creattica site; so it’s basically a fluid design which when resized smaller stacks the DIV boxes on top of each other? It seems to work fine but you say it’s probably not the best way to make a site responsive -is this because the images should auto-resize, which it doesn’t seem to do?

There are many free html grid systems that can do this for you. This is just one of many: http://getskeleton.com/

Check out http://cssgrid.net it’s a responsive grid and it works quite wonderfully. There are many of these out there though I hear.

So these are grid templates and all I do is add the HTML content (and tweak the CSS to my liking if needed)?

But as a novice I’m having trouble understanding the principle or basic idea of a grid. Is it really just a bunch of DIV “boxes” in a fluid setup which when resized shift places? And does a grid setup work with any design idea (such as my idea for a 1 or 2 column site with header and footer) or will the site look completely different?

The site you linked to has a number of layouts, depending on the width of the screen. This is controlled by a bit of advanced CSS called @media queries, which determines different settings for different screen sizes.

Before jumping in too deeply here, start with your content. What’s the best way to organize and present your content to users? That’s the question to be asking. Then, from that, work out an appropriate layout—perhaps for desktop to start out with, but it could be mobile if you like. (The advantage of the latter is it helps to avoid unnecessary, decorative junk.) Either way, work out your ideal layouts, then look at how they can be constructed—first with HTML, and then with a layer of CSS styling. We can help you with the layout if you like. But it is best to plan a site carefully and deliberately, like a house. A lot of people rush in without clear plans, and the whole thing ends up falling into a messy heap. :slight_smile:

Absolutely jump in! Use the example and play around with how it works. It’s responsive to the screen it’s on and looks really good on a mobile device.
I use it on my pet project <snip> because I barely have to do anything to make it work.

The best way to learn is to use. Use it and anything. Check out teamtreehouse’s responsive tutorials: http://teamtreehouse.com/library/design-foundations/css3/media-queries

never the less cssgrid.net is ready to go.

I, personally, don’t find grids super helpful. In my eyes, what they really are are just pre-design tools. They’re something to consider when you’re making your website. I consider “grids” to be an integral part of developing and designing a website. For instance, if I give you a grid that divides the webpages into 3rds (by percent, although that’s impossible to accomplish w/ a fixed grid - more to come later), and you make a “DIV” (in your mockup) that is inside of one of those thirds, all your really doing is saying to yourself, "I want to make this section of content 33% wide. This should be something that you think about anyways.

One of the things that I think gets confusing for people is that there are grids that claim to be responsive but are fixed (meaning, in pixels). For instance, if I download 960.gs, I get a grid that is 960px. If I want to make my website responsive (see my above post), then I shouldn’t use a fixed width of 960px. Some grids say that their boxes are defined by percentages, meaning, that they are, say, 10% of the page. This gets confusing as they end up just being 96px (in our case). You have to interpret what you put down. When you make something 96px, know that it really means “10%” in your CSS.

I hope that didn’t get too confusing.
~TehYoyo

I think a 2 column + header/footer layout such as this this example) will fit my content the best. A single column might even work, depending on if some content should be available from any page or not… I have lots of usability questions like that.

Can I use a grid for a layout such as this, or are they just for web designs consisting of many columns (such as used in newspapers) side by side?

You can indeed, but before rushing into grids, ask it it’s really necessary. They ted to introduce a lot more complexity that you need, and can make life more difficult in the end. IMHO, nothing beats building pages yoursefl from scratch. Then you really understand how they work, and there’s no unnecessary stuff getting in the way.

Well, as I can see my audience using mobile devices in addition to desktop computers this seemed to be a solution. Would designing the website using the standard box model and relying on separate stylesheets for different platforms be the easier solution?
Any downsides compared to a “collapsable” grid solution?

It depends on how large your site is, but in general, it’s not hard at all to set up your site so that on smaller viewports the elements can rearrange themselves. This doesn’t require separate style sheets, but simply some extra styles within the main style sheet that cater for smaller screens, using @media rules. A lot of sites are doing this now, and it’s not very complicated at all. TehYoyo’s first link in post #2 lays out how it works nicely.

This kind of responsive design is all the rage now, but whether it will last is another matter. Some people don’t like seeing something different on smaller devices (or when they resize their desktop browser window). Some smart phones let you zoom in and out with a simple tap, and in a way, that can be a nicer experience.

Also, have a look at this slideshow, which presents another way of approaching the whole issue. The web was nice and responsive when it was first invented, and it’s only CSS practices that have stopped it from being so. The point of that slideshow is to give all devices a basic, functional layout, and add in extra styles, where appropriate, for various devices.

There is a problem with media queries that few seem to bring up. The device, browser, whatever. Will download the stylesheet regardless if it is for it or not. So you better be carful when using them.

I see this as a feature.

You should remember that mobile portrait can swiftly change to mobile landscape. You wouldn’t want to wait for additional resources to download, as a user.

Even more, there shouldn’t be so much more CSS added to all media queries code than the base code, so it’s pretty much a non issue.

Yet downloading the full CSS for the desktop would be fine on limited and expensive data connections? Not everyone has unlimited data you know. The reason one would want to send a mobile device a different stylesheet is not only for a smaller screen, but also to send it a smaller CSS file. That however, becomes futile because media queries do not do that.

I don’t grasp your concept of a big CSS load, but I’ll play along. I’m not sure you even try to make a valid point, since you don’t give out any viable alternative solution, but…

To minimize data traffic, you suggest something like this: browser sniffing/device width detection and sending just enough CSS (along with “just enough” from other resources) for one page alone. This, following your smaller CSS file logic further.

When the user switches from portrait to landscape or vice-versa, bad UX: waiting for additional resources to download, render again.

When the user goes to another page, bad UX: waiting for distinct additional resources to download, along with the content, render again.

Can you spot a bad pattern here? You’re thinking distinct pages, when you should be thinking entire websites.

Also, media queries are not for traffic control, are they? Why would you hold that against them beats me! Reusable, cached resources make for inexpensive traffic and good UX.

As a side note, CCs were not adopted across UAs for a reason. There is no need for them. Aside the “repair me” reason for bad UAs.

<hr>

… or you could build a m.* version for a your page. This is the only other viable (really?) solution we have. You’re pro that?

<hr>

Let the user worry about data plans. You worry about things that regard you: reusable, cached, well thought resources… and the best UX (which means media queries also).

A CSS file being so big that you have to worry about data traffic means you have a bad CSS, not that the user has a cheap data plan. This goes for images, JavaScript code, markup also. Meaning it’s not the fault of media queries!

Grids and responsive design are two different things.

<hr>

Grids try to do for the blank canvas that is the browser windows, what the graph paper does for blank paper: it sets detailed and precise guidelines for positioning. Too detailed for my taste, in some grids.

<hr>

Media queries try to do for the empty space that is the browser window what the movers do with the furniture placement in their trucks: try to fit it all in a given space, without leaving anything hanging out.

<hr>

There are grids that follow the responsive design concept, there are grids that don’t, and there are media queries based designs possible without grids.

If you feel like you have to control positioning down to microscopic level, grids may help you do that. In return, they’ll ask you to conform to their naming rules inside your markup and CSS.

On the other side, media queries will ask from browsers to know of them in order to work. This means that older browsers, legacy IE (IE8-) are left out.

<hr>

Responsive design and mobile first approach in particular, is a shift in concept you’ll only get by actually doing it. Doing it… the right way! Thinking mainly desktop or letting past conditions in web design still dictate your present state of mind will not help you with this shift.

Responsive design is not a fad. At the very least is a stepping stone towards something even better. Skipping the practical part and looking from the sidelines, only makes for a superficial understanding.

I don’t suggest anything. I said nothing about device/browser sniffing. Nor do I suggest an alternative, because I don’t have one myself yet.

When the user switches from portrait to landscape or vice-versa, bad UX: waiting for additional resources to download, render again.

Right because a slim mobile CSS stylesheet cannot be flexible, must be ridged! You know it is a lot easier making a flexible style sheet for a phone, right? God forbid, you merge the mobile stylesheet for both portrait and landscape into one. Did ya know, you can embed media queries! Easier just making your mobile stylesheet fluid and flexible.

When the user goes to another page, bad UX: waiting for distinct additional resources to download, along with the content, render again.
No cached resources? Very easy to make dynamic content cacheable.

Can you spot a bad pattern here? You’re thinking distinct pages, when you should be thinking entire websites.

No, you are thinking distinct pages.

Also, media queries are not for traffic control, are they? Why would you hold that against them beats me! Reusable, cached resources make for inexpensive traffic and good UX.

Because it would have made sense not to download this stylesheet for a much larger device that it will never use. Why spend the time downloading it, then caching it into the small amount of RAM or taking up precious storage space while reducing the life of the Flash drive for something it is never going to use.

Mobile devices, are slow, limited resources CPU, battery, RAM, storage. Slow data connections (not Wifi), limited, expensive that can charge per-MB for overuse. You should be designing you site with those in mind. Not throwing the whole of Fort-Knox at it.

Let the user worry about data plans.

You are joking…YOU MUST BE JOKING. Let the user of your site worrying about their data plans when your sites is sucking it down like crazy downloading all this guff?! Really?

You are though.

The only way to determine a mobile device is by sniffing. And you forget that mobile devices, smartphones and tablets, can have bigger resolutions than some netbooks or desktops.

<hr>

Rant. No logic. And again, you’re saying mobile CSS stylesheet. This means you’re pro m.* variant. Good luck with that.

<hr>

Have you even tried responsive design? It seems to me that you’re just talking.