Skip to main content

Responsive Design for SharePoint 2013

I have been wanting to write about this topic for quite some time. In this post I will review what all this buzz is about around Responsive design and relate it back to SharePoint 2013.

In this post I will not be focusing on any of the Twitter bootstrap or HTML5 boilerplate stuff. I will simply be focusing on CSS3 Media Queries and how it relates to SharePoint 2013.

In the video below I have put together some discussion points around min-width vs. max-width and also different ways that you can make SharePoint 2013 responsive with just CSS.

Per the video above here is the code that I referenced:

Simple Responsive CSS

Custom Responsive CSS

Overall I wish there were more standards on how and when to use these media queries. I will be looking forward to your comments and suggestions for more topics.



sandeep samuel said…
Hi Erik,

Nice post ,Thanks for sharing this in very detail with video.

Sharepoint Developers
Joao Ferreira said…
Hi Erik,

Once again great post and video.
Hope that you had time to take a look at bindtuning themes.
I'm already wainting for your next post, keep the good job you are doing.
Unknown said…
Hi Erik,

Thank you for your post, it is great.

I have a question about how to apply responsive design on SharePoint Online Public website?

Appreciate your response.
robert william said…
Great post .Responsive Website Development Long Island LI, New Jersey, Responsive Design NJ Website Development, NY Web Development.
aparna john said…
Hi,Web Design Cochin is such a subjective area that it is impossible to definitively say what makes a good design or not. However, there are golden rules that must be adhered.Thanks........
Hi said…
Hi Erik Swenson,
Nice post.
I need to add a button in Control template and when i click that button i have to hide some data.
Where can i do it. Could u pls give u inputs.
danielpantoja said…
Wow, really great stuff. For those of us tasked with leaping from SP2010 to SP2013 AND add responsive design this is a great help. I look forward to your SP2013 book, lol!
danielpantoja said…
Erik, good stuff, works great on desktop when resizing browser but mobile devices aren't applying the css. Any ideas?
That was a very useful and comprehensive video. Adding visuals to a presentation really enhances the appeal of what you wanted to convey. Even now, SharePoint 2013 is still making a buzz around the net, as is the case for responsive design. So I think this video is still worth sharing to those who want to understand what in the world is going on lately.

Kristofer Mcginty @
Nancy jaee said…
This post contains many useful info in every aspect. however one has to follow this information for better output.
Kathleen Davis said…
The video is a really good guide for those who are just getting to know the new features available in Sharepoint 2013. As for the min-max width, I dare say it really depends on what the content of the page will be. As long as it doesn’t have too much white space or appear too cluttered, I say it’s the right fit.

Thanks a lot Erik!!
I learnt a lot from your posts. Looking forward for more post and learnings :)

prasad parab said…
This comment has been removed by the author.
prasad parab said…
Nice post. Helped me a lot
Ruzina Bagum said…
Although there are various ways of creating a website but in my opinion you are absolutely perfect I.E. hiring a professional web designer is the best way. Thanks a ton for spreading such informative article.
website design company bangladesh
Lorna Croft said…
Creating an effective web existence is imperative for any company today and can be a great marketing tool if used effectively. Factors such as increased conversion rates and improved brand loyalty and recognition can be obtained by a producing a top-notch website design. CU Web Hosting
James Josiah said…
Its really nice posting to read i enjoy very much. I will recommend this link to my friends.

Web Design
Aroh said…
Thanks for your time and efforts. The video tutorial is extremely useful!
Amela Jones said…
Are you going to do a follow up article? Would love to know what happens next.

Web Design Agency
Shreeja K said…
Informative article, just what I was looking for.seo services chennai
mageswari j said…
Very Nice Blog I like the way you explained these things.
Indias Fastest Local Search Engine
Indias Leading Local Business Directory
mageswari j said…
Ladies hostel in chennai OMR providing state of the art facilities including Air condition, food, safety, security. Get best hostel facilitiesWomen hostel Adyar
mageswari j said…
brilliant article that I was searching for. Helps me a lot
call360 is Fastest local search Engine we have 12 years of experience in online industery, in our Search Engine we offer,
more than 220 categories and 1 Million Business Listing most frequently search categories
are Money exchange Chennai and Bike mechanic Chennai,
we deliver 100% accure data to users & 100% Verified leads to our
registered business vendors and our most popular categories are
AC mechanic chennai,
Advertising agencies chennai
catering services chennai
mageswari j said…
brilliant article that I was searching for. Helps me a lot.
We are one of the Finest ladies hostel near OMR and our
womens hostel in adyar is secure place for working womens
we provide home based food with hi quality, our hostel located very near to Adyar bus depot.
womens hostel near Adyar bus depot, we are one of the best and experienced
womens hostel near omr
Shreeja K said…
Informative article, just what I was looking for.seo services chennai
Aptron said…
Thanks for sharing this information and keep updating us. This is informative and really useful for me.

Web Development Training in Delhi | Animation Multimedia Training in Delhi | CAD Training Center In Delhi
Interesting post share within the design thinking for the maintenance of those websites. Thank you so much. Coimbatore websites | kovai web solutions | best logo design company
Winwebsolutionz said…
Can truly relate and retain this outstanding post. Very well written. web design company Chennai
Designpluz said…
It is a great sharing me...I am very much pleased with the contents you have mentioned. I wanted to thank you for this great article. I enjoyed every little bit part of it.Web Design Sydney
Brenda Lewis said…
The post is written in very a good manner and it contains many useful information for me.

affordable web design services | top web design companies
webwing said…
Great informational resource as always!I really love the way of explaining this post.You are just outstanding...Keep posting more.
professional mobile app development company
Earmold Sydney said…
Lovely blog with much more interesting article, I will keep on reading your update. Thanks for the share Ear Plugs for Swimming Ear plugs for Sleeping Custom Ear Plugs
Your Blog post has very helpful information.Thanks for share....
Website designers in Chennai
Thanks for the wonderful tip! Very detailed and informative. Easy enough for a beginner like me to understand.
I am searching top & best responsive web designing services company in Jaipur, India offering web design Jaipur in Cost Effective Prices.
The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..Web Designing Company Bangalore | Website Design Company Bangalore

I want to desgin a logo for my company. i was looking Logo Designing Company in Jaipur which make my logo in cheap prices.
Ali said…
Such a nice blog,i never ever had seen earlier this type of blogs which contain this type of information.. Website Custom design
Those guidelines additionally worked to become a good way to
recognize that other people online have the identical fervor like mine
to grasp great deal more around this condition.

white label website builder
ram ramky said…
This is the best explanation I have seen so far on the web. I was looking for a simple yet informative about this topic finally your site helped me a lot.
web development courses in chennai
Web Development Training in chennai
Nice and simple article about web design company and if you want to know more about web design company in London and use high quality Web Design services with responsive and use them at low cost Visit

Web Designers London
shivanya singh said…
Its a wonderful post and very helpful, thanks for all this information.
Animation Multimedia Training in Gurgaon
Ahmed arain said…
Web design Los Angeles
Wonderful cases. Extraordinary article. A debt of gratitude is in order for sharing this data.
Ahmed arain said…
Web design company Los Angeles
Wonderful cases. Extraordinary article. A debt of gratitude is in order for sharing this data.
Arbaz Khan said…
Miami Web Design
I want you to thank for your time of this wonderful read!!! I definately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog!
Unknown said…
Your post is really awesome. Your blog is really helpful for me to develop my skills in a right way. Thanks for sharing this unique information with us.
- Learn Digital Academy
Akash Thakur said…
Thanks for giving great kind of information. So useful and practical for me. Thanks for your excellent blog, nice work keep it up thanks for sharing the knowledge.
home interior designer in noida
Akash Thakur said…
Thanks for giving great kind of information. So useful and practical for me. Thanks for your excellent blog, nice work keep it up thanks for sharing the knowledge.
dining room interior designer in noida
Vikash Kumar said…
nice work keep it up thanks for sharing the knowledge.Thanks for sharing this type of information, it is so useful.
Epoxy Grout manufacturer in delhi
Jholia Albert said…
Very supportive work , I found very few people who are so helpful and you are one of them and those who thinks for others God bless them. Can you suggest me any E-commerce development agency because I want to have my E-commerce store.
Very Nice Article keep it up...! Thanks for sharing this amazing information with us...! keep sharing
Mobile app development company in toronto
Nice Post. It's really useful for me. Thanks for sharing.

Web Designing Company in Jaipur
pavilionjeans said…
Thanks for share this idea, I really like to read your information you have mentioned in this article are useful for me, thanks a lot, for share this keep sharing this with us this great article.
Jeans Manufacturers in Delhi
Just Info said…
Thanks a lot, for share this keep sharing this with us this great article.
painting services in delhi
deepak ogen said…
Thanks a lot, for share this superb blog, I got a great idea with your point you have mention in this article keep sharing this great article.
Web design company in delhi
Thanks a lot, for share this superb idea, I got information with your point you have mentioned in this article it’s really helpful for me, keep sharing this great article.
Rajasthan Bike Tour
Kala Kutir said…
Thanks a lot, for sharing this superb idea, I got very useful information with your point you have mentioned in this article it’s really helpful for me, keep sharing this great article.
Lifestyle Magazine India

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
body #s4-leftpanel
display: none;
margin-left: 0px;
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…

SharePoint 2010 Content Query for Blog Posts

I hope this post will help many of you feel comfortable with using the Content Query Web Part.In this post I will walk you through the process of creating a content query web part and configuring it to show custom field types. I will also give details on how to use XSLT to stylize and format the data being pulled. I will be using the following scenario as an example. Say that you had a site collection with a top level publishing site. This publishing site would display a the most recent blog posts from all blog sites within its own site collection. To solve this problem we will use a Content Query Web Part and a customized ItemStyle.xsl using XSLT.Please note that the “SharePoint Server Publishing Infrastructure” needs to be enabled at the site collection to display the content query web part.Step 1: Add a Content Query Web Part to PageNavigate to the site that you want the blog posts to show up and click on edit page. Under Editing Tools in the Ribbon, Click on insert > Web PartUn…