Responsive Design is a buzz word, commonly used to refer to adaptive design and making websites respond well to mobile devices. What it really means in summary is a website that is designed to be flexible in every device it’s seen and doesn’t necessarily have a separate “mobile version”. Similar to the always common catchphrase of “write once, run everywhere”, this is “design once, view everywhere”.Purists will tell you that the 3 characteristics of a true responsive design are:1- It has a flexible, grid based layout. This means that as I look at the site in different resolutions the site will always have a planned and flexible experience. (Review this, not sure on words)2- Images and media are flexible. This is the Achillesheel of many websites, images have a fixed size and good resolution ones are heavy on bandwidth, however for a site to be truly responsive, the images must be flexible and adjust successfully to every screen size.3- Last but not least, the site must use media queries to ensure that it adapts its content to different devices and their resolutions in order to provide a pleasant user experience. Have been around since CSS2 but in CSS3 we have way more options on what to query for.
Forrester Research’s US Telecommuting Forecast notes that 34 million Americans work from home. This number is expected to reach a staggering 63 million – or 43 percent of the U.S. workforce – by 2016. This number is so significant, it bears repeating – 43 percent of the U.S. workforce will work from home just three years from today. This is a figure too large and an opportunity too valuable for organizations to ignore. 63 million by 2016 vs 34 million today.Ok, so we are always connected, always on the go and we’re getting more and more used to the responsive experiences, I go to MSN every day on my laptop and it looks great, I pull it up on my tablet and it’s different but still works awesome and then on my phone it works too! But then users try to open their intranets and it just doesn’t work! No one thought about making it accessible to my iPad and I need a document before getting on the plane! Or the default OOB experience is enabled and it’s just not my site, not how I’m used to seeing it.As more and more companies are publishing their intranets through the internet and the workforce becomes more mobile, we need to adapt our intranets to these changes.
One of the first things a lot of customers ask me is “Can SharePoint be responsive”, yes it absolutely can! This is one of those myths that people somehow keep hearing but it’s definitely not true.Now, in 2010 creating a responsive site wasn’t as easy and although we did create some I can say that most customers were not there yet in understanding the value of this effort. However with SP 2013 there’s a lot more options and it has become much easier.Now, the good news, 2013 as I mentioned is way better than 2010 for responsive design, some reasons? The HTML that is produced it much cleaner than before and have a lot less tables (which can haunt you in your dreams). You can also leverage Image Renditions, in case you don’t know what Image Renditions are, these allow you to set pre-defined sizes so that the system will automatically resize the images you upload to a library to those renditions. This helps with your flexible images as you can use higher quality pictures and smaller devices won’t necessarily have to download a huge file.And last but not least, with the addition of the Design Manager and all the improvements on how the UI is generated, branding SP 2013 is easier than never before.One of the major enhancements to SP 2013 was the addition of device channels. What are Device Channels? Well these allow you to configure different experiences depending on the user agent of the browser, basically a different experience for different devices. However although this is a great addition this is a bit too late, they can be useful but they are not our recommended approach as your users would have different experiences through different channels and it requires much more maintenance. However I’ll mention later on how they can be leveraged effectively with a responsive design, but let’s leave them on the side for a while, they’re a good attempt but it’s too antiquated, we’re not used to sites having a separate mobile site, we need the same site to adapt!Now, mobile view! Has anyone tried it? It’s better in 2013 than 2010 but it’s still pretty bad. You cannot see almost any content pages and can only open documents, not collaborate truly. Better than not having anything but probably not what your users are looking for.
Graceful Degradation: Functionality over ContentProgressive Enhancement: Content over FunctionalityNow, when tackling any responsive design, the first decision you’ll phase is how to approach the design process. Start from the desktop experience and then try to make that fit into a mobile device and remove features and functionality along the way OR start from the mobile device and then move into a more rich and heavier site as you have more screen real estate.Here’s where I’ll contradict most people who are talking about this subject, they’ll all say go always mobile first, progressive enhancement is the way to go so that your mobile users get the best experience. While this is true, I think that when we’re dealing with Intranets, the decision needs to be much more about your users, your demographics and how your specific intranet will be used. For example for MacDonald-Miller after performing a study on their usage of the information and how people work, we found that when not in the office and mobile at job sites, employees needed access to a lot of information but they really didn’t want to do all their work from their iPads and phones, let’s be honest, you can’t. So we designed their intranet for a full resolution experience first as this was where people would spend the majority of their time and then from there designed the mobile experiences.So when working on your intranet I recommend you design for the most common experience and make that your focus and then design the rest around that one. Remember most of the content online and in books about responsive design and mobile development are geared towards internet and external facing sites, with intranets you need to consider real world scenarios! You need to think about how people will really use it. It’s all about the user!
On Demo:Set the stage, talk about how we branded itTalked Talked about the 3 experiencesTalked about touchTalk about the 3 target devices and importance of identifying your target devices and browsers for testing. Show Laptop experience, resize screen a bit to show transition.Go to Surface, show portrait and landscape.Show Phone, click on link from phone and show document libraries
There are many benefits to an intranet which include:Happy workforce – this may seem like something which is neither here nor there, but happy workers are productive workers and it’s likely that this alone will prove ROI.Document creation and storage – creating hard copies of documents, printing them off and then storing them for tax purposes costs money – a lot. For the most part, a company will generate a huge amount of paperwork and in this day and age, the majority of it is completely unnecessary. Storage costs plus printing and consumables all add up to a significant sum quite quickly.Work is kept internal – these days, with the amount of regulations companies are required to adhere to, leaking any information outside of an organization can be fatal. With an intranet, everything is shared internally, doing away with the need for online public cloud storage solutions and external email. This can prove ROI in terms of risk management and as a part of a disaster recovery plan.Measure – think about how the intranet will be measured in terms of usability, ROI and general operations. If you have a CMS then include how much time is gained by automating work processes. Look at how it has enabled collaboration and search and allow for this when it comes to requesting budget.The above is by no means an exhaustive list, but these are key points which need to be fleshed out in the planning stages to keep the finance people happy. To really justify it, it will be necessary to look at every aspect of the time and money saving that an intranet can afford a company and set this out clearly in the plan.Remember: Increased productivity and collaborationInformation exchange via wikis and bulletin boardsLower staff turnover as everyone’s job becomes more enjoyableA 2% increase in productivity can equate to a 100% ROI when comparing staff returns to system costs
Test thoroughly your media queries (careful with not)Images? Words of browsers, devices, different windows phones, etc.
Responsive Design & SharePoint 2013: A Case Study of a Responsive Intranet
IN SHAREPOINT 2013
A Case Study of an Intranet
A LITTLE ABOUT ME
Microsoft Certified Professional in SharePoint
Business Technology Director for Buildingi (and SharePoint addict)
Costa Rican transplanted to WA a year ago
Coding for more than 10 years in a bit of everything
Enthusiastic but bad golfer
Responsive design & SharePoint
Case study and live demo
Best practices and resources
SO, WHAT IS RESPONSIVE
Design once, view everywhere - same site, code and content for every
1. A flexible, grid-based layout
2. Flexible images and media
3. Media Queries
WHY RESPONSIVE DESIGN?
• 91% of US citizens have a mobile device within reach 24/7 and check
phones an average of 150x a day
• 90% of people use multiple screens to access the web
• 90% of smartphone searches result in a purchase or a visit to a business
• 61% of visitors will return to Google to find a site that IS easily readable
Global Mobile Statistics 2012 Home: http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats
Forrester Research “Understanding Responsive Design”: http://www.forrester.com/Understanding+Responsive+Design/fulltext/-/E-RES74481
Forrester Research US Telecommuting Forecast 2009-2016: http://www.forrester.com/US+Telecommuting+Forecast+2009+To+2016/fulltext/-/E-RES46635
Web Performance Today “Mobile vs. Desktop”: http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
SEO MOZ “The SEO of Responsive Web Design”: http://www.seomoz.org/blog/seo-of-responsive
43% of the US workforce will work from home by
SHAREPOINT CAN BE
• Is SP 2013 better than SP 2010? Absolutely!
• Device Channels are awesome, right? Yes and No
• Is Mobile View the solution? Not really…
CLIENT: MACDONALD MILLER
Summary: MacDonald Miller, an HVAC
Systems Contractor and Service
Center, asked Buildingi to help enhance their
overall collaboration, including building a new
intranet on SharePoint.
• SharePoint 2013 Installation & Architecture
• Social media integration (Yammer)
• Mobile and tablet optimization
• Brand look and feel
• Workflow automation
• Data integration
• User experience
• Information architecture
• Custom app development
THE TWO APPROACHES
LESSONS LEARNED: IT’S ALL
ABOUT YOUR USERS
• Start by understanding your users and how they interact with the site
• Scenario-based: What are your users going to do from each device?
• Design for the real world. No one writes a 60 page document on a phone!
LESSONS LEARNED: FOCUS
Responsively designed SP intranets can be expensive in the short run, but a
great savings in the long run
• Increased productivity and collaboration
• Information exchange via enterprise social networking and collaboration
• Access to critical information when you need it
A 2% increase in productivity can equate to a
100% ROI when comparing staff returns to system
Source: Lee-Sia, ElcomCMS, Tips for planning an Intranet Project, March 13, 2013