Thanks for following up in such detail, Matthew. I just wanted to make sure you weren't giving the false impression that Bootstrap imposes any kinds of limitations on people's designs or media display options. Cheers, Shaun On 7/9/12 12:05 PM, Matthew Reidsma wrote: > 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] > > > -- Shaun D. Ellis Digital Library Interface Developer Firestone Library, Princeton University voice: 609.258.1698 | [log in to unmask]