SharePoint’s Branding and “Look and Feel” with SharePoint Responsive (Web) Design

Posted by Errin O'Connor on Feb, 10, 2015 10:02

It is key to approach any branding or custom “look and feel” initiative  with as much of a browser and device agnostic approach as possible. SharePoint 2013’s out-of-the-box features provide a new updated look and organizations who want to engage in a SharePoint branding initiative should keep a responsive design methodology at the forefront when implementing custom features or components.

Responsive SharePoint web design (RSWD) is a design approach that is aimed at tailoring SharePoint sites to provide the most powerful viewing experience available while assuming that most all browsers and mobile devices will at some point view the tailored site and its content while also taking into consideration the additional and available native features of SharePoint.

SharePoint branding initiatives can add a great deal of value by enhancing the companies’ user experience to increase the overall usability as well as likability of SharePoint. In many project engagements, EPC Group and our clients work to implement SharePoint without calling SharePoint, SharePoint. Providing a tailored brand to your new 2013 implementation can increase usage by up to 20% and that can correlate to true ROI.

There are many organization as well that do not see the need to brand SharePoint and that is also perfectly fine as in a lot of cases the companies culture tends to bleed over into their overall approach to branding. For those organization who do wish to brand their SharePoint 2013 implementation, I will cover some high level best practices and experiences from some of EPC Group’s recent branding, mobility, and responsive design initiatives.

The following image shows the dimensions of many of the most popular mobile and tablet devices currently available:

SharePoint and Responsive Web Design (RWD) Deep Dive

Responsive design should be extremely user friendly while serving a variety of different user viewpoints from their device and\or location. There should be a core set of expectations on which browsers need to be supported for the custom Responsive SharePoint Web Design (RSWD) initiative as well as the devices expected to be utilized by the team.

Assuming this is an internal secure platform and not an internet-facing site, you should be able to get a baseline on the device and browser question. If you are conducting a branding or custom “look and feel” initiative for your organization’s SharePoint 2013 or Office 365 internet facing site, the RSWD principals still apply but you should just assume that a combination of every device will at some point access your site.

There are considerations as well around SharePoint 2013’s ribbon elements and how they will merge or change with any design that is secure and requires authentication and internet facing site that do not require authentication can have limited ribbon elements or none at all.

You should consider the images and media content in scope for your effort as there may be sizing or diminished quality on specific devices if the images are not clean or in a recommended format but these should be reviewed during the initial design and requirements gathering sessions.

The branding differences between SharePoint 2010 and SharePoint 2013 are much different as well as what is considered configuration (by users) versus customization (by developers) so if your organization has previous branding experience in SharePoint 2010 there are several updates that should be taken into consideration when approach a 2013 branding effort as it is not only approached by designed in a differing manner.

Note: The image below shows the differences between SharePoint 2010 and SharePoint 2013 in terms of customization by developers verses configuration by users.

SharePoint Designer has never been a favorite tool of mine and has honestly caused me much grief and physical pain over the past 5 years. Alright, maybe not real physical pain but definitely imagined. SharePoint Designer 2013 is not much of an improvement over SharePoint Designer 2010 and my best guess is that this will more than likely be the final version released.

The few good areas around SharePoint Designer 2013 are in some time saving type small modifications or small design edits but any enterprise or widely used solution should be developed in Visual Studio and packaged up as a deployable solution to follow a best practices approach and for future phases.

SharePoint 2013 does come with a number of themes, as shown in the image below, that you can first view to gauge any elements that you may like or want to reuse in your overall custom branding design and for those sites you do not plan on apply the new corporate branding “master page” onto can be updated with these themes if users do request a look different from that created originally out of the box.

SharePoint 2013 also has a new Design Manager tool what is available if you have enabled publishing within your SharePoint 2013 site. One of the biggest changes in branding is the availability for editing by 3rd party applications such as Dreamweaver to work on the actual design which is a big departure from previous versions only allowing SharePoint Designer or a Microsoft product to achieve any custom look and feel.

The major keys a responsive design initiative should focus on is around the use of fluid grids and flexible media to adapt while taking advantage of CSS3 and JavaScript within your design and when all user devices will open the same site\page then CSS3 should be utilized to properly adapt and offer the best experience.

Responsive Navigation must take the following into consideration:

  •   Floating elements
  •   Drop-down menu
  •   Collapsible menu or features
  •   Anything that may be “off canvas”
  •   Always build the navigation to the design and not to the device

With this type of mobile first thought process you should concentrate on delivering the best possible content while taking into consideration the real need or requirements of page editing or content authoring of large proportions as that can be difficult from certain smaller devices. With a design that has become device independent you may want to consider background image to assist in filling any areas and/or assisting in continuity.

EPC Group’s Mobility and Branding team follows certain design and development paths for any responsive design initiative as these core foundational items should always be considered.

EPC Group’s short list of design best practices is to always identity base breakpoints based on the design while utilizing a temporary background image for columns and possibly an overall background image to ensure all areas blend and there are no glaring “white spaces” regardless of any device. In many cases you want to start with a specific pixel block.

You should also consider device channels in your custom branding initiative as this is a new features in SharePoint 2013 that allows you to tailor specific pages to specific devices to even include device\page specific interfaces as well as changing the order of content based upon the specific device.

SharePoint 2013 BYOD & MDM Best Practices

Remote workers and workers empowered with BYOD policies can touch the boundaries of IT and the typical IT-driven culture. A lot of IT organizations are playing catch-up around governance and their information management policies and have pushed back on BYOD (Bring Your Own Device) due to the added complexity it brings and ultimately forces specific polices to be approved.

There is a trade-off I think between not allowing BYOD and the work required to actually implement a BYOD strategy verses the risk of users finding shortcuts and utilizing other methods or access points to share files or obtain reports.

I read a recent article about the productivity increases that organizations with a mobile device management / BYOD policy have realized and I do think there is some very real truth to empowering users and the gains you may see but there will also inevitably be some users that take advantage of they added capabilities but those “one-off” users should not stifle the overall organization’s momentum towards technology innovations that can keep them ahead of their competitors.

The flip-side of the coin is that BYOD is also bring a 24/7 “working window” into the picture that some organizations may see as encroaching on the work/life balance but also what may define the actual workplace or given workday.

One of the major issues around BYOD has been around the security risks that may open but, in SharePoint 2013’s case there are solutions in Microsoft’s System Center in Window Intune that can assist in resolving all of those challenges. There must be a balance of privacy in conjunction with other obligations such as legal risks that may come with personal or PII \ PHI data.

Enforcing a policy, where possible, that makes the user who is requesting BYOD aware of any possible challenges or privacy-related data is the best first step as there must be expectations from both sides site in introducing sometimes optional but really much-needed tools such as BYOD.

EPC Group’s internal BYOD policy follows certain password requirements with a pin addition as well as some layer of file encryption. Our consultants may be onsite at any given client and require access to a document off of our intranet or ECM platform that a client request and we must be able to immediate to meet that request.

The interesting part of developing and designing enterprise-wide strategies around BYOD or even areas such as cloud or hybrid computing does require us to test, prefect, and then implement these solutions ourselves at EPC Group as the “eating your own dog food” rule most always applies in these technology areas. In addition, we have implemented device locking as well as remote wiping if a device is lost or stolen as well as secure backups and either certificate \ encryption or virus protection

Microsoft Intune

As mentioned above, Microsoft Intune is a powerful new solution to manage mobile as well as other devices within your organization through Microsoft System Center 2012, as shown in the image below.

Microsoft Intune supports the following mobile devices:

  • Windows Phone 8
  • iOS 5.0 +
  • Android 2.3.4 +
  • BlackBerry – There is an App Available or via Exchange Active Sync as a workaround for BlackBerry.

Microsoft Intune with System Center 2012 provides a wide array of features such as:

  • Support for Windows 8/RT and Mac OS
  • Support for not only Windows Servers but also for Linux
  • Microsoft Intune achieves mobile device management through EAS connectivity or Direct Management (device dependent)
  • Provides an interface for IT administrators to manage users and devices through a web-based console

The most attractive feature to EPC Group’s team was around the self-service portal that is available and the fact that there is AD integration within the platform so that a new set of groups or related security areas need to be created, see image below:

OneDrive for Business

OneDrive for Business is increasing being utilized by organization to not only share or store documents but in some cases to replace the personal drives on network file shares. Your site collection administrator controls how you can utilize the library but a governance policy and related procedures should be put in place so that this is never managed at the individual level.

Microsoft has recently increased the standard storage space to 25 GB of OneDrive for Business storage space which is up from the original 7 GB and will soon be offering options up to 1 TB. Your organization does have the ability to increase OneDrive for Business storage quotas for individual users beyond the default 25 GB and all the way up to 100 GB. Microsoft has also recently added a “Shared with Me” view to help users find documents faster when others have shared a specific document with you.

[gravityforms id=41 title=”true” description=”false”]
<div class='gf_browser_chrome gform_wrapper exit_intent_popup_wrapper gform_legacy_markup_wrapper' id='gform_wrapper_41' > <div class='gform_heading'> <h3 class="gform_title">Exit Intent</h3> <span class='gform_description'></span> </div><form method='post' enctype='multipart/form-data' id='gform_41' class='exit_intent_popup gform_legacy_markup' action='/sharepoints-branding-responsive-web-design/' > <div class='gform_body gform-body'><ul id='gform_fields_41' class='gform_fields top_label form_sublabel_below description_below'><li id="field_41_1" class="gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible" ><div class='ginput_container ginput_container_text'><input name='input_1' id='input_41_1' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></li><li id="field_41_11" class="gfield gfield--width-full gform_hidden field_sublabel_below field_description_below gfield_visibility_visible" ><div class='ginput_container ginput_container_text'><input name='input_11' id='input_41_11' type='hidden' class='gform_hidden' aria-invalid="false" value='ddd01b75-d4fc-ea11-a816-000d3a591fb8' /></div></li><li id="field_41_12" class="gfield gfield--width-full gform_hidden field_sublabel_below field_description_below gfield_visibility_visible" ><div class='ginput_container ginput_container_text'><input name='input_12' id='input_41_12' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></li><li id="field_41_13" class="gfield gfield--width-full gform_hidden field_sublabel_below field_description_below gfield_visibility_visible" ><div class='ginput_container ginput_container_text'><input name='input_13' id='input_41_13' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></li><li id="field_41_9" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_41_9' >Full Name<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_text'><input name='input_9' id='input_41_9' type='text' value='' class='medium' placeholder='Full Name' aria-required="true" aria-invalid="false" /> </div></li><li id="field_41_6" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_41_6' >Email<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_email'> <input name='input_6' id='input_41_6' type='text' value='' class='medium' placeholder='Email Address' aria-required="true" aria-invalid="false" /> </div></li><li id="field_41_7" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_41_7' >Phone<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_phone'><input name='input_7' id='input_41_7' type='text' value='' class='medium' placeholder='Phone Number' aria-required="true" aria-invalid="false" /></div></li><li id="field_41_10" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_41_10' >Company Name<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_text'><input name='input_10' id='input_41_10' type='text' value='' class='medium' placeholder='Company Name' aria-required="true" aria-invalid="false" /> </div></li><li id="field_41_8" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_41_8' >Message<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_textarea'><textarea name='input_8' id='input_41_8' class='textarea medium' placeholder='Type your message here...' aria-required="true" aria-invalid="false" rows='10' cols='50'></textarea></div></li></ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_41' class='gform_button button' value='Submit' onclick='if(window["gf_submitting_41"]){return false;} window["gf_submitting_41"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_41"]){return false;} window["gf_submitting_41"]=true; jQuery("#gform_41").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_41' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='41' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_41' value='WyJbXSIsIjEwNTJhNGVmMWMyNzI3YTJmMjdiZTA1NjU4ZDMzYzY3Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_41' id='gform_target_page_number_41' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_41' id='gform_source_page_number_41' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> <p style="display: none !important;"><label>&#916;<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js" name="ak_js" value="135"/><script>document.getElementById( "ak_js" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div>