The hot trend in web design these days is Responsive Web Design (RWD). What is RWD? In short, it allows you to create a single design that scales up or down to fit a resolution on a device. Take Rockford Public School’s new responsive SharePoint 2013 site for example. The layout will change depending on which device you’re using to browse the site. From a huge desktop monitor with a resolution of 2560×1440, to a small smartphone of 320×480, this site will adapt and fit to your screen.

This CDW blog also uses RWD. Check out this post on your laptop, tablet, and mobile phone to see the differences.

rockford

 

Even though RWD has been around for a few years, it’s becoming more popular due to the number of mobile and tablet devices being used today. It’s easy to find statistics on how more people are using mobile and tablet devices to browse the web. Just do a search and you’ll find a bunch of number-crunching facts about mobile browsing.

Why would you want to use RWD?

In the past, in order to have your website scale correctly on different resolutions, you would need to create a separate website – thus the “m.domain.com” scenario. You would have to maintain each version of the site with different content making this method costly and timely. Using RWD, you have one site using the same content that scales automatically for you.

So how does responsive design actually work?

There are three main ways to leverage responsive design within SharePoint: Fluid Grids, Media Queries, and Device Channels.

Fluid Grids

For many years, we’ve designed based on a fixed width using pixels to keep the site at a specific width. In fluid grids, it’s about creating a grid system based on percentages. Just set the maxium size for the grid layout and divide the grid into a specific number of columns. All the content is then proportional within each column and if the screen is resized, the columns will collapse, shrinking the content within each column.

fluid_grids

 

There are a lot of free frameworks that already have everything you need: Bootstrap, Gumby, and Foundation just to name a few. However; they can sometimes be polluted with too many items which could slow down the design process and load times.

Media Queries

Using screen resolution, orientation, and others, media queries allows us change the content to fit the device accessing the site. If you’re familiar with CSS (Cascading Style Sheets), you simply add the @media style to your CSS and call out the elements you want to change.

Example Media Queries (CSS)

Screen Shot 2014-01-30 at 9.20.30 AM

The above CSS states that the “.row” element will decrease from its default size of “1200px” down to “768px” for someone accessing it via tablet and “320px” for someone accessing it via a phone.

An effective way to use media queries is to start with your mobile design first, and scale up to the higher resolution. That way you’ll use less CSS and focus more on the core content and functionality.

Device Channels

This is a new capability of SharePoint 2013 which introduces the ability to apply a unique master page for a specific device that is accessing the SharePoint site. For instance, you could have a custom master page for desktop browsing, but create a mobile version of that master page specifically for a mobile device.

device_channels

 

Although this concept works using the same content, you’ll have to create a new master page for each design that you want to use. You could end up with multiple master pages which could mean more time and energy spent on design, implementation, and testing.

Final Thoughts

Mobile usage is exploding and businesses need to be ready. A majority of businesses out there still do not have a mobile-friendly version of their site. Users are now starting to expect a mobile version of your site and if it’s not, they’re likely to go elsewhere. Another interesting detail is that search engine optimization (SEO) works better with RWD because there’s only one URL which makes it easier for search engines to crawl your site and give you better rankings.

SharePoint is a great platform to host your site, why not make it responsive and be ready for the future.

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=""> <s> <strike> <strong>