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

Empfohlen

Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke

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

Making your site mobile-friendly - Standards-Next 12.06.2010Patrick Lauke

Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Patrick Lauke

Making your site mobile-friendly / RIT++Patrick Lauke

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

Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010rit2010

"Designing for the Mobile Web" by Michael Dick (December 2010)Mike Brenner

Empfohlen

Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke

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

Making your site mobile-friendly - Standards-Next 12.06.2010Patrick Lauke

Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Patrick Lauke

Making your site mobile-friendly / RIT++Patrick Lauke

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

Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010rit2010

"Designing for the Mobile Web" by Michael Dick (December 2010)Mike Brenner

Bar Camp Iphone Web HackeryAndy Edmonds

Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010Patrick Lauke

Mobile Web on Touch Event and YUIMorgan Cheng

Firefox MobileToni Hermoso Pulido

Ionic: The Web SDK for Develop Mobile Apps.Matheus Cardoso

Remote debug in mobile browserchengbo xu

Design Caffeine For Search and Browse UI IASummit2010DesignCaffeine, Inc.

Now you see me... Adaptive Web Design and DevelopmentJonas Päckos

Rapid Testing, Rapid Developmentmennovanslooten

E learningakept2014Mazlan Salleh

Accessibility - A feature you can buildMonika Piotrowicz

Accessible web applicationsWojtek Zając

Introduction to iOS 9 (Xamarin Evolve 2016)Craig Dunn

Responsive Web Design: buzzword or revolution?Wojtek Zając

Building WebApp with HTML5Tien Tran Le Duy

Responsive websites. ToolboxWojtek Zając

Tools that help and speed up RWD devMatjaž Korošec

Selenium Tutorial-Automate web application on ios safari browser using appiumMukesh Otwani

jQuery Conference San Diego 2014 - Web Performancedmethvin

Mobile JavaScriptBrian LeRoux

What's Next: How Mobile is Changing DesignBrian Fling

Shopping in AR_presentazioneMarzia Testa

Weitere ähnliche Inhalte

Was ist angesagt?

Bar Camp Iphone Web HackeryAndy Edmonds

Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010Patrick Lauke

Mobile Web on Touch Event and YUIMorgan Cheng

Firefox MobileToni Hermoso Pulido

Ionic: The Web SDK for Develop Mobile Apps.Matheus Cardoso

Remote debug in mobile browserchengbo xu

Design Caffeine For Search and Browse UI IASummit2010DesignCaffeine, Inc.

Now you see me... Adaptive Web Design and DevelopmentJonas Päckos

Rapid Testing, Rapid Developmentmennovanslooten

E learningakept2014Mazlan Salleh

Accessibility - A feature you can buildMonika Piotrowicz

Accessible web applicationsWojtek Zając

Introduction to iOS 9 (Xamarin Evolve 2016)Craig Dunn

Responsive Web Design: buzzword or revolution?Wojtek Zając

Building WebApp with HTML5Tien Tran Le Duy

Responsive websites. ToolboxWojtek Zając

Tools that help and speed up RWD devMatjaž Korošec

Selenium Tutorial-Automate web application on ios safari browser using appiumMukesh Otwani

jQuery Conference San Diego 2014 - Web Performancedmethvin

Mobile JavaScriptBrian 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

What's Next: How Mobile is Changing DesignBrian Fling

Shopping in AR_presentazioneMarzia Testa

Twiggy - let's get our widget on!Elliott Kember

conjonture économique en martinique au 5 Aout 2009lafontaine

WMFR — BnF partnershipSébastien Beyou

Shopping in ARMarzia Testa

Shopping in AR_presentazioneMarzia Testa

Shopping in ARMarzia Testa

From Click To TapTim Van Damme

Augmented Reality ShoppingFederico Ruberti

Mobile Web Design - The BasicsNick 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. зал 1rit2011

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

Bruce lawson-over-the-airbrucelawson

Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College

Best Practices for Mobile Web DesignSt. Petersburg College

Adaptive Layouts - standards>next London 28.05.2011Patrick Lauke

Web app조 용구

Transmission2 25.11.2009Patrick Lauke

Web app조 용구

Mobile Development Tips: Building Mobile Apps for Digital Librariesjason clark

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

DDive- Giuseppe Grasso - mobile su LotusDominopoint - Italian Lotus User Group

Mobile Website Design for LibrariesSteve Butzel

Mobilising Digital - Perth 13/03/14Precedent

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

Open source javascript libraries for mobile web applications in 2012Data Fok

Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissYOGESH TADWALKAR

Developing for Mobile WebBarbara Bermes

Doran-C4L2010Quickoffice Test

Iphone Presentation for MuMe09Gonzalo 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

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

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

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 / 2007Patrick 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

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

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

Mehr von Patrick Lauke (20)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Kürzlich hochgeladen

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot

CNIC Information System with Pakdata Cf In Pakistandanishmna97

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh

Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services

[BuildWithAI] Introduction to Gemini.pdfSandro Moreira

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93

Exploring Multimodal Embeddings with MilvusZilliz

Understanding the FAA Part 107 License ..Christopher Logan Kennedy

MINDCTI Revenue Release Quarter One 2024MIND CTI

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1

Elevate Developer Efficiency & build GenAI Application with Amazon QBhuvaneswari Subramani

Why Teams call analytics are critical to your entire businesspanagenda

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays

WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10

Kürzlich hochgeladen (20)

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER

CNIC Information System with Pakdata Cf In Pakistan

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model

Vector Search -An Introduction in Oracle Database 23ai.pptx

[BuildWithAI] Introduction to Gemini.pdf

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Exploring Multimodal Embeddings with Milvus

Understanding the FAA Part 107 License ..

MINDCTI Revenue Release Quarter One 2024

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Boost Fertility New Invention Ups Success Rates.pdf

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Why Teams call analytics are critical to your entire business

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...

WSO2's API Vision: Unifying Control, Empowering Developers

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

How to Troubleshoot Apps for the Modern Connected Worker

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Making your site mobile-friendly - Ignite Manchester 01.03.2010

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

2. we need a site that works on iPhone

3. ...works on iPhone... oh, and iPad

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

5. make your site work on all (most) mobile devices

6. 1. do nothing

7. mobile browsers will work ok-ish

8. “But the mobile context...”

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

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

11. offer users choice: diet or “full fat”?

12. 3. single adaptive site

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

14. CSS 2 Media Types (screen, print, handheld)

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

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

17. SVG (Scalable Vector Graphics)

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

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

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

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