Shaun, Good point. I'll do a little explanation of what I mean: Responsive design uses three techniques for developing interfaces that look good on all screen sizes: 1. Flexible grids (your design is grid-based and flexible) 2. Fluid images (images scale depending on screen size) 3. Media Queries (a new addition to CSS3, supported by all modern browsers) (I don't want to get into all the details here, but if folks want to learn more about responsive design, I recommend Ethan Marcotte's seminal article on A List Apart: http://www.alistapart.com/articles/responsive-web-design/ ) The last element of responsive design, media queries, allows you to make parts of your style sheet conditional to the user's device. The most common media query is one based on screen size. For example, you can have certain styles appear only once the screen is wider than 600 pixels by using a min-width query: @media screen and (min-width: 600px) { /* Conditional styles here */ } Determining what sizes to make these styles appear (what Marcotte calls "break points") is a tricky business. Often, people use common devices to dictate the places where styles will change. So they might have a break point at 480px (iPhone landscape), 600px (7" tablets in portrait), 768px (iPad portrait), 1024px (iPad landscape, "desktop"), and 1200px (wide screen). This is often how frameworks like Bootstrap and Foundation are built: using predetermined break points that are based on device sizes rather than the content of your site. Because every site's content is different, breaking things at device widths (like 768px) might not really work for your content. While those screen sizes are pretty common now (or rather, were more common a year or two ago), with the proliferation of devices with varied screen sizes, locking things to screen size is as losing a proposition as browser or device sniffing. Your content should dictate your break points, rather than the devices you assume your users are carrying. My rule of thumb: design in the browser, and add break points when your site starts to look stupid. So if you want to start out with Bootstrap, that's great. Just remember that when you put your actual content into your site, adding media queries at 768px or 600px might not make sense, because your particular content might look stupid at 680px. And you never know what device will be released next year with a 680px wide screen. Be prepared to adapt those break point values as you tweak. Again, I talk more about this in my talk, which has video, audio, references, and slides available at http://matthewreidsma.com/articles/23 (I actually don't advise using pixels, since they are not flexible and resizable like ems, but you can listen to the talk to hear more about that.) If you want to see responsive sites in action, my blog above as well as the LOL Library demo site ( http://lollibrary.org ) can be demoed by resizing your browser window. Hope that helps! Cheers, Matthew On Mon, Jul 9, 2012 at 11:07 AM, Shaun Ellis <[log in to unmask]> wrote: > Matthew, > I don't think the following statement is helpful to the folks on this list > without further explanation: > > >> Bootstrap or Foundation are great frameworks for starting quickly with >> responsive design, but you'll get the most out of your site if you do >> the work yourself, based on your own content. > > > Why are using a CSS framework like Bootstrap and "doing the work yourself" > mutually exclusive? Why not save time by using the framework and then > customize it to fit your own content? > > -- > Shaun D. Ellis > Digital Library Interface Developer > Firestone Library, Princeton University > voice: 609.258.1698 | [log in to unmask] -- -- --- Matthew Reidsma GVSU Web Services Librarian 616.331.3577 :: @mreidsma