Matthew, Thanks so much for sharing your ALA presentation. I just finished listening to it and I found that it gave me a much better understanding of responsive design in general and media queries in particular. Ron On Mon, Jul 9, 2012 at 12:05 PM, Matthew Reidsma <[log in to unmask]> 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] > > > > -- > -- > --- > Matthew Reidsma > GVSU Web Services Librarian > 616.331.3577 :: @mreidsma >