Fixed-Width / Flexible-Width Hybrid Design

A List Apart, in case you didn't know, is the shizz-nit. A while ago I read Switchy McLayout—an experimental technique to dynamically jump between different layout approaches based on viewport width. A hack, yes, but CSS3's media queries aren't a reality yet.

Since I'm currently using an uncommonly wide fixed-width design, I decided to experiment around with this a little bit. If your viewport width is currently > 960px, and you resize it < 960px, then this page automatically switches to a design fixed at 750px instead of 960px. At least it works on the handful of browsers I tested (i.e. not IE).

It's not quite flexible width, but if you squint your brain just right, it's sort of a fixed/flexible hybrid. Maybe now the pitchfork and torch-weilding hoard will retire peacefully to the village. Well, anyway it won't work without JavaScript enabled, but that's just part of my conspiracy to gradually annoy people with small screen resolutions who eschew JavaScript.

Comments:

Post a Comment:
Comments are closed for this entry.
About

My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today