Cloud and Microsoft technologies enthusiast architect in Switzerland RSS 2.0
# Wednesday, March 05, 2014

SS

Speaker : Cathy Dew

Responsive web design reacts to screen size and orientation. Adaptive web design adjusts the content in the design. Usually, for SharePoint, she starts with 3 different breakpoints : 1024px, 768px and 320px.

Don't try to make mysites responsive !

Design Manager is not good for intranets (lists, etc). Usually, responsive design is deployed on-premise through a full-trust solution, while on Office 365, it is not possible.

Responsive design implementation is based on grids. So, using grid based layouts. Also, this grid will be flexible.

The key is to make everything flexible, such as images that can resize. But, there are some limitations with IE7 and lower.

Media queries are based on media types defined by the w3c. A media query targets a device based on screen resolution and orientation. Ensure the navigation consistency, which becomes more and more important as the device gets smaller. In SharePoint, there are the top, left and breadcrumb navigation. How is there are going to be translated on the devices ? For example, the quick navigation may disappear if the screen is not big enough. What to do with the ribbon ? Maybe it is not needed on a smartphone, but required on a desktop.

Start from the smartphone version.

Step one, the wireframes to separate design from functionalities and not focus on little design details. Also, decide how content will be displayed (not design). The wireframes already have the grid in overlay to help the transition to the mockups. The most important content must be above the scroll level, especially on mobile devices, to avoid to have to scroll down to reach content.

Wireframe tools : Balsamiq, Visio, Adobe Creative Suite and Axure

From the wireframes, create the mockups, with the grids in the background. Also for the different screen resolutions. The SharePoint elements must be clearly identified, especially if the mockups are handed over to a development team in order to avoid them having to guess what they are. Developing design for Office 365 is working with a moving target.

 

Wednesday, March 05, 2014 6:21:44 PM (GMT Standard Time, UTC+00:00)  #    Comments [0] -
SP2013 | SPC14
All comments require the approval of the site owner before being displayed.
OpenID
Please login with either your OpenID above, or your details below.
Name
E-mail
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):

Live Comment Preview
Google Cloud Platform Certified Professional Cloud Architect
Ranked #1 as
French-speaking SharePoint
Community Influencer 2013
Navigation
Currently Reading :
I was there :
I was there :
I was exhibiting at :
I was there :
I was a speaker at :
I was a speaker at :
I was a speaker at
(January 2013 session):
I was a speaker at :
I was a speaker at :
United Nations (UN) SharePoint Event 2011
I was a speaker at :
I was there !
I was there !
I was there !
I was there !
Archive
<February 2020>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
1234567
About the author/Disclaimer

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2020
Yves Peneveyre
Sign In
Statistics
Total Posts: 289
This Year: 1
This Month: 0
This Week: 0
Comments: 19
Themes
Pick a theme:
All Content © 2020, Yves Peneveyre
DasBlog theme 'Business' created by Christoph De Baene (delarou)