Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Andere mochten auch
Andere mochten auch (19)
Ähnlich wie One Site to Rule Them All: Responsive Web Design
Ähnlich wie One Site to Rule Them All: Responsive Web Design (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
One Site to Rule Them All: Responsive Web Design
- 2. Stuart Hilbert Responsive Web Design
- 5. Trendier than an Elvin Forged Sword Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine Mashable called 2013 the Year of Responsive Web Design Forbes – Prioritize it right now Must have been Orcs on the previous slide Responsive Web Design
- 6. What is RWD? Optimal Viewing Experience Minimum Resizing Panning Scrolling Future Proof This site even looks great on here! Responsive Web Design
- 7. Many Different Pages Responsive Web Design { { Responsive vs. Traditional Mobile One Page
- 8. The Age of the Elves is Fading Responsive Web Design
- 9. Technology JavaScript JQuery CSS Did you say second breakfast? Responsive Web Design
- 11. Frameworks Fluid Concept Percentages Rather than Absolutes Columns/Rows Flexible Images Media Queries Conditional Content Icons Additional Functionality Responsive Web Design
- 12. Frameworks Foundation http://foundation.zurb.com Gumby http://gumbyframework.com Unsemantic http://www.Unsemantic.com Bootstrap http://getbootstrap.com Skeleton http://www.getskeleton.com CSSGrid.net http://cssgrid.net Less Framework http://lessframework.com Frameworks I look just like you except for that hand placement.
- 13. Twitter Bootstrap Built by Twitter Backwards compatible to IE 7 12 Column Grid Dozens of Components Javascript Plugins Typography Form Controls Documentation Bootstrap
- 14. Twitter Bootstrap Hands on Demo in DNN BS130630 Responsive Skin / Business / Slider / Gallery / Bootstrap / Mobile / DNN 7/6/5 POTATOES! Bootstrap
- 15. Cons/Pitfalls/Shelob Some Modules Aren’t Responsive Need HTML Knowledge Style Hacks Loss of Control Easy to mess up SEO Additional Overhead Pros/Cons
- 16. Pros Works on all devices Mobile ready in minutes Can be sped up with(RESS) Easy to use Conditional Content Quickly update SEO Pros/Cons
- 17. Availability 800+ Responsive Skins 150+ Bootstrap Skins 75+ Modules That mention Responsive What are you waiting for?
- 18. Contact Stuart Hilbert Stuart@HilbertSolutions.com http://www.hilbertsolutions.com Twitter: slhilbert DNN: slhilbert Is this thing on? Conclusion
- 19. Questions?
- 20. THANKS TO ALL OF OUR SPONSORS!
Hinweis der Redaktion
- Here is the fellowship of my experience:Thanks for Being HereI have been using DNN since 2003Work at CSC as a software engineer principal leader or something like that.Leverage Dotnetnuke to build secure content portalsLMSData exchangesMostly looking to build sites that we can hand off to administrators for upkeep.Owner of Hilbert Solutions, LLCFull service DNN ProviderModulesUpgradesTroubleshootingInstallsSupportAffordableEtcWrite and Teach Computer Science classes for both Indiana Wesleyan and Anderson UniversityDabble at non-certified organic farmingCan’t really be a job because I just spend money and don’t make any.MarriedWife AnnieTwo KidsSebastian 4 or as he would say, 4 and half.Evelyn 2Live in Noblesville Indiana a suburb on the north side of Indianapolis.I speak quickly when I get excited and I am usually excited so you might need me to slow down or repeat something. Please do not hesitate to do so.Final Warning… This presentation is heavy in Lord of the Ring tidbits, my wife questioned if you guys would get it. I assured her if you guys wouldn’t get it, no one would. Scoff NERDS!
- What is Responsive Web Design?Why use Responsive Web Design?How does Responsive Web Design work?See how Responsive Web Design Works.Inspect how different elements of Responsive Web Design work and how to use them.Finally, by the end of this presentation you will be so sick of LOTR references you will want to throw Gimli!
- You are probably wondering why these good looking folks chose Responsive Web Design and Why.Follow me on an epic quest where we will visit the following:The shireRWD as an important trendWhat is RWDElevensiesCompare it to more traditional mobile sitesLook at the technology of RWDHow it worksSecond BreakfastDeep Dive into a particular implementationPros/Cons/Pitfalls
- Take a look at these excerpts from articles. Review the quotes.Get the idea?
- RWD provides an optimal viewing experience no matter if you are viewing the site from a DesktopLaptopPhoneTabletChumblyPalantir – Orb Thing of CommunicationThe site will render itself properly on its ownMaining reducing the need to use any sort of horizontal scrollingThis is all done based on resolutionSo whatever device might come down the line will be supported
- Looking at Traditional Approaches to Mobile DesignDetect DeviceRedirect to new page for that deviceAdvantage: How the site appears on devices is 100% controllable.Disadvantage: Need to maintain multiple pages of same content just rendered differentlyRWD WayDetect device resolutionRenders page on the fly for that resolutionAdvantage: Extremely easy to maintain contentDisadvantage: Not able to control exactly how the site will render on all devices
- Does it sound too good to be true? Well it isn’tHere is of a DNN site using RWD SkinClick on Image to Take to Example Responsive Site
- Technology used for RWDJavascript and Jquery are used to control how the site resizes/realigns itself as well as adding additional useful features13 years ago when I started learning Javascript if you would have told me it was super important I wouldn’t have believed you.CSS is used to detect which site to show as well as style the site appropriatelyObviously this is an over simplification but I am trying to explain this so Pippin can maybe understand it
- There are many frameworks aka sets of Javascript/Jquery/CSS that can be used to build a responsive skinThey all have their pros and cons and it is beyond the scope of this session to get into them, nor do I have the knowledge of each one.However, do be aware that when picking a responsive skin, knowing the underlying framework could be beneficial to you if you need perhaps a certain icon set, etc.
- RWD skins are fluid, like water. They take the shape of the container you put them.This is achieved by using percentages that take up the screen to specify height and width rather than absolute valuesThe downside is that you don’t have precise control over where your content goesMost implementations are setup in a grid like system that contains columns and rowsUh oh, sounds like the dreaded table layout!!!!What RWD does is that as you change the resolution you are viewing the site on the columns stack on top of each other.Images will automatically be resized on the fly to fit the resolution you view them inMedia Queries are used to determine the screen resolution and how best to display the siteRWD can also be used to do such things as selectively hide a flash intro video that looks great on a desktop but is inappropriate for a phone.Usually some sort of icon set is available that you can use quickly and easilyOften times such things as content rotators, custom 404 pages, etc are included Frameworks are like toolboxes of lots of useful tools to create and maintain great looking content
- Frameworks are like orcs, there are a bunch of them but they all pretty much do the exact same thing.Here are some of the frameworks that are out thereThere are many, many moreSome try to fill a niche in the market, by being extremely lightweight, or feature rich, easy for prototyping
- Created by Twitter, yes that twitterWorks in IE 7 which is a good example of differences in frameworks. Most frameworks work in a minimum of IE 8.What’s that you say? Who uses IE7? I am a government contractor, though over the last year we seem to be able to have a minimum of IE 7.Works on the 12 Column GridLots of ComponentsIconsMenusetcJavascript PluginsModalsTabsTooltipsPopoverEtcTopographyPredefined CSS StylesH1AddressesAbbreviationsEtcForm ControlsButtonsLabelsTextboxesThis is all really classes you can useDocumentationClick PictureWalk through Documentation a bitScaffoldingBase CSSComponentsJavaScript
- Site has already been installedIt has skin XYZ installedThe skin should take care of the Scaffolding part of the framework by rendering them out as panes.Let’s take a look at a few things we can do with BootstrapAbbreviationsChanging a Unordered List to an Inline ListStylizing a tableIconsDropdownmenusHero UnitThumbnailsAlertGrid SystemPull-left/pull-rightCollapseTooltipCarouselHide MobileMost of these things can be achieved using a moduleHowever with just some simple HTML you can achieve the same effectHowever, you don’t need to do anything fancy, as long as the users keep there hands off the enlarge font and change font color buttons the skin will handle the overal formatting.
- Many modules are coding in such a way as they aren’t responsive and therefore are worthless in mobileDocumentsMember DirectoryDocument ExchangeTo achieve some of the more nifty things you will need knowledge of HTML and CSS. To really achieve more you will need to know JavascriptWith the more traditional mobile environment where you setup a page for a particular device you gain more control. Good news is that Dotnetnuke still will let you do that even with the responsive skin.If you gave the site to a person who is less experienced in maintaining a site they might be able to recreate or mimic the neat things you did at the start.There is some debate that SEO can be hurt with a Responsive designMore overhead, so the site might be slower
- One site works on all devices, screen sizes and resolutionsAs soon as you install the skin your site is ready for mobileSome frameworks support RESS (Responsive Design + Server Side Components). As the name suggest marries client side with server side components resulting in an optimal aka speed increase for certain devices.A content administrator who doesn’t touch the bold button every second in the text editor can create good looking content without even knowing it.You do have the ability to hide content to certain screen sizes which can be helpful to tailor the experience for users quicklyOne update will update the content for all devices, not just a select few.There is a lot of suggestion that RWD is good for SEO. Particularly I read an article discussing Google’s statement in the positive about RWD.
- The quest to a great Responsive website is easyA quick search at the DNN Store reveal800+ Responsive Skins in general150+ Bootstrap specific skins75+ modules that mention that they are responsive.Maybe a wake up call to developers that there is an opportunity… Hello Stuart?
- There is my name againHere is how you can reach meHere is how you can hire meHere is how you can harass me
- Thanks for putting up with this rather ridiculous presentationThe obvious question is why didn’t they just get on the giant eagle and fly to Mt. Doom and dispose of the ring. I have no answer to that.I will answer or try to answer questions about RWD.