 |
| Responsive Web Design |
Responsive
web design embraces the idea that people do not all use the same device
and that considering user experience across devices is important. In
other words, you want to provide the user with the best experience no
matter the device they view your site on.
It is cool in that you can design once for viewing across platforms rather than developing new sites for each device.
Previously,
people would use fluid design to try to get something that would adapt
proportionally to the screen they were on. That can result in some
really small hard to use parts on your website. Responsive design uses
CSS Media Queries to present different layouts based on screen size and
type.
For
instance, you may have a lot of fluff on your site that looks cool on
the large screen but really mucks things up on mobile. Through media
queries, you can easily choose not to display that item. For instance,
on my site for miskata.com,
I have an image slider for the header. That is totally not useful for
the mobile user so in the media query, I set the display to none up to a
max width of 340px. That way users won’t have to deal with it on
mobile and can get right to the meat of the subject. And, I didn’t have
to go and code an additional site for that solution.
 |
| Responsive Web Design |
Twitter
Bootstrap has been a serious boon to developers and designers to aid in
developing good working and attractive responsive sites. The base code
is there for you to tweak as you desire. The framework is awesome!
Many of the media queries you will be using and actions like collapsing
the navbar for mobile are already planned out in Bootstrap, so it is as
easy as just adding a couple of words to your class to select the
features you want and you are at the start of something very cool.
What
Twitter Bootstrap is not. It is not a theme. You still need to design
the site which is my preference because I like the control of deciding.
What
Twitter Bootstrap is. A great compilation of css and JavaScript that
includes everything you could have thought of and some you couldn’t to
change up your site. Bootstrap provides the basic programming for the
framework and you decide which features to use and how to use them.
It is open source, so if you haven’t already, give it a try and add some value to your clients that is super easy to add.
