Hello All,
Excellent discussion this. We've been plugging away at a responsive
design for our library catalogue at UofT, and I've often wondered: are
there any good responsive layouts and design patterns out there for
catalogue searching? I've seen some really nice generic examples, such
as the ones from LukeW (http://www.lukew.com/ff/entry.asp?1569), but
they tend to be for long form content like blogs and the like.
I'd love to see if anyone has implemented a responsive design for
faceted catalogue searching in particular.
Thoughts?
-Bilal
On 7/9/2012 4:46 PM, Shaun Ellis wrote:
> Michael,
> I agree that grid systems are very DIV heavy, but isn't that how grid
> systems are? You need block-level units to mark it up and both are
> basically as "semantic" as they can be. How is Skeleton's grid system
> any less DIV-bloated than Bootstrap's?
>
> I would also argue that the homogeneity of "Built with Bootstrap" site
> examples are due to inexperienced or lazy designers, not any inherent
> flaw in Bootstrap's architecture.
>
> > My big epiphany was that in order to deviate from the stock bootstrap
> > look, ... I spent way too much time wrangling with the dense built-in
> > styles
>
> For example, when you say "wrangling with dense built-in styles", I
> assume you are talking about the copious amounts of attributes needed to
> get certain things like gradients and rounded corners to display
> properly in all browsers? Unfortunately, you're not going to get around
> that density if you want those details in your design. If I'm mistaken,
> do you have an example?
>
> I don't claim that Bootstrap or other frameworks are silver bullets or
> are right for everyone. I also agree that understanding the mechanics
> of rolling your own responsive grid should not be overlooked. I just
> want to make sure that we are speaking accurately about the pros and
> cons of css frameworks. No one thinks twice about "locking themselves
> into" jQuery's code. jQuery, like Bootstrap, addresses common
> programming and web design needs in a reusable way. If you need
> something customized you can code it yourself, but let's not throw the
> baby out with the bathwater.
>
> -Shaun
>
> On 7/9/12 3:50 PM, Michael Schofield wrote:
>> 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
>>>
> --
> Shaun D. Ellis
> Digital Library Interface Developer
> Firestone Library, Princeton University
> voice: 609.258.1698 | [log in to unmask]
--
Bilal Khalid
Senior Applications Programmer/Analyst
Information Technology Services
University of Toronto Libraries
(416) 946-0211
