in-context editing and css with mobile devices
DESCRIPTION
Presentation given at '09 OmniUpdate User Conference in Long Beach, CATRANSCRIPT
![Page 1: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/1.jpg)
In-Context Editing &
Using CSS with Mobile Devices
Justin Gatewood, WebmasterVictor Valley Community College District
![Page 2: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/2.jpg)
Nov./Dec. 1985Nov./Dec. 1985
![Page 3: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/3.jpg)
In-Context Editing
![Page 4: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/4.jpg)
What is “In-context” editing?
• Gives users a visual representation of the web page they are editing in the WYSIWYG editor
![Page 5: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/5.jpg)
What’s the difference?
![Page 6: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/6.jpg)
What’s the difference?
![Page 7: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/7.jpg)
What’s the difference?
![Page 8: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/8.jpg)
What’s the difference?
![Page 9: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/9.jpg)
How do I set it up?
<!-- com.omniupdate.div group="Everyone" button=“811" label=“leftnav" -->
<!-- com.omniupdate.div group="Everyone" button=“817" label=“maincontent" -->
![Page 10: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/10.jpg)
How do I set it up?Use the editor Use the editor tag as follows (does not require a closing
equivalent):
<!-- com.omniupdate.editor [parameters here] --><!-- com.omniupdate.editor [parameters here] -->
Example:Example:
<!-- com.omniupdate.editor <!-- com.omniupdate.editor csspathcsspath="/css/astronomy-editor.css" ="/css/astronomy-editor.css" width="799" -->width="799" -->
![Page 11: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/11.jpg)
How do I set it up?csspathcsspath• The 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. (http://omniupdate.com)
![Page 12: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/12.jpg)
• http://support.omniupdate.com/documentation/ox/10/implementation/pagetagging/
– Contains all you will need to get started with using in-context editing in OU Campus
• PAGE TAGGING : ‘THE BASICS’• EXAMPLES• A DETAILED TUTORIAL (w/source code, etc.)• THE FULL PAGE TAGGING BUTTON LIST (w/button numbers, image
previews)• A DETAILED TAGGING REFERENCE PAGE
Resources
![Page 13: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/13.jpg)
Using CSS with Mobile Devices
![Page 14: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/14.jpg)
• 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 PC…worldwide according to Tomi Ahonen – March 2008
Why design for mobile?
![Page 15: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/15.jpg)
• 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, you’re already providing a website that will “work” with most mobile browsers…
How do I design for mobile?
![Page 16: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/16.jpg)
HTML “<link />” method:(placed in the <head> of your XHTML document)
<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/>
<link rel=“stylesheet” href=“print.css” media=“print”/>
Mobile CSS methods
![Page 17: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/17.jpg)
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
![Page 18: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/18.jpg)
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 <link> 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
![Page 19: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/19.jpg)
Some will only use screen stylesheets• Some will only use handheld stylesheets• Some only use the handheld stylesheet (if you have one), and if not,
use the screen stylesheet• Some read both• Some 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?
![Page 20: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/20.jpg)
For the most recent versions of Safari and Opera, CSS Media Queries have been implemented as follows:
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device
width:480px)"/>
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?
![Page 21: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/21.jpg)
Sources: alistapart.com / w3c.org
How browsers react to CSS Media TypesBrowser reactions to CSS media types
• handheld style sheets only : – OpenWave browser, Nokia lite-web browsers, Netfront (configuration
dependent), Digia, BlackBerry browser, Opera Mini until v4, Opera Mobile until v9
• handheld and screen style sheets supported : – Palm’s Blazer, Nokia S40 browser, IEMobile 6.x and 8.x
• screen style sheet only (w/ CSS Media Query support) :– iPhone’s Safari, Opera Mobile starting v9, Opera Mini starting v4
• screen style sheet only (w/out CSS Media Query support) :– Nokia S60 browser, Netfront (configuration dependent), Teleqa Q7, IEMobile
7.x
![Page 22: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/22.jpg)
• Float• Display• Padding• Margin• Background-image
What CSS elements don’t play nice with mobile browsers?
![Page 23: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/23.jpg)
• Create a style sheet for desktop browsers “desktop.css”– You probably already have this
• Use a “reset.css” style sheet to cancel any ‘non-mobile friendly’ effects that you’ve set in “desktop.css”
– Example on the next slide• Bring 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?
![Page 24: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/24.jpg)
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
Source: http://meyerweb.com/eric/tools/css/reset/
![Page 25: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/25.jpg)
• 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:– <link rel="stylesheet" href=“main.css" media="screen"/>
– <link rel="stylesheet" href=“mobile.css" media="handheld, only screen and (max-device-width:480px)"/>
How do I put it together?(part 2)
![Page 26: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/26.jpg)
• Mobile browsers that only read a handheld style sheet will not read CSS properties defined in desktop.css they don’t 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 they’re 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?
![Page 27: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/27.jpg)
• 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?
![Page 28: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/28.jpg)
“Full Web” rendering : Apple’s iPhone
Scaled down rendering : Nokia flip phone
Real World Examples
![Page 29: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/29.jpg)
You don’t 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 haven’t 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
![Page 30: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/30.jpg)
• http://www.w3.org/Mobile/ – Mobile Web Initiative of the W3C
• http://validator.w3.org/mobile/ – to check a web page for “mobile-friendliness”
• http://www.tiltview.com – See what the mobile version of a site looks like
• https://addons.mozilla.org/en-US/firefox/addon/59– User Agent Switcher for Firefox
• http://mobiforge.com – Resource for all things mobile web
• http://ready.mobi– Full testing, emulation on mobile devices, scoring of how well your site performs for mobile, and tips
provided on how to make it all work• http://deviceatlas.com
– Online database of mobile device information• http://www.google.com/gwt/n
– Google Web Mobilizer
Resources
![Page 31: In-Context Editing and CSS with Mobile Devices](https://reader036.vdocument.in/reader036/viewer/2022082415/568bd7b71a28ab2034a0b84e/html5/thumbnails/31.jpg)
mobilewebbook.com