Making your site mobile-friendly - Ignite Manchester 01.03.2010

•

3 gefällt mir•723 views

Patrick Lauke

Technologie Kunst & Fotos

Making your site mobile-friendly
Patrick H. Lauke / Opera Software

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

make your site work on
all (most) mobile devices

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

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

nothing new...
fluid layout, progressive enhancement, graceful degradation

CSS 2 Media Types
(screen, print, handheld)

CSS 3 Media Queries
<link rel=”stylesheet”
media=”screen and (min-width:800px)”… >

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

<meta name="viewport"
content="width=320, initial-
scale=2.3,user-scalable=no">

minimise server requests
(minify JavaScript, combine CSS, …)

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

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

www.opera.com/developer
patrick.lauke@opera.com

Weitere ähnliche Inhalte

Was ist angesagt?

Bar Camp Iphone Web Hackery

Andy Edmonds

Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010

Patrick Lauke

Mobile Web on Touch Event and YUI

Morgan Cheng

Firefox Mobile

Toni Hermoso Pulido

Ionic: The Web SDK for Develop Mobile Apps.

Matheus Cardoso

Remote debug in mobile browser

chengbo xu

Design Caffeine For Search and Browse UI IASummit2010

DesignCaffeine, Inc.

Now you see me... Adaptive Web Design and Development

Jonas Päckos

Rapid Testing, Rapid Development

mennovanslooten

E learningakept2014

Mazlan Salleh

Accessibility - A feature you can build

Monika Piotrowicz

Accessible web applications

Wojtek Zając

Introduction to iOS 9 (Xamarin Evolve 2016)

Craig Dunn

Responsive Web Design: buzzword or revolution?

Wojtek Zając

Building WebApp with HTML5

Tien Tran Le Duy

Responsive websites. Toolbox

Wojtek Zając

Tools that help and speed up RWD dev

Matjaž Korošec

Selenium Tutorial-Automate web application on ios safari browser using appium

Mukesh Otwani

jQuery Conference San Diego 2014 - Web Performance

dmethvin

Mobile JavaScript

Brian LeRoux

Was ist angesagt? (20)

Bar Camp Iphone Web Hackery

Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010

Mobile Web on Touch Event and YUI

Firefox Mobile

Ionic: The Web SDK for Develop Mobile Apps.

Remote debug in mobile browser

Design Caffeine For Search and Browse UI IASummit2010

Now you see me... Adaptive Web Design and Development

Rapid Testing, Rapid Development

E learningakept2014

Accessibility - A feature you can build

Accessible web applications

Introduction to iOS 9 (Xamarin Evolve 2016)

Responsive Web Design: buzzword or revolution?

Building WebApp with HTML5

Responsive websites. Toolbox

Tools that help and speed up RWD dev

Selenium Tutorial-Automate web application on ios safari browser using appium

jQuery Conference San Diego 2014 - Web Performance

Mobile JavaScript

Andere mochten auch

Mobile is evolving, the web is adapting, and these two colossal worlds are about to collide to create something new. In order to design the experiences of this new contextual web, we need to change the way look at design. In this talk Brian will provide his insights on some of the emerging trends in mobile design and share his thoughts on how we will design the interfaces of tomorrow. There is a lot more in my O'Reilly book: Mobile Design & Development (http://oreilly.com/catalog/9780596155445/)

What's Next: How Mobile is Changing Design

Brian Fling

Shopping in AR_presentazione

Marzia Testa

Twiggy - let's get our widget on!

Elliott Kember

conjonture économique en martinique au 5 Aout 2009

lafontaine

WMFR — BnF partnership

Sébastien Beyou

Shopping in AR

Marzia Testa

Shopping in AR_presentazione

Marzia Testa

Shopping in AR

Marzia Testa

From Click To Tap

Tim Van Damme

Augmented Reality Shopping

Federico Ruberti

Mobile Web Design - The Basics

Nick Whitmoyer

Andere mochten auch (11)

What's Next: How Mobile is Changing Design

Shopping in AR_presentazione

Twiggy - let's get our widget on!

conjonture économique en martinique au 5 Aout 2009

WMFR — BnF partnership

Shopping in AR

Shopping in AR_presentazione

Shopping in AR

From Click To Tap

Augmented Reality Shopping

Mobile Web Design - The Basics

Ähnlich wie Making your site mobile-friendly - Ignite Manchester 01.03.2010

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

rit2011

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

Patrick Lauke

Bruce lawson-over-the-air

brucelawson

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.

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

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.

Best Practices for Mobile Web Design

St. Petersburg College

Adaptive Layouts - standards>next London 28.05.2011

Patrick Lauke

Web app

조 용구

Transmission2 25.11.2009

Patrick Lauke

Web app

조 용구

Mobile Development Tips: Building Mobile Apps for Digital Libraries

jason clark

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

Patrick Lauke

DDive- Giuseppe Grasso - mobile su Lotus

Dominopoint - Italian Lotus User Group

This presentation, given by Steve Butzel at the 2012 Connecticut Library Association conference, covers trends in mobile website design and possibilities for libraries. Library apps are critically reviewed while simpler, less expensive mobile website techniques are favored. In addition, Steve discusses his Online Newsstand Project which improves access to library database content. Steve Butzel, Assistant Director of the Portsmouth Public Library, Portsmouth, NH

Mobile Website Design for Libraries

Steve Butzel

Mobilising Digital - Perth 13/03/14

Precedent

Ionic Framework: Let's build amazing apps. No Excuses!

Matheus Cardoso

Open source javascript libraries for mobile web applications in 2012

Data Fok

Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss

YOGESH TADWALKAR

Developing for Mobile Web

Barbara Bermes

Doran-C4L2010

Quickoffice Test

Iphone Presentation for MuMe09

Gonzalo Parra

Ähnlich wie Making your site mobile-friendly - Ignite Manchester 01.03.2010 (20)

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

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

Bruce lawson-over-the-air

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

Best Practices for Mobile Web Design

Adaptive Layouts - standards>next London 28.05.2011

Web app

Transmission2 25.11.2009

Web app

Mobile Development Tips: Building Mobile Apps for Digital Libraries

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

DDive- Giuseppe Grasso - mobile su Lotus

Mobile Website Design for Libraries

Mobilising Digital - Perth 13/03/14

Ionic Framework: Let's build amazing apps. No Excuses!

Open source javascript libraries for mobile web applications in 2012

Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss

Developing for Mobile Web

Doran-C4L2010

Iphone Presentation for MuMe09

Mehr von 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...

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

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

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

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...

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

Patrick Lauke

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

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

Patrick Lauke

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

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

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 / JavaScrip...

Patrick Lauke

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

Mehr von Patrick Lauke (20)