Think Responsively: Tip for selecting a design (photoshop) width when designing fixed width responsive sites for SharePoint with Bootstrap

Usually when someone talks about SharePoint customization they dive directly into the CSS, Master Page(s) and Page Layouts.  Few people take the time to step it back to the “UI Design” level.  All good design start visually, working out your masterpiece on a canvas gives you the ability to see what works and what doesn’t before trying to implement.  Similarly it gives you the opportunity to discuss the time to  implement against the value.  There is a lot of work that goes into planning, designing and implementing a usable SharePoint interface and it generally starts in Photoshop.

For those of you designing for SharePoint and leveraging the Bootstrap framework, I figure’d I’d share this tip.  Many are familiar with a 960 px framework.  In those cases most people would start be creating their mockup in photoshop using a 960px image… eventually implementing it into a master page leveraging bootstrap – bootstrap using the “.container” class to apply this width.

If you are using the “responsive” feature of Bootstrap then you should be aware that there is a media query for sizes that have a minimum of width of 1200  (as seen below).  This means that for all users using a relatively modern desktop/laptop with a decent resolution, they’re going to see the site at 1200 pixels and things that stretch the full width of your design would actually seem short.  (Things like a navigation menu or header).

@media (min-width: 1200px)

{
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container
{width: 1170px;}
}

So, if you are planning on using a fixed width responsive design using Bootstrap, you should probably consider starting with a mock-up of 1200 px wide instead.  This will fit perfectly on larger screens and scale down on smaller ones. The width is 1170 in the media query but that’s accounting for padding and margin as well.  It’s best to stick with 1200 pixels as you will scale down as needed and if you want to ever stretch the full width of the design with no padding/margin you will need the full 1200px.

Remember this is for a “fixed width” design only meaning you are using <div class=”container”> and <div class=”row”> for your main containers.

Bonus Tip!

If you wish to have a “full screen and fluid” design then you were need to use <div class=”container-fluid”> and <div class=”row-fluid”>.  In that case you are building for full screen and that should be taken into account with your images as well.  Usually you would create a large enough image to fill the full width of your screen (picture a 24″ monitor @ 1920 resolution). The idea would be then that you do not specify an image height/width in the HTML, but rather let the build in CSS scale the image accordingly.  Provided it’s large enough to proportionally look good which stretched across the entire screen, you would be ok as it scaled down to smaller resolutions.  If you have text on the image you might want to hide it via a media query as it gets to phone size if it’s unreadable.

If you enjoyed this post or have and questions please feel free to drop me a comment!

Hope that helps,

Shane

Shane Perran Responsive Design, User Experience and SharePoint SME

You may also like...

I would love to hear from you.

%d bloggers like this: