Creating designs that will respond and work with multiple browser and device types has become more and more important. In this session we will examine the concepts behind Responsive Design and how you can and should apply them to SharePoint.
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).Mashable called 2013 the Year of Responsive Web Design.http://en.wikipedia.org/wiki/Responsive_web_design----------------------------He united these techniques under a single banner – (from Responsive Web Design book)
If you think about it you may have been working or designing responsively for a while now, just not to this extent. You were always developing and designing to make sure your site worked well in several different browser widths.Why use grids? Because we need flexibility to render our site in different screen sizes.
Let’s talk some grid lingo. A grid is the division of a layout with vertical and/or horizontal guidelines to incorporate margins, spaces and columns in order to provide a framework for organizing content -http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/
Max-width is used to render img elements of different sizes based on the directive percentageCan apply to video and other rich media as well
Methods for creating fully scaleable background images are many, the most popular are listed above, plus SharePoint has a special version called Image Renditions
Despite all our hard work, media types can cause issuesW3C defined a listing of media types
Media queries are fairly simple to understand… it asks 2 questions, what media type and what query In the example above we are looking for a min width of the screen resolution at 1024pxCan be placed in a stylesheet or
Not just for width and height, can also find device width, device height, orientation, aspect-ration, color, grid and many othersOrientation used to be used for iPads
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).Mashable called 2013 the Year of Responsive Web Design. - http://en.wikipedia.org/wiki/Responsive_web_design----------------------------Check out the article “The Dao of Web Design (http://bkapart.com/rwd/3/) – cool quote from John Allsopp “the control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed….”We have been doing this for some time but not realizing it and it hasn’t be more apparent until now. We started designing sites for a 800 width, then moved to 940 from there we moved up to 1024 and now 1280. When designing for these different browser widths we were (or at least should have been) making sure the design rendered nicely in smaller resolutions. Once the iPhone was introduced true mobile browsing or even designing for the mobile experience was something that was never thought about. Once the millions of iPhone users started browsing the web on their tiny form factors then it became apparent that web design would move into a whole new direction. It didn’t happen over night, it has taken us several years to get to the point where now everybody want some type of responsive design. Mashable called 2013 the Year of Responsive Web Design.
Search is prominent on each layer of responsive design. Once you are at a smaller screen size it is hard to read the text on the image. Once you are on the mobile view it is hard to read the text on the image, this could have been removed to give better access to the information below. The State Agencies and the Online Services provide more of a mobile feel vs the home page.
The site responsiveness is quirky, there is not a good mid range breakpoint in this design, you either have full or smaller screen. This also didn’t translate to the mobile view.
Nice use of responsive, however there is a HORZ scroll bar when the screen size is smaller. For the mobile version like how the search bar is shown once you click on explore. I think the image could have been removed for the mobile view, there are a number of elements that could have been shown within the same space giving faster access to those items for the mobile view.
Items to note on the differences in responsive – Once the screen is smaller then the search is completely off the screen. Trying to scroll down on the mobile app is hard, you cannot use the main center area on the mobile view to scroll down. It would have been better to remove this from the view all together, or just left the grey box and not have the moving lines.
Client Budget –Labor instensive
How do I know where to start with responsive design? Again this may comeback to your client’s needs.Really what is this going to get me? How much do I need to know to create a responsive SharePoint site?
Using the Design ManagerSharePoint corporate implementations use lots of devices and browsersThe type of site might not be conducive
You can create your own custom sizes for the image renditions under Look and Feel in Site settings
To modify the actual images you must navigate to the image library – in this case the site collection images and update the image renditions here. This allows you to see the image rendtions as they are defined and cropped. Notice the custom image rendition in the list.
Get screen shots of using the firefox add inhttp://en.wikipedia.org/wiki/Responsive_web_design
Find new images!!! Get new screen shotsDid you know the Chrome console allows you to quickly resize the browser viewport to any resolution without the use of extensions? You can also emulate touch events and override the user agent similar to Safari’s developer mode. While it doesn’t beat the iOS and Android emulators it can be super useful!GIVE both MAC And PC shortcuts!Open up the Chrome console (⌘+SHIFT+C or CTRL+SHIFT+C).Click the gear icon in the bottom-right corner.Click the “User agent” tab.
http://www.hongkiat.com/blog/rwd-tools/ 50 useful RWD tools for designershttp://www.onextrapixel.com/2013/02/20/55-great-and-useful-tools-for-responsive-web-design/
Senior Engineer at Planet Technologies
Graphic Designer, Consultant and SharePoint MVP
Over 6 years of SharePoint
Author: SharePoint 2010: Six in One
catpaint1 on Twitter
to responsive design
When, where and if you should create a
Responsive design discussions
Responsive and SharePoint 2013
Two ways to create responsive designs
What is it?
and Development should respond to the
user’s behavior and environment based on
screen size, platform and orientation
Consists of a
Mix of Flexible Grids and Layouts
Flexible Images and Media
CSS and Media Queries
Common Grid Systems
Grid System Generator
Flexible CSS Grid
“The grid system is an aid, not a
guarantee. It permits a number of
possible uses…” -Josef MullerBrockman
Grid systems explained…
I really have to use a grid system?
These are meant to be a starting point something
to help you in creating a flexible site.
It’s helpful – but not necessary
Make your own, it all depends on
your project and what your client
Making it Flexible
your design beyond Flexible Grids allows
you to make a responsive site with images that
resize and layouts based on media
Flexible Images and Media
Can apply to video and other rich media
6 and below isn’t supported
Broader issues with Windows
IE 7 and lower
Firefox 2 and lower
7 and Higher Fixed
Flexible Images &
larger than needed image and use a
scale % to size it
Create Multiple Image Sizes and use them
our work with flexible grid layout and
flexible images our site might have issues when
displayed small or widescreen
Media Types defined by W3C
Suitable for all devices.
Intended for braille tactile feedback devices.
Intended for paged braille printers.
Intended for handheld devices (typically small screen, limited bandwidth).
Intended for paged material and for documents viewed on screen in print preview mode. Plea
Intended for projected presentations, for example projectors. Please consult the section on pag
Intended primarily for color computer screens.
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purp
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound ava
screen and (min-width: 1024px)
2 questions of the browser
Media type (screen)
Query – in parenthesis feature and value
How to Apply
these directly in a stylesheet with a
declaration - <link rel=“stylesheet”
href=“sample.css” media=“screen and minwidth: 1024px” />
Or attach to an import - @import url(sample.css)
screen and (min-width: 1024px);
Why Responsive Design?
have to break away from how we
traditionally think about web
design/development and start thinking with the
new medium in mind.
When to Create Responsive?
are the device/browser needs?
What type of Site is it?
Questions you may be
do I start to make a Responsive Design?
What is this really going to give the Client/me?
How much do I need to know to create a
Responsive SharePoint site?
are the challenges we face?
Design Manager creates an HTML master –
separation of HTML and .master files
Typically Lots of Devices
Type of Sites
Extra User Experience
and Branding effort
Not good for intranets
Images for different resolutions
Define multiple sizes of image files to be used in
your SharePoint sites
Must have Blob Cache enabled in web.config
Screenshots and Steps - Sample