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
>