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
