Re: [CODE4LIB] responsiveness and Wordpress
Ryan, I think you've all done an outstanding job with the integration of blacklight and bootstrap. I particularly like the Artists Book collection. We've been tossing around the idea of prototyping a blacklight and bootstrap interface on top of an Alma back-end. What are you using on the back-end? I also like how prominent your share your feedback link is. How is that working out for you all? We just launched our beta Finding Aids site, and our Site Feedback link is not as prominent, though we do have other channels like Ask a Question and Comments on Collections, Series, and file-level components. Still working on a few things, but here's the site: http://findingaidsbeta.princeton.edu I hope you do write up a paper about your process. I look forward to reading it! -Shaun On 7/11/12 11:03 AM, Ryan Freng wrote: In May we (University of Wisconsin - Madison Libraries) released a front end to our catalog that is responsive. It's built on blacklight with twitter bootstrap. It works well regardless of screen size (tested by opening in all browsers and minimizing and maximizing the width of the window). With fluid responsive design you design for ranges, 480, 480-768, 768-980, 980-1280, 1280-1366, 1366-1920 etc. I haven't watched Matthew's talk but the benefit of using bootstrap is that 95% of the work is done for us and we just have to add a bit of custom CSS for look. You can take a look at the responsive design here: http://search.library.wisc.edu We released it in the summer so we had a few months to tighten it up so come Fall the students will find a much better experience with their catalog. Our mobile facetting is similar to Amazons but isn't overly simplified. The system has overall been testing well with patrons across the spectrum (undergrads to grads in various fields to faculty and staff). I suppose at some point we should write a paper or at least have a talk about this. Ryan On Jul/11/12, at 8:28 AM, Cynthia Ng wrote: A responsive catalogue would definitely be interesting to see. I imagine what can make this very difficult to do is the fact that many (if not most) libraries have a proprietary ILS/OPAC, which can make it very difficult to customize. I've seen some mobile versions of faceted interfaces (mostly from databases and discovery tools, such as Summon and EBSCO), but none that are responsive. Nevertheless, if you're looking for ideas, I think these interfaces can give you a good idea of what else has been done at least at the small screen device size. On Tue, Jul 10, 2012 at 11:06 PM, Bilal Khalidbilal.kha...@utoronto.ca wrote: 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 -- Bilal Khalid Senior Applications Programmer/Analyst Information Technology Services University of Toronto Libraries (416) 946-0211 -- Shaun D. Ellis Digital Library Interface Developer Firestone Library, Princeton University voice: 609.258.1698 | sha...@princeton.edu
Re: [CODE4LIB] responsiveness and Wordpress
A responsive catalogue would definitely be interesting to see. I imagine what can make this very difficult to do is the fact that many (if not most) libraries have a proprietary ILS/OPAC, which can make it very difficult to customize. I've seen some mobile versions of faceted interfaces (mostly from databases and discovery tools, such as Summon and EBSCO), but none that are responsive. Nevertheless, if you're looking for ideas, I think these interfaces can give you a good idea of what else has been done at least at the small screen device size. On Tue, Jul 10, 2012 at 11:06 PM, Bilal Khalid bilal.kha...@utoronto.ca wrote: 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 -- Bilal Khalid Senior Applications Programmer/Analyst Information Technology Services University of Toronto Libraries (416) 946-0211
Re: [CODE4LIB] responsiveness and Wordpress
We might be able to take inspiration from responsive shopping cats like Tiffany's - designed by Brad Frost. I saw where somewhere on the web he authored a step-by-step, this-is-why-he-did-what breakdown look into his design of a shopping cart. Of course, as I write this I see it's not in his usual blog. But, you know, commercial shopping catalogs really cater to browsing - do [public / academic[ patrons tend to *browse* the library catalog? Are there any user studies about how patrons use library cats? // Michael -Original Message- From: Code for Libraries [mailto:CODE4LIB@LISTSERV.ND.EDU] On Behalf Of Cynthia Ng Sent: Wednesday, July 11, 2012 9:29 AM To: CODE4LIB@LISTSERV.ND.EDU Subject: Re: [CODE4LIB] responsiveness and Wordpress A responsive catalogue would definitely be interesting to see. I imagine what can make this very difficult to do is the fact that many (if not most) libraries have a proprietary ILS/OPAC, which can make it very difficult to customize. I've seen some mobile versions of faceted interfaces (mostly from databases and discovery tools, such as Summon and EBSCO), but none that are responsive. Nevertheless, if you're looking for ideas, I think these interfaces can give you a good idea of what else has been done at least at the small screen device size. On Tue, Jul 10, 2012 at 11:06 PM, Bilal Khalid bilal.kha...@utoronto.ca wrote: 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 -- Bilal Khalid Senior Applications Programmer/Analyst Information Technology Services University of Toronto Libraries (416) 946-0211
Re: [CODE4LIB] responsiveness and Wordpress
Are the responsive shopping cat positions for LC employees? On 12-07-11 9:10 AM, Michael Schofield mschofi...@nova.edu wrote: We might be able to take inspiration from responsive shopping cats like Tiffany's ... // Michael -Original Message- From: Code for Libraries [mailto:CODE4LIB@LISTSERV.ND.EDU] On Behalf Of Cynthia Ng Sent: Wednesday, July 11, 2012 9:29 AM To: CODE4LIB@LISTSERV.ND.EDU Subject: Re: [CODE4LIB] responsiveness and Wordpress A responsive catalogue would definitely be interesting to see. I imagine what can make this very difficult to do is the fact that many (if not most) libraries have a proprietary ILS/OPAC, which can make it very difficult to customize. I've seen some mobile versions of faceted interfaces (mostly from databases and discovery tools, such as Summon and EBSCO), but none that are responsive. Nevertheless, if you're looking for ideas, I think these interfaces can give you a good idea of what else has been done at least at the small screen device size. On Tue, Jul 10, 2012 at 11:06 PM, Bilal Khalid bilal.kha...@utoronto.ca wrote: 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 -- Bilal Khalid Senior Applications Programmer/Analyst Information Technology Services University of Toronto Libraries (416) 946-0211
Re: [CODE4LIB] responsiveness and Wordpress
In May we (University of Wisconsin - Madison Libraries) released a front end to our catalog that is responsive. It's built on blacklight with twitter bootstrap. It works well regardless of screen size (tested by opening in all browsers and minimizing and maximizing the width of the window). With fluid responsive design you design for ranges, 480, 480-768, 768-980, 980-1280, 1280-1366, 1366-1920 etc. I haven't watched Matthew's talk but the benefit of using bootstrap is that 95% of the work is done for us and we just have to add a bit of custom CSS for look. You can take a look at the responsive design here: http://search.library.wisc.edu We released it in the summer so we had a few months to tighten it up so come Fall the students will find a much better experience with their catalog. Our mobile facetting is similar to Amazons but isn't overly simplified. The system has overall been testing well with patrons across the spectrum (undergrads to grads in various fields to faculty and staff). I suppose at some point we should write a paper or at least have a talk about this. Ryan On Jul/11/12, at 8:28 AM, Cynthia Ng wrote: A responsive catalogue would definitely be interesting to see. I imagine what can make this very difficult to do is the fact that many (if not most) libraries have a proprietary ILS/OPAC, which can make it very difficult to customize. I've seen some mobile versions of faceted interfaces (mostly from databases and discovery tools, such as Summon and EBSCO), but none that are responsive. Nevertheless, if you're looking for ideas, I think these interfaces can give you a good idea of what else has been done at least at the small screen device size. On Tue, Jul 10, 2012 at 11:06 PM, Bilal Khalid bilal.kha...@utoronto.ca wrote: 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 -- Bilal Khalid Senior Applications Programmer/Analyst Information Technology Services University of Toronto Libraries (416) 946-0211
Re: [CODE4LIB] responsiveness and Wordpress
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 Reidsmareids...@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
Re: [CODE4LIB] responsiveness and Wordpress
Ron, 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. If you'd like to learn more, check out my talk from ALA last month on Responsive Design for libraries. It's part theory and part hands-on, walking you through the techniques. The talk: http://matthewreidsma.com/articles/23 The LOL Library demo site: http://lollibrary.org Cheers, -Matthew On Sun, Jul 8, 2012 at 2:22 PM, Andrew Hankinson andrew.hankin...@gmail.com wrote: 'Responsive,' in modern web design parlance, refers to the ability of your layout to respond to the different devices and screen sizes that may be accessing your site, and present your content in such a way that it doesn't force the user into non-native device modes of interaction (e.g., 1280 pixels wide means the user on the iPhone will be doing a lot of horizontal scrolling and zooming). So not a re-definition; just an additional meaning. On 2012-07-08, at 1:58 PM, Dave Caroline wrote: I always understood responsive to be opposed to sluggish and a reference to speed. Do I see a redefinition starting up? Dave Caroline -- -- --- Matthew Reidsma GVSU Web Services Librarian 616.331.3577 :: @mreidsma
Re: [CODE4LIB] responsiveness and Wordpress
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 | sha...@princeton.edu
Re: [CODE4LIB] responsiveness and Wordpress
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 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 | sha...@princeton.edu
--
--
---
Matthew Reidsma
GVSU Web Services Librarian
616.331.3577 :: @mreidsma
Re: [CODE4LIB] responsiveness and Wordpress
Thanks for following up in such detail, Matthew. I just wanted to make
sure you weren't giving the false impression that Bootstrap imposes any
kinds of limitations on people's designs or media display options.
Cheers,
Shaun
On 7/9/12 12:05 PM, Matthew Reidsma 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 Ellissha...@princeton.edu 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 | sha...@princeton.edu
--
Shaun D. Ellis
Digital Library Interface Developer
Firestone Library, Princeton University
voice: 609.258.1698 | sha...@princeton.edu
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 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 | sha...@princeton.edu
--
--
---
Matthew Reidsma
GVSU Web Services Librarian
616.331.3577 :: @mreidsma
Re: [CODE4LIB] responsiveness and Wordpress
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
[CODE4LIB] responsiveness and Wordpress
Greetings! I'm working on updating my library's website architecture to make it responsive http://www.alistapart.com/articles/responsive-web-design/ and also to incorporate at least some aspects of HTML5 and CSS3. I keep waffling between using Twitter Bootstraphttp://twitter.github.com/bootstrap/raw and using a responsive WordPress theme (possibly one with Bootstrap baked in, like The Bootstraphttp://wordpress.org/extend/themes/the-bootstrap ). I'd be interested in hearing from others who have investigated options for responsiveness. What decisions did you make? What informed those decisions? Ron Gilmour Web Services Librarian Ithaca College Library
Re: [CODE4LIB] responsiveness and Wordpress
I always understood responsive to be opposed to sluggish and a reference to speed. Do I see a redefinition starting up? Dave Caroline
Re: [CODE4LIB] responsiveness and Wordpress
'Responsive,' in modern web design parlance, refers to the ability of your layout to respond to the different devices and screen sizes that may be accessing your site, and present your content in such a way that it doesn't force the user into non-native device modes of interaction (e.g., 1280 pixels wide means the user on the iPhone will be doing a lot of horizontal scrolling and zooming). So not a re-definition; just an additional meaning. On 2012-07-08, at 1:58 PM, Dave Caroline wrote: I always understood responsive to be opposed to sluggish and a reference to speed. Do I see a redefinition starting up? Dave Caroline
