Transcription
RESPONSIVE WEBDESIGN WITHSHAREPOINTScarePoint Saturday, Spookinnati
ABOUT MEName:Matt JimisonCompany:Title:Delivery AdvisorLocation:Indianapolis, imison
AGENDAEvolution of Web DesignResponsive Web DesignCSS 3 / Html 5Current SharePoint Mobile CapabilitiesSharePoint 2010 Responsive MasterPagesSharePoint 2013 Advancements
HISTORY OFWEB DESIGNFrom Worse to Better Table-Based LayoutsBrowser-Based HTML & JavaScriptFont TagsCSS 1.0 for Fonts and AlignmentCSS 2.0 for CSS-Based LayoutsDevice-Specific SitesCSS 3.0 for Capability-Based Styles
CSS-BASEDLAYOUTSSeparation of Content and Design. The Death of Tables.2004
CSS ZENGARDEN
MOBILE-SPECIFICWEBSITESDouble the Websites. Double the Effort. Double the Maintenance.2008
IOS DEVICES
WEB BROWSERSARE EVERYWHEREWeb Browsers Have Attacked. What Do We Do?2012
DEVICES KEEPCOMINGStandard MonitorsWidescreen MonitorsSmart PhonesTabletsGame ConsolesHandheld DevicesTV BrowsersRefrigerators
GRACEFULDEGRADATIONWeb Browsers Are Forward-CompatibleWeb Browsers Keep Getting Faster and BetterCreate Websites for the Newest BrowsersPages Degrade in Older Browsers, but ContentRemains
GRACEFULDEGRADATIONTesting Multiple Browsers Takes Too Much TimeHandheld Devices Aren’t Always More PowerfulMobile Devices Don’t Have Bandwidth RestrictionsBrowsers are FreeMake the User Upgrade ** Offer Void in Companies Where IT Departments Disallow Users Installing New Software,Or When Dealing With Users at Home Who Don’t Want to Upgrade, or Don’t Know How
PROGRESSIVEENHANCEMENTSTEPHEN CHAMPEONPrimary content shouldbe accessible in allbrowsersPrimary functionalityshould be accessible in allbrowsersContent implementedthrough semantic HTMLmarkupAdvanced layout createdthrough an externalstylesheetAdvanced behavior iscreated through externalunobtrusive JavaScript
PROGRESSIVEENHANCEMENTVS andard
WHYPROGRESSIVEENHANCEMENTToday’s Browsers Provide an AcceptableLevel of ContinuityWeb Standards Create ConsistencyAcross BrowsersNewer Browsers are CSS 2.0 Compatibleand AboveWriting Cross-Browser JavaScript is Easy* (jQuery)* jQuery, a Standards-Based Library, is Writing off Internet Explorer 8 and Below in 2013 with V 2.0.
DESIGNINGFOR MULTIPLEDEVICESNeed to Support an Endless Number ofDevicesProvide Support for Devices That Haven’tBeen Invented YetNeed Websites that Adapt to Capabilitiesinstead of DevicesNeed an Acceptable Level of BrowserSupport to Accomplish (CSS 3.0)
RESPONSIVEWEB DESIGNOne Site is Created to Serve All DevicesETHAN MARCOTTEAlternate Designs Served by Multiple CSSFiles (Needs Css3 Media Query Support)We Query Device Capabilities to Providethe Optimal Design
RESPONSIVEWEB DESIGNETHAN MARCOTTEMediaQueriesFluidLayoutsFlexibleImages
RESPONSIVEDESIGNS IN THEWILDWhat Does Responsive Design Look Like?
MEDIAQUERI.ESGET INSPIRED
RESPONSIVEDESIGN DEMOYour Desktop Browser is an iPhone. And an iPad.
MEDIAQUERIESIntroduced in CSS 3.0GOOGLE LIKES THEMQuery a Device by Capability to DetermineWhat Stylesheets are AppliedInternet Explorer 8.0 and Below NeedsHelp (Are We Surprised?)
omecolorcolor-indexresolutionscangrid
MEDIA QUERY EXAMPLES
MEDIAIMPORTLINKMEDIA QUERY LOCATIONS
DOWNLOADSDISPLAY:NONE ! DOWNLOAD:NONEAll Stylesheets Are DownloadedHidden Images are Still DownloadedBackground Images are On-DemandSome Browsers Are Smarter than Others
FLEXIBLELAYOUTSKILL PIXELS Start with a Fixed Width DesignUse the Content/Container FormulaReplace Pixels with PercentagesDon’t Round those Long NumbersContentContainer %
FLUID IMAGESScale Imageswith max-width:100%Hide Imageswithbackgroundposition
FLUID IMAGESFOR IE 8Scale Imageswith width:100%Useimgsizer.jsfor SharperImages
VIEWPORT
CSS 3A Set of Modules4 Formally Recommended ModulesNo Such Thing as CSS 4Strong Support for CSS 3 in Mobile Devices
HTML 5CSS 3 Can Exist Without Html 5Html 5 Is a Set of SpecificationsDetect Specific FeaturesDocType changes Browser Mode
MODERNIZRDETECT W/ JSWhat It DoesDetect CSS 3.0 CapabilitiesDetect HTML 5 CapabilitiesYepNope.js (conditionally load js and css)
SANDBOX DEMOResponsive Design Demo. Minus the SharePoint. Plus Modernizr.
MOBILESHAREPOINTThe Scariest Part of the Presentation. First mention of SharePoint on Slide 46.
CURRENTMOBILECAPABILITIESApp Browsers/compat.browserInterprets User Agent to RedirectCan Simulate by Appending ?mobile 1Significantly Smaller Page LoadDifficult to CustomizeLimited Content AvailableNo Anonymous AccessBased on Devices, not Capabilities
HTML 5MASTER PAGEKYLE SCHAFFERDownload Now
RESPONSIVEDESIGNSHAREPOINTTEMPLATELUIS KERRDownload Now
TEMPLATES INACTIONDemo Time.
SHAREPOINT 2013Advancements are Coming.
DEVICECHANNELSCreate Device Channels that Are Based onMatching User AgentAND PANELSAssociate a MasterPage to a Device ChannelDevice Channel Panels Conditionally ShowContentTest Through QueryStringNot a Means of Securing Content
IMAGERENDITIONS Create a Set of Image Renditions thateach Image will Automatically Follow Manually crop and select the portion ofan Image Used for a Rendition Video Files also Utilize Renditions Requires BlobCache
QUESTIONS?Evaluations are !important. Please be sure to fill them out.
SCAREPINTRight here at the UC Bearcat Loungeimmediately following the closing sessionGenerously sponsored by
THANKS TO OUR SPONSORS
REFERENCES http://en.wikipedia.org/wiki/Progressive terpage.ziphttp://en.wikipedia.org/wiki/Cascading Style w.abookapart.com/products/responsive-web-design
Evolution of Web Design Responsive Web Design CSS 3 / Html 5 Current SharePoint Mobile Capabilities . RESPONSIVE WEB DESIGN ETHAN MARCOTTE . RESPONSIVE WEB DESIGN ETHAN MARCOTTE Flexible Images Fluid Layouts Media Queries . RESPONSIVE DESIGNS IN THE WIL
