Webseiten für mobile Geräte - MobileTech Conference 2010 Mainz

•

3 likes•1,235 views

Internetnutzung auf Handys und mobilen Geräten ist in den letzten Jahren drastisch gestiegen. Und mit diesem Trend steigen auch die Erwartungen der Kunden – eine "mobile-optimised"-Version gehört bei vielen Webprojekten schon jetzt zum Standard – und der Endnutzer. Obwohl die Browser im mobilen Bereich schon recht gut mit "normalen" Webangeboten klar kommen, gibt es trotzdem neue Strategien und altbekannte Webdesign-/Web-Development-Methoden, um sicherzustellen, dass ihre Seiten auf allen Geräten – jenseits vom klassischen Desktoprechner – so gut wie möglich aussehen und funktionieren.

webseiten für mobile geräte
PATRICK H. LAUKE / OPERA SOFTWARE

Patrick H. Lauke / MobileTech Conference 2010 / Mainz / 8 September 2010

“remove iPhone from ass”
Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html

sites die auf (fast) allen
mobilen devices laufen

Webseiten für mobile Geräte - MobileTech Conference 2010 Mainz

moderne mobile browser
kommen mit
“normalen” sites zurecht

2. separate mobile site
(m.flickr.com, mobile.mysite.com, ...)

vorsicht: browser sniffing
photo: http://www.flickr.com/photos/timdorr/2096272747/

lasst den user entscheiden:
desktop oder mobile?

“refactored” für kleine displays,
nicht verwässert für handys

nichts neues...
fluid layout, progressive enhancement, graceful degradation

CSS 2 Media Types
(screen, print, handheld)

CSS 2.1 Media Types
<link rel="stylesheet" ...
media="print" href="...">

@import url("...") print;

@media print {
// insert CSS rules here
}

CSS 3 Media Queries
“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/

CSS 3 Media Queries
● erweitern CSS 2.1 Media Types konzept
● präzisere kontrolle (nicht nur screen, print...)

● width, height, orientation, color, resolution, …

http://www.w3.org/TR/css3-mediaqueries/

CSS 3 Media Queries
<link rel="stylesheet" ...
media="screen and (max-width:480px)" href="...">

@import url("...") screen and (max-width:480px);

@media screen and (max-width:480px) {
// insert CSS rules here
}

viewport meta
●
desktop: viewport = sichtbares browserfenster
●
mobile geräte: “virtual viewport”, physical pixels, zoom
●
viewport meta schlägt dem browser interpretierung vor

viewport meta
<meta name="viewport"
content="width=device-width">

<meta name="viewport"
content="width=320, initial-
scale=2.3,user-scalable=no">
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

daten und server requests
minimieren / vermeiden
(minify JavaScript, kombinierte CSS files, …)

CSS sprites
Dave Shea, A List Apart
www.alistapart.com/articles/sprites

width: 50px; height: 50px;
background: url(icons.gif) no-repeat -51px 0;

data URLs
http://software.hixie.ch/utilities/cgi/data/data

video, audio und canvas
ohne “steck-eins”
(kein Java / Flash / Silverlight auf mobilen geräten)

geolocation
navigator.geolocation.getCurrentPosition(success, error);
navigator.geolocation.watchCurrentPosition(success, error);

function success(position) {
/* where's Wally? */
var lat = position.coords.latitude;
var long = position.coords.longitude;
...
}

offline detection
window.addEventListener('online', function(){ … }, true);
window.addEventListener('offline', function(){ … }, true);

application cache
<html manifest=”blah.manifest”>

CACHE MANIFEST
images/sprites.png
scripts/common.js
scripts/jquery.js
styles/global.css
data.xml

NETWORK:
resources/news.xml

FALLBACK:
images/ offline/not-available.png

…und mehr (in arbeit)
WebGL, <device>, Contacts API …

1. nichts tun
2. separate mobile site
3. einzige adaptive site

www.opera.com/developer
patrick.lauke@opera.com
people.opera.com/patrickl/presentations/mobiletechcon_08.09.2010/mobiletechcon_08.09.2010.pdf

What's hot

Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010

Patrick Lauke

This document provides tips and techniques for making a website mobile-friendly. It discusses three approaches: doing nothing and hoping the mobile browser can handle it, creating a separate mobile site, or using a single adaptive site. The recommended approach is a single adaptive site that uses fluid layouts, progressive enhancement, and CSS media queries to provide an optimized experience across devices. Specific techniques include using the viewport meta tag, minimizing data and requests, CSS sprites, and data URLs.

Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...

Patrick Lauke

This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and hoping normal websites work okay on mobile, 2) Creating a separate mobile-optimized site, or 3) Having a single adaptive site that uses techniques like fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then goes into details about techniques for adaptive sites, including viewport meta tags, touch and gesture support, and using device capabilities like geolocation without plugins. It emphasizes that adaptive design is useful not just for mobile but any device.

Escultura ceramica

Acreditación Informática

WordPress Navigation in Responsive Design

openchamp

Rubbing the Sankara Stones the wrong way - From the Front 2014

Christian Heilmann

Video geografia

estudiante

Wai Aria In Real World

Goonoo Kim

This document discusses how ARIA (Accessible Rich Internet Applications) roles can be used to improve accessibility of web applications. It explains that ARIA roles define the purpose of different page elements to assistive technologies like screen readers. The document provides examples of landmark, widget, and tab roles and how various JavaScript libraries support ARIA roles for common user interface widgets. It also lists some real world examples of how ARIA has been implemented on high profile sites and in popular JavaScript frameworks.

Adaptive Layouts - standards>next London 28.05.2011

Patrick Lauke

This document discusses making websites responsive and cross-device friendly. It covers: 1. The need to support mobile devices like phones and tablets. 2. CSS media types and queries that allow targeting different device capabilities like width. 3. The viewport meta tag which helps mobile browsers render web pages properly. 4. Challenges like devices reporting incorrect widths that require viewport fixes.

Responsive UX - One size fits all @BigDesign conference #BigD12

touchtitans

Mobil web technológiai utak, tervezés - Kolozsi István, kolboid

István Kolozsi

Html5 mobile develop tools

Ley Liu

How to make your first mobile app wireframe

App Verticals

Hogyan tegyük a vásárlást élménnyé egy webáruházban?

István Kolozsi

Google Play or Apple? Where Should I Publish My App?

App Verticals

Ciklum net sat17032012SergeyBelskiy-What's new in vs11 for Sharepoint

Ciklum Ukraine

Mobile Tools and Trends

Jeff Wisniewski

Mobile tools and trends discusses location triggered alerting and examples like reminding someone to return library books when near the library. It also lists several mobile app tools, including a WiFi joiner app to connect devices to networks via QR code, an app to share presentations between multiple iPads with one in control, a tool to quickly create mobile mockups using templates, a mobile web framework from UCLA using HTML, CSS, JS and PHP, and a mobile website builder from Springshare.

Ppt unidad 1 2021

fabian cortez

Responsive Design - WordUp Edinburgh 2011

Epitome Solutions Ltd

Accessible web applications

Wojtek Zając

The document discusses web accessibility and why it is important. It provides examples of disabilities like visual, hearing, motor, and cognitive impairments and how web accessibility benefits those groups. It outlines best practices for web accessibility such as using proper alternative text, link text, form labels, tab order, ARIA roles and states, and live regions. It recommends starting with semantic HTML, logical DOM ordering, managing focus, and using tools to evaluate accessibility.

Important

merbin2012

What's hot (20)

Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010

Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...

Escultura ceramica

WordPress Navigation in Responsive Design

Rubbing the Sankara Stones the wrong way - From the Front 2014

Video geografia

Wai Aria In Real World

Adaptive Layouts - standards>next London 28.05.2011

Responsive UX - One size fits all @BigDesign conference #BigD12

Mobil web technológiai utak, tervezés - Kolozsi István, kolboid

Html5 mobile develop tools

How to make your first mobile app wireframe

Hogyan tegyük a vásárlást élménnyé egy webáruházban?

Google Play or Apple? Where Should I Publish My App?

Ciklum net sat17032012SergeyBelskiy-What's new in vs11 for Sharepoint

Mobile Tools and Trends

Ppt unidad 1 2021

Responsive Design - WordUp Edinburgh 2011

Accessible web applications

Important

Similar to Webseiten für mobile Geräte - MobileTech Conference 2010 Mainz

Making your site mobile-friendly - Standards-Next 12.06.2010

Patrick Lauke

The document discusses making websites mobile-friendly by either doing nothing and relying on mobile browsers, creating a separate mobile site, or using a single adaptive site with fluid layouts, progressive enhancement, and CSS media queries to dynamically adjust the design for different screen sizes. It provides tips for optimizing sites for mobile such as minimizing data and server requests through image compression, JavaScript minification, and CSS combining.

Making your site mobile-friendly / RIT++

Patrick Lauke

Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....

Patrick Lauke

This document discusses approaches to web development for mobile devices. It begins by noting the increasing importance of the mobile web. It then examines three approaches: 1) Doing nothing and hoping modern mobile browsers can handle desktop sites, 2) Creating a separate mobile site, and 3) Having a single adaptive site that refactors content for different screens using fluid layouts, progressive enhancement and media queries. The document dives into techniques for adaptive design like viewport meta tags, touch events, and responsive images. It also notes remaining challenges like viewport interpretation and high-DPI screens lying about resolution.

смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1

rit2011

This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and relying on modern mobile browsers to render normal sites, 2) Creating a separate mobile site with a subdomain or folder, and 3) Having a single adaptive site that uses fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then covers various techniques for adaptive design, including viewport meta tags, touch and gesture support, multimedia without plugins, geolocation, and offline capabilities.

Bruce lawson-over-the-air

brucelawson

Web Apps and more

Yan Shi

This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.

Web app and more

faming su

This document discusses various techniques for making web applications work offline and with unreliable network connections, including: - The application cache manifest which allows specifying cached resources to work offline - Issues with the current manifest specification and potential enhancements - The window.applicationCache API for caching resources and monitoring cache status - Detecting online/offline status using the navigator.onLine property In 3 sentences or less, it summarizes approaches for offline web applications using the application cache manifest, applicationCache API, and navigator.onLine property.

Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...

Patrick Lauke

1. The document discusses approaches for making websites adaptive and responsive across different mobile devices and screen sizes. 2. It describes using CSS media queries and viewport meta tags to selectively style content for different device widths and resolutions. 3. Fully responsive design is recommended, using a fluid grid, fluid images, and media queries to automatically adjust the layout without separate mobile versions.

Best Practices for Mobile Web Design

St. Petersburg College

According to the International Telecommunication Union, at the end of 2011 there were more than 1 billion mobile‐broadband subscriptions worldwide! With more of your library users using mobile devices to access information they will assume that your library can be available from anywhere, at any time, and on most any device. Now is the time to be ready for this demand. In this webinar: - Explore some innovative library mobile website designs and see how they were built. - Understand how HTML, CSS, and JavaScript work together to build mobile websites. - Learn what a mobile framework is and why they are used. - Provide some existing mobile services/apps that can be included in library-created mobile websites. - Acquire best practices in mobile Web development from start to finish.

Don't touch the mobile parts

Francesco Fullone

The document provides tips for optimizing websites for mobile browsers. It discusses differences between mobile and desktop browsers like slower rendering speeds and varied browser families on mobile. It recommends strategies like embedding resources inline, caching assets locally, lazy-loading content, minimizing requests and file sizes, detecting devices, and testing on mobile emulators. The document emphasizes optimizing for the limitations of low-end mobile browsers.

Html5 on Mobile(For Developer)

Adam Lu

The document discusses building mobile web applications using HTML5. It covers topics like HTML5 features that are well supported on mobile browsers like forms, communication, canvas, geolocation, audio and video. It provides examples of using CSS3 for styling, animation and media queries for responsive design. It also discusses utilizing HTML5 APIs for advanced interactions, graphics, offline support, performance and accessing device capabilities.

Adaptive layouts - standards>next Manchester 23.03.2011

Patrick Lauke

openMIC barcamp 11.02.2010

Patrick Lauke

This document compares native applications, web applications, and widgets for mobile devices. Native applications have direct access to device features but must be developed for each platform. Web applications can be written once and deployed anywhere but run inside the browser without direct device access. Widgets combine the cross-platform capabilities of web applications with the ability to access device features and run standalone like native applications.

Web APIs & Apps - Mozilla

Robert Nyman

This document summarizes the Firefox OS, an open web platform for building mobile apps and customizing the user interface using HTML5, CSS, and JavaScript. It outlines key web APIs, the process for developing and publishing open web apps, and the different types of apps including regular web apps, installed web apps, and privileged web apps with additional capabilities. Security levels and permissions for APIs are also discussed.

HTML5 on Mobile

Adam Lu

This document discusses HTML5 on mobile devices. It begins by explaining why mobile web is growing and why HTML5 is well-suited for mobile. It then provides an overview of what HTML5 is and examples of features like forms, multimedia, geolocation that can be used on mobile. It also discusses considerations for mobile web development like responsive design and frameworks. The document recommends tools for mobile debugging and testing performance.

Widgets WorkShop for Libraries

Guus van den Brekel

Web app

조 용구

This document discusses web apps versus native apps for iPhone and other mobile platforms. It covers key differences like programming languages used, app distribution methods, and costs. It also explores using HTML5 to build web apps that work across different mobile platforms without needing separate native apps. Finally, it provides tips for optimizing web apps for iPhone, including viewport settings, touch icons, and using libraries like jQTouch to create an iPhone-like user interface.

Web app

조 용구

This document compares web apps and native apps for mobile devices. It discusses that web apps are developed with HTML, CSS and JavaScript and can be accessed through any web browser, while native apps are developed through platforms like iOS and Android using languages like Objective-C and Java. It also mentions that HTML5 aims to make web apps work more like native apps by adding features like offline storage, multimedia playback and geolocation to web browsers. Finally, it provides examples of how to make web apps for iPhone that utilize features like touch icons, viewport settings and JavaScript libraries to mimic the look and feel of native iPhone apps.

Transmission2 25.11.2009

Patrick Lauke

The document discusses the future of web technologies, focusing on three main areas: 1. New web standards like HTML5 that provide more capabilities without plugins through elements, forms, canvas and video. CSS3 media queries also allow adaptive content for different devices. 2. Adaptive content through media queries and responsive design can make sites work across devices that vary in screen size, input, and capabilities. 3. The browser is emerging as a platform through widgets, JavaScript APIs and the browser runtime, allowing development across devices without writing for each platform natively. Standards will make the browser a ubiquitous platform.

Best Practices in Mobile Development: Building Your First jQuery Mobile App

St. Petersburg College

By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this hands-on webinar, you will: - learn the differences between native and web apps. - understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile web apps. - gain hands-on experience using jQuery Mobile to develop a fully functional mobile-optimized web app. - have access to a free Web server so you can continue to work/test your project live on the Web. - continue to work with Jason and Chad so you can have a mentor during and after your project.

Similar to Webseiten für mobile Geräte - MobileTech Conference 2010 Mainz (20)

Making your site mobile-friendly - Standards-Next 12.06.2010

Making your site mobile-friendly / RIT++

Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....

смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1

Bruce lawson-over-the-air

Web Apps and more

Web app and more

Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...

Best Practices for Mobile Web Design

Don't touch the mobile parts

Html5 on Mobile(For Developer)

Adaptive layouts - standards>next Manchester 23.03.2011

openMIC barcamp 11.02.2010

Web APIs & Apps - Mozilla

HTML5 on Mobile

Widgets WorkShop for Libraries

Web app

Transmission2 25.11.2009

Best Practices in Mobile Development: Building Your First jQuery Mobile App

More from Patrick Lauke

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...

Patrick Lauke

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the guidelines' normative text. And, of course, it is not perfect - with some omissions, handwaving, and straight-up loopholes. So where does this leave developers and auditors? In this talk - a reprise of a previous talk, now updated to cover new SCs from WCAG 2.2 - Patrick may not have all the answers, but he'll have a good rant around the subject anyway...

Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke

Patrick Lauke

Update about Pointer Events Level 3 work for the upcoming W3C Technical Plenary and Advisory Committee (TPAC) 2023 in Seville https://www.youtube.com/watch?v=r0spZl1qaa0 https://w3c.github.io/pointerevents/ https://www.w3.org/TR/pointerevents/ https://www.w3.org/2023/09/TPAC/ https://patrickhlauke.github.io/touch/w3c_tpac2023_pewg/ Cross-posted from https://www.w3.org/2023/09/TPAC/group-updates.html#pointer-events

These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...

Patrick Lauke

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...

These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...

Patrick Lauke

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...

Too much accessibility - good intentions, badly implemented / Public Sector F...

Patrick Lauke

Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...

Patrick Lauke

Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...

Patrick Lauke

Managing and educating content editors - experiences and ideas from the trenc...

Patrick Lauke

Implementing Web Standards across the institution: trials and tribulations of...

Patrick Lauke

Geolinking content - experiments in connecting virtual and physical places / ...

Patrick Lauke

All change for WCAG 2.0 - what you need to know about the new accessibility g...

Patrick Lauke

WCAG 2.0 is the new set of web accessibility guidelines that was released in 2008 as a recommendation by the W3C. It addresses some issues with the previous WCAG 1.0 guidelines by being technology-agnostic, having clearly testable success criteria focused on user outcomes rather than techniques, and removing outdated requirements. WCAG 2.0 provides more freedom for authors while still ensuring accessibility. It includes 4 principles, 12 guidelines and 61 success criteria to evaluate websites. The transition from WCAG 1.0 involves evaluating sites based on the new success criteria and testing areas that may be different.

Web Accessibility - an introduction / Salford Business School briefing / Univ...

Patrick Lauke

This document provides an introduction to web accessibility. It begins by addressing some common misconceptions about accessibility, noting that it aims to accommodate people with a wide range of disabilities, not just visual impairments. The document emphasizes that accessibility is important for both ethical and legal reasons, and that inclusive design benefits all users. It then outlines key web accessibility guidelines from the W3C, providing examples of how to make content more accessible through proper semantic markup and alternative text. The conclusion stresses that accessibility is an essential consideration for web development.

Doing it in style - creating beautiful sites, the web standards way / WebDD /...

Patrick Lauke

Web standards pragmatism - from validation to the real world / Web Developers...

Patrick Lauke

The document discusses common misconceptions and pitfalls around using web standards. It argues that web standards are about more than just validation - they are about semantics, separation of concerns, and pragmatism. Some key points include: using the most appropriate HTML elements to convey meaning rather than appearance; applying styles through CSS instead of presentational markup; avoiding non-semantic class names; and recognizing that not all uses of tables or images are invalid. The document advocates for balancing standards with practical concerns like multiple authors and one-off content needs.

Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...

Patrick Lauke

The state of the web - www.salford.ac.uk / 2007

Patrick Lauke

Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...

Patrick Lauke

WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...

Patrick Lauke

Vanilla HTML is limiting and boring. Our clients demand highly engaging and interactive web experiences. And wouldn’t you know, with just a bit of HTML and JavaScript we can craft amazing custom controls, widgets and effects that go far beyond the confines of traditional static markup. But how can we ensure that these custom experiences are both understandable and usable for people with disabilities, and in particular those using assistive technologies such as screen readers? In this talk, we will look at the basics of making some common custom-built components accessible - covering how browsers and assistive technologies interact, the limitations of HTML, and how ARIA can help make interactive experiences more accessible. In addition, we will explore some of the recent additions in ARIA 1.1, as well as some particular challenges when it comes to traditional ARIA patterns and assistive technologies on mobile/tablet/touch devices. Evergreen slidedeck at https://patrickhlauke.github.io/aria/presentation/ / https://github.com/patrickhlauke/aria/

WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...

Patrick Lauke

WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018

Patrick Lauke

This document provides an introduction to Accessible Rich Internet Applications (WAI-ARIA). It discusses the need for ARIA to make complex web applications accessible, common ARIA roles and attributes, and best practices for using ARIA. Key points include: ARIA defines roles, states and properties to convey semantics to assistive technologies; common roles include buttons, toggles, and landmarks; and the five rules of ARIA use emphasize using native HTML when possible and ensuring interactive elements are keyboard accessible.

More from Patrick Lauke (20)