This blog is about Graphic Design, Vector Art, and Cartoon Illustration BradHallArt.com


Designing for mobile devices - creating a collapsable layout



When it comes to web design, my main goal has been for it to work properly, then to go back in and tweak it a bit to sharp it up. Often it has meant doing what I know will display properly, and then pondering how to make it work AND make it look better. Right now, I just want it to work. My ultimate goal will be to create what I am calling a collapsable layout, that is, a layout that will work for desktop and tablet and *fold in* for mobile devices.

Web pages have always been collapsable by nature. In fact, it's that propensity that led a lot of designers to figure out ways to keep hold of the shape. Back in the day, we used tables, and invisible gifs, and all kinds of stuff. So designing for collapse is a different way of thinking. This is what I have so far.

Multiscreen view in Dreamweaver 5.5
I am trying to create a layout that is divided into two or three *columns* visually, but will collapse down to a single *column* on a mobile device. The easiest way to do this is to line up images that are no more than 300 pixels wide, separated by non-breaking spaces. A non-breaking space, is, of course, just text, and when it finds itself displaying on a smaller screen, like a cell phone, it will break.

This works, but the problem is that with this method, there is no way to have a caption with the image. And div tags are not designed to align horizontally. I've always been very fussy about keeping the code clean and not relying on a lot of complex stuff that will ultimately break down, so I won't be easily satisfied.

This is a good place to start.