Using Responsive Design in SharePoint 2013

Below are the dimensions needed for a responsive design in SharePoint 2013 and tools available to help implement them.  The use of  multiple devices justifies even more the reason to design for mobile first.

1200×1900 (desktop, portrait orientation)
768×1366 (tablet, portrait orientation)
480×800 (smartphone, portrait orientation)

With Media Queries using CSS3 for styling and Responsive Frameworks for SharePoint, you can add custom styling for the different displays above.

Manage and Structure Content

To gain the maximum benefit from your structured content, it is essential to manage all of the moving parts in relationship to one another.

Connecting the Dots

The ability for large communities of users to create and review dynamic content, in a user friendly way, without losing consistency, has great value to an organization.

Using CMS and Social Media will help your environment stay structured and audience engaged.  Adopting structured content creation and collaboration in the beginning, is key to success!

Simplify and Integrate with Social TV

Developing creative content that integrates linear with nonlinear, from your iphone to your television is happening everywhere.

Transmedia Storytelling is changing TV, it is defined as telling a single story that extends across multiple media platforms, beyond on-air.  Integrating storytelling seamlessly across media platforms brings engagement and value to your content, eventually changing the way content for TV is created.

Social TV has made television a richer two-way experience with fan participation.  The desire to experience TV content across devices other than TV has exploded.  Nielsen’s own research shows how social TV amplifies the conversation and impacts ratings.  Technology has created digital tools that allow users to interact with content like never before.

Build Your Website for the End User

Finding audience likes and dislikes; engaging digital interaction by search and discovery.  Managing content and relationships; it’s not science, it’s an art.

As search engines have become more sophisticated, social signals, user sentiment, engagement behavior and other human factors have been integrated into search engine algorithms.  As a result, websites built solely for search engines are quickly losing their rankings and are being replaced by websites that authentically satisfy human expectations and intent.

Modern SEO must focus on the end user, the customer – the actual person sitting at the keyboard, engaging with your website.

Make sure your code is up to date and meets web standards and make your content consistent.  Do not overuse random keywords;  make sure your links are creditable and reputable.  The chosen code base, hosting environment, competitive landscape, website architecture and overall content presentation are additional variables that help determine your success with engagement.

Design for Mobile First

Make the transition if your site is not already responsive.  “Google reports 48% of users feel if a site doesn’t work well on mobile it means the company doesn’t care, and 52% of users are less likely to interact with a brand in the future after a bad mobile experience.”

The content remains the same, it’s the practice of using one code that adjusts to the device the user is using.  It effects SEO, conversion rates, accessibility, trust and the overall user experience.

The main components of responsive design are having a flexible grid, responsive images, media queries and HTML 5.  Let me know if you have any questions.  I think it’s worth considering down the road, it also requires less maintenance and will payoff longterm.  View this whitepaper about the Why and How of Responsive Design by Applause.com.

Stand Out with Optimization

Optimized web graphics provides multiple benefits:  Delivering dynamic layers of content, fast.  Transcoding solutions for broadcast and digital.

  • Less storage space on the server

  • Less bandwidth is needed to process the file

  • Less storage and bandwidth needs mean cost reduction

  • Faster file and page loads correlate to a positive visitor experience