Matthew sez, "My rule of thumb: design in the browser, and add break points
when your site starts to look stupid."

Totally. I'd add that the real benefit from using a boilerplate is rapid
development. If you have the resources and the time, I'd always argue in
favor of rolling your own responsive grid.  That's pretty rarely the case,
of course. Using and customizing a framework has its own catches.

Actually, I _just_ used bootstrap as a crutch to redesign the website for a
public library (I designed their first site a couple years back) and I was
able to put it into production fairly quickly over the weekend. My big
epiphany was that in order to deviate from the stock bootstrap look (you'll
notice that most of the sites showcased on "Built with Bootstrap" look ...
like bootstrap!), I spent way too much time wrangling with the dense
built-in styles - and, on top of that, I was forced to work with markup that
IMHO is bloated with DIVs. In hindsight, I might have actually saved time
using a much more barebones grid (like Skeleton). 

One of the trade-offs for rapid development is that you might be
bottle-necking yourself into someone else's style - and worse, someone
else's code. Then again, if that code belongs to a gang like twitter - then
it's probably better to just go with it : ).

So long,

Michael
// Front-End Librarian
// twitter: @gollydamn






-----Original Message-----
From: Code for Libraries [mailto:[log in to unmask]] On Behalf Of Ron
Gilmour
Sent: Monday, July 09, 2012 3:19 PM
To: [log in to unmask]
Subject: Re: [CODE4LIB] responsiveness and Wordpress

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
>