Making your site mobile-friendly - Ignite Manchester 01.03.2010

•

3 likes•723 views

The document discusses making websites mobile-friendly by either creating a separate mobile site with a different domain (like m.example.com) or using a single adaptive site with fluid layouts, viewport meta tags, and CSS media queries to dynamically adjust the layout for different screen sizes. It recommends minimizing requests through techniques like CSS sprites and combining files to optimize performance on mobile networks.

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

What's hot

Bar Camp Iphone Web Hackery

Andy Edmonds

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 Web on Touch Event and YUI

Morgan Cheng

This document discusses building mobile web applications for touch devices. It covers why touch interfaces are important on mobile, and how the web is a cross-platform solution. It describes the different touch event models across platforms like iOS, Android, and Firefox. Topics covered include touch events, gestures, and making applications touch friendly. The document recommends using libraries like YUI to simplify working with touch events and gestures across browsers. It emphasizes focusing on user intent, and making touch interfaces that are intuitive and friendly.

Firefox Mobile

Toni Hermoso Pulido

Ionic: The Web SDK for Develop Mobile Apps.

Matheus Cardoso

Remote debug in mobile browser

chengbo xu

This document discusses remote debugging in mobile browsers. It describes three debugging methods: Chrome device mode, USB connection, and remote method using a virtual/real device. The third method is preferred to avoid simulation contexts or USB connection problems. For iOS, the Safari Web Inspector can be used with the iOS Simulator. For Android, Chrome Inspector can be used with a Genymotion virtual device. Remote debugging can also be done using jsconsole.com or by running your own instance of the jsconsole tool.

Design Caffeine For Search and Browse UI IASummit2010

DesignCaffeine, Inc.

The document discusses ideas for improving search and browse user interfaces (UIs), called "Resourceful UIs", with a focus on providing helpful experiences even when search returns no results. It advocates starting from the user's perspective, being transparent when a search is not understood, and providing ways to refine searches. Integrating faceted filtering and breadcrumb trails is proposed to help users understand their location and smoothly move between searching and browsing.

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

Jonas Päckos

Progressive enhancement is still an important approach for building responsive websites and web applications. While JavaScript can now be assumed to be widely available, progressive enhancement avoids single points of failure and improves performance by loading critical content first before non-essential enhancements. The distinction between websites and applications is also blurred, so progressive techniques remain applicable to most digital experiences on the web.

Rapid Testing, Rapid Development

mennovanslooten

1) The document discusses rapid testing and development through minimizing the feedback loop via static HTML, automating interactions, mocking external dependencies, and automated UI testing. 2) It demonstrates tools like MockJSON and Mockjax for mocking requests and UITest for automated UI testing directly in the browser. 3) The key is to master your tools and editor to be a rockstar developer through optimizing the feedback loop for productivity and enjoyment.

E learningakept2014

Mazlan Salleh

Accessibility - A feature you can build

Monika Piotrowicz

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.

Introduction to iOS 9 (Xamarin Evolve 2016)

Craig Dunn

Responsive Web Design: buzzword or revolution?

Wojtek Zając

- Responsive web design (RWD) is the latest buzzword and may be the new revolution in web design as the mobile phone population grows significantly - 46% of the world's population has a mobile phone and over 1 billion smartphones are used worldwide, with 59% of owners using their smartphone daily - Websites need to be designed for all devices through responsive design which adapts the interface for different screen sizes rather than having a separate mobile site - The three main steps for responsive design are using media queries, adapting the interface, and optimizing responsive images and media for performance

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

Tools that help speed up responsive web development include HTML5 boilerplates to avoid duplicating code, frameworks like Bootstrap and Foundation that provide grid systems and styles, and tools for testing designs across screen sizes like browser plugins and emulators for simulating mobile devices. Common responsive design testing tools include browser plugins that allow resizing the viewport, online services that emulate different devices, and emulators for iOS, Android and other mobile platforms provided by their respective developers. Frameworks aid development through grid systems and prototyping, while testing tools help ensure responsive designs work well on varied screen sizes.

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

Mukesh Otwani

jQuery Conference San Diego 2014 - Web Performance

dmethvin

This document discusses jQuery and web performance. It describes how the jQuery Foundation maintains jQuery code and supports developers. It then discusses recent jQuery releases and how jQuery can be customized and used in different environments. The document outlines how the browser loads pages and the importance of prefetching resources. It recommends tools for analyzing page performance like YSlow, PageSpeed, and webpagetest.org. It provides tips for improving performance such as avoiding unnecessary layouts, optimizing JavaScript loops, and using developer tools to profile scripts and identify bottlenecks.

Mobile JavaScript

Brian LeRoux

The document discusses mobile JavaScript and constraints of mobile development. It summarizes that mobile web use will be via mobile devices in 5 years, mobile devices have small screens, less memory/CPU/storage, and sketchy connectivity. These constraints require a focus on solving unique problems rather than relying on components. It introduces the XUI mobile JavaScript framework as lightweight (2.4kb) and capable of DOM manipulation, events, styles, and other features to build mobile apps.

What's hot (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

Viewers also liked

What's Next: How Mobile is Changing Design

Brian Fling

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/)

Shopping in AR_presentazione

Marzia Testa

Twiggy - let's get our widget on!

Elliott Kember

The document discusses building mobile web applications. It covers topics like using valid HTML, CSS selectors in jQuery, hiding and showing elements, plugins, tips for mobile development. The presentation encourages using multiple platforms like websites, iPhone web apps, PhoneGap apps, Adobe AIR apps, and Opera widgets to build a complete mobile experience. It concludes by thanking the audience and providing contact details.

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

Viewers also liked (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

Similar to Making your site mobile-friendly - Ignite Manchester 01.03.2010

смартфоны и планшетники. веб разработка помимо десктопа. 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.

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.

Bruce lawson-over-the-air

brucelawson

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.

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.

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.

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.

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.

Mobile Development Tips: Building Mobile Apps for Digital Libraries

jason clark

This document provides tips for building mobile apps for digital libraries. It discusses native apps versus browser apps, and how to focus on core user actions and understand your audience when developing for mobile. It recommends learning from successful mobile designs, optimizing for speed and a touch interface, and following mobile design conventions. The document also provides resources for getting started in mobile development.

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.

DDive- Giuseppe Grasso - mobile su Lotus

Dominopoint - Italian Lotus User Group

This document discusses Lotus software on mobile devices and developing for mobile. It covers the history of Lotus mobile clients, including Lotus Traveler, Sametime and Connections. It also discusses using geolocation, forms and working offline in mobile development. Resources listed include the WURFL database for device detection, CSS media queries, and HTML5 features like geolocation, forms attributes and the cache manifest for offline work.

Mobile Website Design for Libraries

Steve Butzel

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

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

Mobile web development is important because over 6.8 billion people in the world use mobile devices. There are currently over 3.4 billion people with mobile phones, making mobile the 7th mass media. When developing for mobile, it is best to target WebKit-based browsers like those used on Android and iOS devices to ensure compatibility with newer HTML5 features. Websites should be optimized for mobile with a responsive design or separate mobile sites at m.domain.com to provide the best experience for touchscreen smartphones and limited feature phones.

Doran-C4L2010

Quickoffice Test

Iphone Presentation for MuMe09

Gonzalo Parra

This document discusses tools and frameworks for developing iPhone and iPod touch applications. It introduces the iPhone/iPod touch hardware features and describes different types of applications that can be created, including native, web, external platform, and jailbroken apps. It also outlines the steps to set up development environments on Windows and Mac systems. Finally, it provides examples of using the iUI framework to build simple web apps with iPhone interfaces.

Similar to 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

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)