What is Responsive Web Design and Why Use It

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.

10 really neat jquery plugins

Sharing some neat jQuery plugins with my fellow students and anyone else who is interested.

What is not to love about jQuery?  It is so nice for web developers these days that these nice little snippets of code are written and out there for all to use.   jQuery plugins can make your sites go from boring to WOW! with just a minimal effort.

Sliders

Sliders and carousels are so popular right now so it is good to have a few of them on hand

.  

One jquery slider that I personally love is Nivo slider.  It has really cool transitions and is super easy to incorporate into your website.  I recently used this on a Bootstrap site I built for a friend and it was really nice and worked well with the responsiveness that is Twitter Bootstrap.  Cool too is that it will resize itself based on the images you add so all don’t have to be cloned sizes.  Check out Nivo Slider here.

Another slider that is pretty cool and offers several options is Flexslider by Woo Themes/  

Yet another really nice slider is wowslider.  This is a free download.  On their site they say the following about their slider.

WOW Slider is a responsive jQuery image slider with amazing visual effects (Rotate,Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing. Wordpress slider plugin and Joomla slider module are available also.

In other words it is just too cool! 

Sorting

Super awesome plugin that gives you dynamic layouts, filtering and sorting.  I was looking through some plugins earlier and noticed this.  You see this effect on many web templates that are currently available.  Every time I see this effect I tell myself that I am going to buy one of those templates to learn it.  Now I have found the source!  Isotope offers their plugin to developers for $25.00.  It is truly magical and totally fits a need I have for an upcoming project.  It is open source so if it is a personal site you can use the code for free.  You can set up a masonry layout that can be sorted by your choice (maybe alphabetically or by category)  So cool!  Check it out!

Images

This is too cute!  Frame It lets you frame and animate your images for a lively view on your site.  

FrameIT works perfectly with static and responsive designs. It's ready to use on any device and comes with cross browser compatibility.

Layout

uSquare can be used for displaying team members, products, services, designs, blog posts or anything else that comes to your mind in a very interesting way.  Basically checkerboard style with image in one box and text in another.  Really cool layout.  On their demo, the images are grayscale and colorize on hover. When you click the image it slides opens with its box to display more info.

This is a very nice jquery tiles gallery.  It lays out masonry style with very nice even margins.  Each images can be clicked to enlarge like lightbox.  Gives you a uniquely different way to share images.  It is responsive and offers random complex grids with automatic image resize.

Radical Web Typography

Lettering.js can be found over on github and can help you create some really interesting and fun typography effects for your website.

With lettering.js, you can use kern.js.  You can just drag it to your bookmarks bar to install.  This is what they say about it.   I haven’t tried it, but it sounds interesting.

super-simple bookmarklet for designers that finally puts you back in control of your website's typography. Here's how it works: Add the bookmarklet to your browser and activate it while at your page. Then just click and drag to adjust your kerning, line-height, letter placement and more to your heart's content! When you're done, copy the generated CSS and use it in your own stylesheet, right there alongside Lettering.js.

Snow

Ok.  Maybe at Christmas time you want to add some snow falling to your images.  Check it out here.  This jquery plugin is called Snowfall..  How fun!

Considerations when building Responsive Websites

It is so important to actually think through how the various elements on your page will flow and be seen on various devices.  Oftentimes, you may even totally leave some sections out on mobile that are definitely included on desktop sites to make the site easier for the user to navigate.

In any case, you will want to consider which item should show first, second,  etc as the elements wrap on the mobile device.  What would make more sense to see first, second , third and so on.  If you aren’t careful when setting up your media queries, then your important information might just get buried way down a page and result in losing your user. So be sure to check, check, check devices to make sure you are giving the experience you want.

If you have a tab or navigation that needs to be accessed, remember that at least 44 pixels should be used so people are actually able to hit it and not too close to another so they aren’t hitting the wrong link which can be very frustrating.

Also don’t forget to change line height or you can get a very interesting mess!

Trent Walton brings up a very interesting thought about embedded maps on sites.  He says it is probably best to set the media query at 90% or your user may get stuck if the embedded map takes up the whole viewport.  I had not even considered that, but it is a very good point.  You can read his article here.

Though I haven’t studied this part yet, I read an interesting article on responsive design at smashing magazine .  They say

Through PHP and JavaScript, we can detect the time of day of the user’s current location. Liz Danzico serves an alternate style sheet to her readers depending on the time of day that a user visits her blog. If you visit it during daylight hours, the style sheet presents the text as dark text on a light background. You’ll see the opposite if you visit the website during the evening or night, which Liz does to optimize readability based on the assumption that your surroundings will have less light. This is responsive design.

That is cool, but for now I am focusing on the part of responsive design that affects layout.  However, I am looking forward to tackling some of that soon!