Enhancing SharePoint with Responsive Web Design

Editor's Notes

• #2: Recording sessionSlides will be available from blog and twitterIndepth look at SharePoint and we can apply RWD to SharePoint.Devs should be happy, we will walk through the process. Business users, you will see what is possible.Meat will be in the demos
• #3: Recording session and will make available on blog and twitter, so if you remember one of those then you can always review everything we discuss
• #5: In joining together we will use readily available solution so as not to reinvent the wheel. This will give us a chance to review how the code works.
• #7: fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environmentAll clients effectively load the entire page but using css, hides or replaces elements to tailor the experience to the screen.DOES NOT USE USERAGENT, browser detection, rather works of screen width.Early adopter AIDS.gov
• #10: Html is very clean and simpleUsing javascript to determine functionality and add on features as allowed.Yahoo, amazon, etc
• #11: A true PE site should work without JS, SP will not do that.Tables and inline styles breaks the idea of separating content and presentation.
• #14: mobile is invading, for the good, all organizations. if not now then in the next few years.Iphone is estimated to provide 1/3% of gdp.
• #15: What, you think your next web initiative is only going to last a few years? How long did you last intranet or public facing site last?Built towards to future, not the past, you MUST consider tablets and smart phones at the least
• #16: MrZeldman founded A List Apart, best practices and innovations in web design.sure, you can zoom in on many smart phones or tablets, but what if you can make tailored experience for each device?Modern devices share basic ability with css, js though which his a plus
• #19: Mississippi Department of IT
• #21: Midwest Tool Manufacture
• #23: European Alternative Energy Company
• #25: Uses css3 media queries and js, which is ok with SP.Turn mobile view off in compat.browser found in web applications directory. Look it up.Issues are on next slide.
• #26: Also a lot of overhead, but SP already has a lot of that as well.Not IE7 and IE8 friendlyRequire CSS3? There is a js ability with jQuery’s help.Does a mobile user need the same information as a desktop user?Adding information vs consuming information. Less real estate and is the navigation necessarily the same?http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/
• #27: Let’s look at what we have OOTB as well as with just minor modifications.Stay away from total code re-write
• #28: Build particular interfaces for specific devices SP 2010 has mobile detection, but it's not good, and difficult to brand What about 2013? We will get to thatDesign and code an interface that can scale itself to different devices
• #29: Let’s look at what we have OOTB as well as with just minor modifications.Stay away from total code re-write
• #30: SPD (some limits), Visual Studio, Firebug, Browser issues
• #32: Complex enough that it is far better to start with a template.You can still move a lot around, but we want to a lot of the plumbing started for us.V5 handles the ribbon a little better but does not include layouts. Although any OOTB page layout should work.
• #33: After downloading a template, move all components to the correct location, check in and publish.
• #34: SPD (some limits), Visual Studio, Firebug, Browser issues
• #36: Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
• #38: SPD (some limits), Visual Studio, Firebug, Browser issues
• #41: Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
• #44: In 2010 I suggest RWD as it is the most compatible with SP allows for the targeting of most devices, Needs one Master pageIn 2013 still use RWD, but you can think about DC for particular devices if the need arises One primary interface that will work with most devices have the ability to allow a target for a few particular devices easier to manage 2-3 branding efforts rather than many if you attempted to tailor your site to all devices.
• #45: Html5shiv
• #47: Thank You!Don’t forget to check out my blog where you can download this presentation or the recording.Easiest way to get to the material I referenced