Date post: | 29-Nov-2014 |
Category: |
Technology |
Upload: | catpaint1 |
View: | 2,560 times |
Download: | 1 times |
Planning for SharePoint Branding
SPS ATL - 2013
Cathy Dew
Speaker Bio
Cathy Dew Senior Engineer at Planet Technologies
Graphic Designer, Consultant and SharePoint MVP
Over 6 years of SharePoint
branding experience
Author: SharePoint 2010: Six in One
catpaint1 on Twitter
Agenda Intro to responsive design When, where and if you should create a
responsive design. Responsive design discussions Responsive and SharePoint 2013
Two ways to create responsive designs
What is it? Design 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
Device Shapes/Sizes
Grid Based Layout
Common Grid Systems 960 Grid System Twitter Bootstrap Grid System Generator Flexible CSS Grid Many more…
“The grid system is an aid, not a
guarantee. It permits a number of
possible uses…” -Josef Muller-
Brockman
Grid systems explained… Do 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 needs are.
Making it Flexible Taking 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 img {max-width: 100%;} Can apply to video and other rich media Has limitations
Max-width Limitations IE 6 and below isn’t supported Broader issues with Windows
IE 7 and lower Firefox 2 and lower
Windows 7 and Higher Fixed
Flexible Images & Backgrounds Create larger than needed image and use a
scale % to size it Overflow:Hidden Create Multiple Image Sizes and use them
accordingly *
Media Queries Despite our work with flexible grid layout and
flexible images our site might have issues when displayed small or widescreen
Media Types defined by W3C
Media Typesall Suitable for all devices.
braille Intended for braille tactile feedback devices.
embossed Intended for paged braille printers.
handheld Intended for handheld devices (typically small screen, limited bandwidth).
print Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen Intended primarily for color computer screens.
speech Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
Media Query @media screen and (min-width: 1024px)
Asks 2 questions of the browser Media type (screen) Query – in parenthesis feature and value
How to Apply Put these directly in a stylesheet with a
declaration - <link rel=“stylesheet” href=“sample.css” media=“screen and min-width: 1024px” />
Or attach to an import - @import url(sample.css) screen and (min-width: 1024px);
Why Responsive Design? We have to break away from how we
traditionally think about web design/development and start thinking with the new medium in mind.
Responsive SharePoint Sites
Maryland.gov
LGOntario.ca
MarshfieldClinic.org
CFAInstitute.org
When to Create Responsive? What are the device/browser needs? What type of Site is it?
Questions you may be asking… Where 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?
SharePoint Challenges What 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 and costs
Not good for intranets
Tools for Responsive SharePoint Image Renditions Device Channels
Image Renditions Optimize 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
Add Screenshots and Steps - Sample
Create Image Renditions
Modify Image Rendtions
Device Channels Device Channels Pros and Cons
A DC can use a particular MP Specified for Different Browsers
Device Channels Device Channels Pros and Cons
More Development for creation and Management of Multiple Master Pages
Confusing Performance??
Responsive Design and SharePointWorking with Responsive Design and SharePoint 2013, create, work with and utilize.
Browsers that Support RWD
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
Browsers that Support RWD http://blog.divshot.com/post/29829585371/chr
ome-developer-tools-responsive-design
Great tools for checking your designs! MattKersley.com/responsive/ Quirktools.com/screenfly/ Screenqueri.es/ Responsinator.com/
RWD Breakpoints
http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
Thank you for attending!
Helpful Links http://msdn.microsoft.
com/en-us/library/jj733517.aspx
http://blogs.technet.com/b/tothesharepoint/archive/2013/02/07/sharepoint-and-mobile.aspx
http://blog.mastykarz.nl/responsive-image-renditions-sharepoint-2013/
http://msdn.microsoft.com/en-us/library/jj733518.aspx
http://msdn.microsoft.com/en-us/library/jj163242.aspx
http://msdn.microsoft.com/en-us/library/jj862343.aspx
Other links for reading http://blog.cloudfour.com/css-media-query-for-mo
bile-is-fools-gold/ http://alistapart.com/article/responsive-web-desig
n
http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/
http://www.html5rocks.com/en/mobile/responsivedesign/
http://coding.smashingmagazine.com/2013/03/11/responsible-web-design/
Twitter Contests!
Mention @SPS_ATL & #SPSATL You MUST Mention a speaker OR a sponsor to
qualify You must be present to win!
Drive your own popularity – mention your Twitter handle
Win prizes for best tweets!
Multiple prizes each session! Session Prizes
1 4 $25 gift cards
2 4 $25 gift cards
3 4 $25 gift cards
4 4 $25 gift cards
5 4 $25 gift cards
Talk About Yourself!
Fill out surveys for big prizes
SCAN QR CODES
47 |SharePoint Saturday Atlanta47 |SharePoint Saturday Atlanta
Join us for SharePint Meehan’s – 200 Peachtree Street Right after the event ends First drink is on B2B Technologies
48 |SharePoint Saturday Atlanta48 |SharePoint Saturday Atlanta
SharePint Directions
49 |SharePoint Saturday Atlanta49 |SharePoint Saturday Atlanta
Please thank our sponsors!
Platinum Sponsors
50 |SharePoint Saturday Atlanta50 |SharePoint Saturday Atlanta
Please thank our sponsors!
Gold Sponsors
51 |SharePoint Saturday Atlanta51 |SharePoint Saturday Atlanta
Please thank our sponsors!
Silver Sponsors
52 |SharePoint Saturday Atlanta52 |SharePoint Saturday Atlanta
SharePint
Please thank our sponsors!
Item & Event Sponsors
Speaker Shirts Attendee Shirts
Abel Solutions
Speaker Dinner