In-Context Editing and CSS with Mobile Devices

Download In-Context Editing and CSS with Mobile Devices

Post on 06-Mar-2016




1 download

Embed Size (px)


Presentation given at '09 OmniUpdate User Conference in Long Beach, CA


  • In-Context Editing &Using CSS with Mobile DevicesJustin Gatewood, WebmasterVictor Valley Community College District

  • Nov./Dec. 1985

  • In-Context Editing

  • What is In-context editing?Gives users a visual representation of the web page they are editing in the WYSIWYG editor

  • Whats the difference?

  • Whats the difference?

  • Whats the difference?

  • Whats the difference?

  • How do I set it up?

  • How do I set it up?Use the editor tag as follows (does not require a closing equivalent):


  • How do I set it up?csspathThe csspath (optional) refers to a css file (absolute from the base of the web site) that is used within the editing area. It can include a body background image with margins.Syntax:csspath="production absolute path"production absolute path- An absolute path relative to the root of the production server. Do not include a protocol or domain. (

  • Contains all you will need to get started with using in-context editing in OU CampusPAGE TAGGING : THE BASICSEXAMPLESA DETAILED TUTORIAL (w/source code, etc.)THE FULL PAGE TAGGING BUTTON LIST (w/button numbers, image previews)A DETAILED TAGGING REFERENCE PAGE


  • Using CSS with Mobile Devices

  • According to a May 2008 report by Nielsen, the mobile internet extends the reach of leading Internet sites by 13%

    More people now access browser-based internet content using a phone, than using a PCworldwide according to Tomi Ahonen March 2008Why design for mobile?

  • Standards-based, semantically-coded, structured content (a.k.a. XHTML)

    Separate this structured content from your presentation (a.k.a. CSS)

    Once you have accomplished this task, youre already providing a website that will work with most mobile browsers

    How do I design for mobile?

  • HTML method:(placed in the of your XHTML document)

    Mobile CSS methods

  • CSS @media method:

    @media screen { /* CSS rules go here */ } @media handheld { /* CSS rules go here */ }@media print { /* CSS rules go here */ }

    This is basically like calling your media method from within the CSS file itself. You could place sections of applicable rules for each media type you wanted to focus on all in the same CSS file.Mobile CSS methods

  • Parameter @import method:(these must be at the top of your CSS file)

    @import url ("screen.css) screen; @import url ("handheld.css) handheld;@import url (print.css) print;

    The CSS @import is very helpful, because it allows you to create a separate style sheet, and then import it into your existing CSS implementation without adding CSS tags to every page of your website to roll out that style sheet. By using @import with a media specific handheld style sheet, only those browsers that support it will load it.Mobile CSS methods

  • Some will only use screen stylesheetsSome will only use handheld stylesheetsSome only use the handheld stylesheet (if you have one), and if not, use the screen stylesheetSome read bothSome disregard your CSS (or give the mobile user the ability to select to disregard it), and attempt to reformat your content to fit the screen (most mobile devices have some method included to totally ignore your CSS)How are these methods supported by mobile browsers?

  • For the most recent versions of Safari and Opera, CSS Media Queries have been implemented as follows:

    This method allows you, on Opera and Safari 3+, to customize a style sheet based on the size of the screen that is rendering the page.( window width, height, device width and device height and only in pixels)What about the newest web-capable smart phones?

  • Sources: / w3c.orgHow browsers react to CSS Media TypesBrowser reactions to CSS media typeshandheld style sheets only : OpenWave browser, Nokia lite-web browsers, Netfront (configuration dependent), Digia, BlackBerry browser, Opera Mini until v4, Opera Mobile until v9handheld and screen style sheets supported : Palms Blazer, Nokia S40 browser, IEMobile 6.x and 8.xscreen style sheet only (w/ CSS Media Query support) :iPhones Safari, Opera Mobile starting v9, Opera Mini starting v4screen style sheet only (w/out CSS Media Query support) :Nokia S60 browser, Netfront (configuration dependent), Teleqa Q7, IEMobile 7.x

  • FloatDisplayPaddingMarginBackground-imageWhat CSS elements dont play nice with mobile browsers?

  • Create a style sheet for desktop browsers desktop.cssYou probably already have thisUse a reset.css style sheet to cancel any non-mobile friendly effects that youve set in desktop.cssExample on the next slideBring these style sheets together into a main.css:@import url(desktop.css);@import url(reset.css) handheld;@import url(reset.css) only screen and (max-device-width:480px);How do I put it together?

  • html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; }table { border-collapse: collapse; border-spacing: 0; }

    NOTE: You may or may not be using these styles in your default screen style sheet, and as such, you should modify this before using it in your web site.reset.css


  • Create a style sheet mobile.css with rules specific to style content for mobile browsers, then

    Bring them all together in the HTML document as follows:

    How do I put it together?(part 2)

  • Mobile browsers that only read a handheld style sheet will not read CSS properties defined in desktop.css they dont support.

    Mobile browsers that read screen style sheets, and handheld or media queries style sheets will not be affected by the unsupported properties in desktop.css, since theyre canceled by reset.css.

    Finally, desktop browsers will ignore both reset.css and mobile.css, because you have specified (with media types) that these two are to be used for handhelds.What will this accomplish?

  • Very good option for reducing the weight of what is delivered to the mobile device

    Before going down that road, this approach bears the question: What content do mobile users want to use, and how do I deliver that content to them?

    Some developers favor mobile device/browser detection and content delivery specific to that mobile User Interface (or group of similar interfaces)

    Some developers are for Windows-Mac-Linux OS/browser detection (arguably more consistent than detecting particular mobile devices), and if the user agent requesting the page is not from these environments, then you deliver those devices some scaled-down mobile content

    Remember, the user IS mobile, not just HOLDING one.

    What about User Agent Switching / Browser Detection?

  • Full Web rendering : Apples iPhoneScaled down rendering : Nokia flip phoneReal World Examples

  • You dont really have to create a stylesheet that specifically meets the needs of handheld devices. Most of the mobile browsers in use today will try to reformat your page if you havent given them any device-specific instructions, and they will typically do this better than you can. However, if you want to cater to those limitations, this is a decent method.

    Ultimately, if your markup is standards-based and semantically structured, you are most of the way towards making your web site work on most mobile devices already.Final words

  • Mobile Web Initiative of the W3C to check a web page for mobile-friendliness See what the mobile version of a site looks like Agent Switcher for Firefox Resource for all things mobile webhttp://ready.mobiFull testing, emulation on mobile devices, scoring of how well your site performs for mobile, and tips provided on how to make it all work Online database of mobile device information Google Web Mobilizer




View more >