How does your site look on mobile or tablet?

Unless you have responsive design, your site probably does not look or act as nice across devices as it does on the desktop.  Many sites are really difficult to look at or navigate when you get to the smaller devices and most of us just can not afford to have additional sites built for every device.  There are so many different sizes these days.  That is where responsive design comes to the rescue.  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.

So now with responsive design, we can design your site once for viewing across platforms rather than develop a new site for each device.

Many designers and developers use fluid design to try to get something that will adapt proportionally in order to try to simulate the same experience as on the desktop.  So what they have to do for that is to decrease the entire size proportionally.  In other words your whole page will shrink to completely fit into the view of your mobile device.  I am certain you can see how that could make it a bit difficult to navigate since it  can result in some really small hard to use parts on your website.  With responsive design we use CSS Media Queries to present different layouts based on screen size and type.

Let me give you an example.   You may have a lot of fluff on your site that looks cool on the large screen but really mucks things up on mobile.  With responsive design, we can easily choose not to display those items.  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 for the small mobile device.  That way users won’t have to deal with it on their device and can get right to the meat of the subject.

If you design websites you should check out Twitter Bootstrap if you haven’t already.  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 to create my own design.

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.

My portfolio site can be viewed right here.

4 thoughts on “How does your site look on mobile or tablet?

  1. Annie Reebel

    I totally agree with you, Bess. I like the way Twitter’s Bootstrap gives me something to start with for a site, it’s kind of like toning your canvas before you start your painting….the white of the canvas or the white of a blank page can both seem daunting– But, I am a ‘hacker’ more than a ‘coder,’ which is what I truly LOVE about Bootstrap. It’s fun! I can’t wait to go back over my older sites and re-design them using the responsive grid system.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>