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:CODE4LIB@LISTSERV.ND.EDU] On Behalf Of Ron Gilmour Sent: Monday, July 09, 2012 3:19 PM To: CODE4LIB@LISTSERV.ND.EDU 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<reids...@gvsu.edu> 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<sha...@princeton.edu> wrote:Matthew, I don't think the following statement is helpful to the folks on thislistwithout 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 workyourself"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 | sha...@princeton.edu-- -- --- 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 | sha...@princeton.edu
-- Bilal Khalid Senior Applications Programmer/Analyst Information Technology Services University of Toronto Libraries (416) 946-0211
