I have committed to posting a (SharePoint) responsive design series over at Nothing but Branding. You should see an article about every month pop up on the topic. To get things warmed up: http://www.nothingbutbranding.com/blog/2012/october/thinking-responsively.
Thinking Responsively, what’s to expect…
Take a journey into the world of responsive/adaptive design in SharePoint, one article at a time.
I’ve been advocating web technologies and tools by way of a blog about as long as I can remember, even before the term “Blog” became popular. I started www.graphicalwonder.com back in the early 1990’s, posting design and web tutorials manually. I later created a site called www.photoshopwishlist.com a blog aimed at gathering community feedback about Adobe Photoshop and the attention of Adobe. The site became fairly popular after Jeffrey Zeldman whom many consider the grandfather of web standards posted an article linking to my site on www.zeldman.com. The rapid circulation of news and the community feedback sparked an interest that has remained with me for 20 years. I got to meet and thank Jeff almost 20 years later at the Beyond Pixels conference where he was the keynote speaker. Another speaker I had the privilege of meeting at the conference is also very relevant to this series – his name is Ethan Marcotte. Ethan as many of you know coined the term “Responsive Design” in an article of his own (http://www.alistapart.com/articles/responsive-web-design/) back in May 2010 and sparked what has become the hottest topic to hit the web community in years.
Ethan was a very humble yet obviously wildly intelligent guy. He’s one of those individuals that has the unique ability to explain a very complex situation by drawing you in with story, and at the very end, unveiling the essence with just a few points. In the case of responsive design, he has boiled it down to just three main components.
- A Flexible Grid
- Flexible Images (and Media)
- CSS3 Media Queries
In this series, I will bring these core concepts into the world of SharePoint design. SharePoint brings with it a number of challenges for standards based web design, so my goal with these articles is to make our way through the various elements required to customize a SharePoint 2010 site and find a balance between best practice for SharePoint and modern practice for responsive/adaptive web design.
- Responsive versus Adaptive, what’s the difference?
- Core Concepts View Port, CSS3 Media Queries, Flexible Images and Grid
- Planning your design with a mobile first mind set.
- Working from an out of the box master page, to a responsive website:
- SharePoint Global Navigation (Top Navigation Bar)
- SharePoint Current Navigation (Left Side Navigation Bar)
- Compatibility Mode and what that means to your design
- Browser Scrolling and how it impacts your design
- The Ribbon and how it impacts your design
- The Web Part Tool Pane and how it impacts your design
- Responsive Content and Page Layouts
- SharePoint 2010 + Mobile, things you should know.
Thanks for reading and I hope this article helped to shed some light on the importance of designing sites and experiences that transcend the desktop. For more from Jeffrey and Ethan, check out http://www.netmagazine.com/interviews/ethan-marcotte-responsive-web-design.