SlideShare a Scribd company logo
Rethinking the Mobile Web
a pragmatic look at creating an accessible and inclusive mobile experience

http://www.flickr.com/photos/fpat/3692425154
we
a lovely, location-b
ased,
social, photo thing
y...

this presentation
is
not about these.

http://www.flickr.com/photos/scobleizer/3985020876

apps, and...
Dinosaurs!

we think the iPad is pretty awesome, but...

http://www.flickr.com/photos/goincase/4647893507
something is askew...

Recommended for you

English seven age
English seven ageEnglish seven age
English seven age

- The world is like a stage where humans play different roles throughout their lives from birth to death. - According to the poet, a human plays seven roles or stages in their life - as an infant, schoolboy, lover, soldier, justice, old man, and second childhood before death. - The stages depict the physical and mental changes a person undergoes from being fully dependent as an infant to losing abilities in old age before exiting the world.

maheen islammahak islamshipu
Velocitycrap 130110064100-phpapp01
Velocitycrap 130110064100-phpapp01Velocitycrap 130110064100-phpapp01
Velocitycrap 130110064100-phpapp01

The document discusses how the rise of content marketing poses threats and opportunities. It warns that an influx of lower-quality content from inexperienced creators could overwhelm audiences and reduce engagement. However, building a "great content brand" through high-quality, strategic content can attract audiences and talent. The key is focusing on creating useful, entertaining content in your area of expertise to develop trust and gain shares over time.

États et pratiques des relations avec les influenceurs - Les nouveaux défis d...
États et pratiques des relations avec les influenceurs - Les nouveaux défis d...États et pratiques des relations avec les influenceurs - Les nouveaux défis d...
États et pratiques des relations avec les influenceurs - Les nouveaux défis d...

La présentation PPT de ma conférence - éclair, lors du Webinaire International de l'OMRSP de l'Université Laval, le 5 avril dernier, dans le cadre de la Semaine du Numérique de la Ville de Québec.

social media influencer marketing
billion

1.8

the number of internet
connections in the world today...

26% of the world’s population at the beginning of 2010 – http://www.internetworldstats.com
billion

6.8

the number of people
in the world today...

*2009 estimates put the population around 6.79 billion inhabitants...
billion

3.4

the number of people
with mobile devices today...

or roughly 1/2 the population of the planet, which is...
it’s about people not devices...

Recommended for you

26 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp02
26 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp0226 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp02
26 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp02

The document provides 26 time management hacks and advice for improving productivity. Some of the key recommendations include only planning 4-5 hours of real work per day, starting with small tasks to get working, separating thinking from execution to work faster, setting deadlines, delegating tasks that can be 80% completed by others, taking notes, and taking breaks occasionally. The overall message is that focusing work in concentrated blocks, prioritizing the most important tasks, and establishing routines can help maximize productivity.

Dwolla Startup Pitch Deck
Dwolla Startup Pitch DeckDwolla Startup Pitch Deck
Dwolla Startup Pitch Deck

This 18-Slide Pitch Just Landed Payment Startup Dwolla $16.5 Million

pitch deckstartupdwolla
Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01

Mobile devices have seen tremendous growth over the past decade. What began as voice-only devices are now powerful computers that are highly personal, accessible through many operating systems and manufacturers, and support a vast array of applications and services. However, designing for mobile introduces unique constraints around limited screens, battery life, and varied contexts of use. The most popular uses of mobile today include social networking, games, photos, messaging and information searching, though there is opportunity for applications that enhance people's lives in meaningful ways by supporting tasks, learning, self-improvement and quality of life. Successful mobile design focuses on the user, iterates quickly, and views limitations as opportunities rather than barriers.

technologypeople and societymobile
so here’s the dilemma...

http://www.flickr.com/photos/soundman1024/1796003688
"The future is already here – it’s
just not evenly distributed."
– William Gibson

http://www.flickr.com/photos/kiwanja/3169447879
no home

Sony Ericsson

w810i

no iPhone

technology should not only be accessible...

http://www.flickr.com/photos/walkadog/3093763311
but inclusive...

iPhone

http://www.flickr.com/photos/javiercito/2319331695

Recommended for you

Its about people, not devices
Its about people, not devicesIts about people, not devices
Its about people, not devices

The document discusses the diversity of mobile devices globally and how this diversity is likely to persist. It notes that while some designers may choose to only design for the newest, most powerful platforms, an inclusive approach is needed to provide accessibility while still ensuring a great user experience across a wide range of contexts, inputs, and users. Context, attention, and usability have changed as mobile devices have become more capable and integrated into more aspects of our lives.

yiibu
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...

This document discusses the diversity of mobile devices and user experiences globally. It notes that while smartphones have gained popularity in some markets, global smartphone penetration remains only around 23% and the mobile experience varies greatly depending on location, device capabilities, and network infrastructure. This diversity is likely to continue as new platforms and low-cost devices disrupt the market.

ux londongesturesios
Mobile: the next frontier
Mobile: the next frontierMobile: the next frontier
Mobile: the next frontier

The document discusses the rise of mobile devices and their potential for museums. It notes that over half the global population now owns a mobile phone and smartphones are increasingly popular. The document outlines several options for museums to engage mobile audiences, including adapting existing websites, developing separate mobile sites or apps, or creating mobile web apps. It argues that mobile offers opportunities to provide contextual, ubiquitous experiences and engage visitors both on-site and off-site.

museumstechnologyux
and available to everyone...

iPhone

http://www.flickr.com/photos/pictfactory/2796367140
yes, even this man who
does not have an iPhone...

not an iPhone...

http://www.flickr.com/photos/dopesmuglar/486087009
so, who actually has an iPhone...

http://www.flickr.com/photos/data_op/2468057934
USA

Recommended for you

Telecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open MobileTelecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open Mobile

Ajit Jaokar discusses the concept of open mobile and how forces are driving the industry in that direction. Open mobile refers to devices that are not tied to a single network and allow complete customization. The internet, user-generated content, and social networking are pushing for more open standards and interconnectivity. While different platforms and app stores currently exist, the open nature of the web will ultimately dominate as it allows for a common programming environment and global reach.

opengardensopenmobilemomo
Mobile Web Eahil2008
Mobile Web Eahil2008Mobile Web Eahil2008
Mobile Web Eahil2008

This document discusses the rise of mobile internet access globally, particularly in Africa and Asia. It notes that mobile phone subscriptions now exceed internet users in many parts of the world. The document then outlines some of the key differences between mobile and traditional web access, including varying screen sizes and mobile-optimized browsers. It argues that libraries risk losing users to search engines like Google if they do not adapt their online content and services for mobile devices.

mobile web
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissSingapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss

The document discusses trends in mobile 2.0 and handset user experience from 2009-2010. It covers the rise of social networking features on mobile devices, improving usability through iterative design testing, and examples of early mobile social networking applications. It also provides tips for localizing content and examples of issues with early touchscreen and camera technologies.

mobileuiux
about 6% US market share...
enormous
impact

US Population: 307 million
Smartphone penetration: 31% of pop.
iPhone market share: 21% of smp.
Total iPhones in US: 19 million (~6%)

low overall
penetration

The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact
http://moconews.net/article/419-deep-discounts-on-smartphones-drive-u.s.-adoption-rates-to-nearly-a-thi/ and http://www.npd.com/press/releases/press_100510.html
EU5
only 4% EU5* market share...
enormous
impact

EU5* = France, Germany, Italy, Spain and United Kingdom

low overall
penetration

The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact
http://www.comscore.com/layout/set/popup/layout/set/popup/Press_Events/Press_Releases/2010/6/The_iPhone_Reality_in_Europe_Low_Overall_Penetration_Enormous_Impact
<4% global market share*
enormous
impact

low overall
penetration

*I suspect it’s actually much less, but finding accurate global figures is a tad difficult...

Recommended for you

Web 3.0
Web 3.0Web 3.0
Web 3.0

Web 3.0 is the next evolution of the World Wide Web that aims to make it smarter and more personalized. It will treat the entire web as a giant database that can be queried to provide tailored answers and recommendations to users. For example, a user could ask "What are my options for an action movie and Chinese food?" and Web 3.0 would analyze their question, search the internet, and present optimized results. It is expected that mobile technology will be integral to Web 3.0's development given growing mobile internet usage worldwide. Web 3.0 could enable more advanced mobile applications for tourism, banking, and marketing.

social technologymymobilemylifemobile
10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile web10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile web

The document discusses 10 reasons why now is the perfect time to get serious about the mobile web. It summarizes that mobile devices are becoming more powerful and ubiquitous, social networking and location-based apps are driving mobile internet usage. It also notes that businesses are recognizing the opportunities in mobile applications and services to take advantage of new technologies enabled by smartphones.

marketingmobile marketing
Chrome for android_devfestx
Chrome for android_devfestxChrome for android_devfestx
Chrome for android_devfestx

A strategic overview of developing for Chrome on Android and native on Android. Touching on the migration from the open web to walled gardens of applications.

product strategynative vs webmobile strategy
ie: BMW

The ”most popular” devices don’t necessarily
translate to the most used devices.
ie: Ford
”

yeah, but those
devices suck!

http://www.flickr.com/photos/eldret_99/3311540398
ahem...
the first smartphone in 2003...
considered
portable in 1984

fits in your pocket

still widely used...

Released: 1984
CPU: 8 MHz
RAM: 128k (512k max)
Storage: 400k (3.5” floppy)
Display: 22.9 cm Monochrome
Dimensions: 34.5 x 24.4 x 27.7 cm
Weight: 7.5 kgs

Released: 2003
CPU: 104 MHz
RAM: 6 MB
Storage: 32 MB MMC Card
Display: 5.3 cm Thousands of colours
Dimensions: 10.9 x 5.8 x 2.4 cm
Weight: 122 g

Recommended for you

Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...

It took 16 years for smartphone penetration to reach 1 billion people. Analysts believe it will take only 3 years to reach the next billion. The devices these consumers buy will be incredibly diverse, yet many will run on Android; a platform that now sees more than 1.5 million activations per day. In this presentation, we explore the fascinating rise of Android around the globe. From dual SIM phones in Indonesia, to dual screen e-ink devices in Russia and crowd-sourced platform modifications in China, we will discover the role open source has played in Android's popularity and how to design for such a diverse environment.

appsresponsive designmediatek
Digital Winners 2013: Brendan eich updated
Digital Winners 2013: Brendan eich updatedDigital Winners 2013: Brendan eich updated
Digital Winners 2013: Brendan eich updated

Digital Winners 7-8 November: Firefox OS: The Web as an Open Platform for Innovation and Consumer Choice, Brendan Eich, CTO and SVP Engineering Mozilla

Mobile web and j query mobile
Mobile web and j query mobileMobile web and j query mobile
Mobile web and j query mobile

This document discusses the history and state of the mobile web. It covers how Tim Berners-Lee and others helped develop early internet technologies. It provides statistics on internet and mobile device usage. It also discusses best practices for designing mobile websites, including using media queries and the jQuery Mobile framework. jQuery Mobile allows for progressive enhancement, graceful degradation, and accessibility across multiple devices.

html3media querycss3
the music phone in 2008...
again, it was ‘portable’...?
...this runs Flash

not a feature phone,
nor a smartphone...

Released: 1998
CPU: 233 MHz
RAM: 32 MB (512 MB max)
Storage: 4 GB (+ optical drive)
Display: 38.1 cm Millions of colours
Dimensions: 40.1 x 38.6 x 44.7 cm
Weight: 17.3 kgs

Released: 2008
CPU: 434 MHz
RAM: 128 MB
Storage: 8 GB (16 GB max)
Display: 8.1 cm Millions of colours
Dimensions: 11.1 x 5.2 x 1.5 cm
Weight: 109 g
the feature phone in 2009...
smartphone from 2005

extremely
popular today...

still widely
used today...

Released: 2005
CPU: 220 MHz
RAM: 22 MB
Storage: 64 MB
Display: 5.3 cm Thousands of colours
Dimensions: 10.8 x 5.3 x 2.2 cm
Weight: 126 g

Released: 2009
CPU: 369 MHz
RAM: 30 MB
Storage: 1 GB (16 GB max)
Display: 5.1 cm Thousands of colours
Dimensions: 10.6 x 4.7 x 1.5 cm
Weight: 88 g
the smartphone in 2010...
...playing “catch-up”

Released: 2010
CPU: 680 MHz
RAM: 256 MB
Storage: 16 GB (32 GB max)
Display: 8.9 cm Millions of colours
Dimensions: 11.4 x 5.9 x 1.3 cm
Weight: 135 g

raising the “bar”...

Released: 2010
CPU: 1 GHz A4 Processor
RAM: 512 MB
Storage: 16 GB (32 GB max)
Display: 8.9 cm Millions of colours
Dimensions: 11.5 x 5.9 x 0.9 cm
Weight: 137 g
”

...but folks with those other phones
simply don’t use the Internet.

http://www.flickr.com/photos/carbonnyc/3369424492

Recommended for you

New Technology 2017 L01 introduction
New Technology 2017 L01 introductionNew Technology 2017 L01 introduction
New Technology 2017 L01 introduction

History has many examples of powerful companies that seem to be unbeatable. Then in a short time they become irrelevant due to new companies with new ideas. One of the factors in such transformation is technology. Never in history has technological change been so important in building and destroying companies. We look at few examples of successful companies that fail to address the changing times and become disrupted. We also look at why technology emerges when it does and why some ideas can only be realised when certain conditions are met. In this first lecture we set the tone for the course and define the themes that we will be looking at.

reykjavik universitynew technology
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009

The document discusses the challenges of developing for the mobile web. It analyzes different mobile browsers and their inconsistencies. It presents a case study of a website called Liever.com and evaluates developing a native mobile app versus a mobile web approach. The document argues that W3C Widgets, which allow creating local web applications, are a promising solution for the mobile web. However, it notes that widgets still face issues with animations, accessing device functionality, and security.

browsersw3c widgetshtml
Mobile Revolution and Assessment - ATP 2011
Mobile Revolution and Assessment - ATP 2011Mobile Revolution and Assessment - ATP 2011
Mobile Revolution and Assessment - ATP 2011

The document discusses the rise of mobile technology and its impact on various industries. It notes that mobile internet adoption grew much faster than previous technologies, with over 10 billion mobile devices sold in the first 10 years. Mobile is changing how people consume media through video streaming, time-shifting content, and content aggregation apps. Industries like education and testing are exploring opportunities in mobile learning, test preparation, and low-stakes assessments. Communication trends show social networking and mobile messaging on the rise.

testprepportfoliosummative
”

yeah, and grandma
doesn’t do Facebook...

Grandma*

Facebook

http://www.flickr.com/photos/amagill/304701054

*not my Grandma
billion

1.3

the number of mobile internet
users today...

...includes WAP and ‘real web’ via Tomi Ahonen Consulting
1/3

number of global internet
users who access the internet
only via mobile...

...includes WAP and ‘real web’ via Tomi Ahonen Consulting
21%

the projected worldwide
3G penetration in 2010...

via Morgan Stanley

Recommended for you

Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile web

This document discusses creating an accessible and inclusive mobile experience. It begins by noting that while some devices like the iPhone are popular, they only represent a small portion of the overall mobile device market and user population. It then examines the need to make the mobile web accessible to all users, not just those with certain devices, and provides examples of how usage and capabilities vary greatly across the global mobile landscape. The document advocates for an adaptive approach that considers all mobile contexts rather than targeting specific devices or browsers.

mobileweb design and development
Nuno Sitima - State of the mobile web
Nuno Sitima - State of the mobile webNuno Sitima - State of the mobile web
Nuno Sitima - State of the mobile web

The document discusses the growth of mobile web browsing and Opera Mini. It notes that in July 2009, Opera Mini users viewed over 12 billion pages, up 15.4% from the previous month. Emerging markets like Russia and Indonesia have seen especially strong growth, driven by increasing social networking on mobile devices. Examples from Russia show people using the mobile web for transportation updates, news, and social media. The mobile web enables access to information without needing a PC. The document suggests India, Nigeria, South Africa and other countries may see similar growth patterns.

mobilemondayamsterdammomoams
Att förstå mobilens natur
Att förstå mobilens naturAtt förstå mobilens natur
Att förstå mobilens natur

1) Mobile devices are always with us and reinvent interaction models through built-in hardware features and personalization. 2) Context is very important for mobile experiences and the best device depends on one's current task and situation. 3) To be successful on mobile, experiences must be simple, context-aware, and leverage the user's existing digital ecosystem and the device's sensors and capabilities.

fredrik hrnstenmartin deinoffcreuna
so, what are they using...
mobile browser market share
via http://gs.statcounter.com - 02/2010

other?

things have changed

skeptical

UC ate Nokia’s share...
other?
other?

note OperaMini...
quality + sample size?
Data Source: http://gs.statcounter.com
Published Under a Creative Commons Attribution 3.0 Unported License
You are free to copy, distribute and transmit the work and to adapt the work providing it is attributed to www.icrossing.co.uk
http://www.flickr.com/photos/icrossing_uk/4342659861

Blackberry!
something happened in February...

UC browser...

Nokia browser...

Top 9 Mobile Browsers in China from Sep 09 to Aug 10 | StatCounter Global Stats
http://gs.statcounter.com/#mobile_browser-CN-monthly-200909-201008
moving forward...
used in iOS, Android, Palm WebOS, Nokia Qt,
Bada, Symbian and new Blackberry...

primarily used on feature
phones supporting Java ME...

+
WebKit

OperaMini

watch these...

Windows Mobile

proxy browser...

lots of new browsers, variation and of course – legacy browsers

Obigo

“Fennec”

Internet Explorer

Browser
UC
proxy browsers
MicroB

SkyFire

Internet Browser

Recommended for you

Mobile Marketing 2.0
Mobile Marketing 2.0Mobile Marketing 2.0
Mobile Marketing 2.0

The document discusses trends in mobile marketing from 2008-2011, including the growth of mobile users and revenues from mobile data and advertising. It notes that mobile offers opportunities for personalized, location-based marketing close to the point of purchase or creation. Effective mobile marketing harnesses collective intelligence, enables social sharing of content, and provides a positive customer experience through easy-to-use and responsive applications.

appsapplisgames
Master TikTok Influence.................
Master TikTok Influence.................Master TikTok Influence.................
Master TikTok Influence.................

Gain the upper hand on TikTok with Sociocosmos. Boost your followers and engagement instantly. https://www.sociocosmos.com/product-category/tiktok/

buy tiktok viewsbuy tiktok followersbuy tiktok likes
Monetizing Social Media- How Influencers and Brands Make Money Online
Monetizing Social Media- How Influencers and Brands Make Money OnlineMonetizing Social Media- How Influencers and Brands Make Money Online
Monetizing Social Media- How Influencers and Brands Make Money Online

Monetizing social media involves influencers and brands leveraging their online presence to generate income. Influencers, who amass large followings on platforms like Instagram, YouTube, and TikTok, make money through sponsored posts, brand partnerships, affiliate marketing, and selling their own products or services. Brands collaborate with influencers to reach targeted audiences, increasing their visibility and credibility. Additionally, both influencers and brands use ad revenue from platforms, subscription services, and exclusive content offerings to boost their earnings. This dynamic ecosystem allows for diverse revenue streams, making social media a lucrative avenue for digital entrepreneurship.

#socialmediamonetization#influencermarketing#onlineincome
the importance of WebKit...

open source

licensed under the GNU Library General Public License

excellent standards support
including HTML, CSS3, SVG, etc.

innovations often contributed back

example: HTML5, CSS animations, SquirrelFish, etc.

adopted by many leading companies

WebKit

including Apple, Nokia, Samsung, Google, Palm, etc.

used in many mobile operating systems
including iOS, Android, webOS, Bada, Symbian, etc.

btw - “There is no WebKit on Mobile” by @ppk
http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
the importance of OperaMini...

free

costs consumers absolutely nothing

a full-web experience

supports Ajax, zooming, tabbed browsing, etc

excellent standards support

based on the same code-base as the Opera browser

available just about anywhere

on JavaME, iPhone, Android, Windows Mobile + more

an extremely efficient browser

a proxy server filters, compresses & pre-renders content

usable on older devices

breathe new life into those antique devices...

very important

OperaMini
proxy browser

rendered + optimised
on proxy server...

and proxy browsers...

free + unlimited
bandwidth
OBML*
limited + costly
bandwidth

HTML
proxy server

bbc.co.uk

*OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.
on private networks...
caller
a
d

limited + costly
bandwidth
switching
centre
c

receiver
b

base-station
to the Internet...

transcoding, bandwidth limitations, service blocking and no packet neutrality

Recommended for you

Get More Shares on Quora................
Get More Shares on Quora................Get More Shares on Quora................
Get More Shares on Quora................

Get your Quora answers shared more often with our proven strategies. Expand your reach and influence. https://www.sociocosmos.com/product-category/quora/quora-shares/

buy quora followersbuy quora upvotesbuy quora likes
Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...
Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...
Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...

Tired of slow social media growth? Sociocosmos offers targeted followers, likes, views & more to explode your presence across 17+ platforms and get real engagement. https://www.sociocosmos.com/

buy youtube subscribersbuy instagram followersbuy pinterest board followers
Digital Marketing Mastery: Strategies for Success in the Digital Age
Digital Marketing Mastery: Strategies for Success in the Digital AgeDigital Marketing Mastery: Strategies for Success in the Digital Age
Digital Marketing Mastery: Strategies for Success in the Digital Age

In today's fast-paced digital landscape, mastering the art of digital marketing is essential for businesses looking to thrive and grow. This comprehensive guide delves into the core strategies and techniques that drive successful digital marketing campaigns. From understanding the nuances of SEO and the power of social media to leveraging the precision of Google Ads and the creativity of content marketing, this PDF covers it all. Whether you're a seasoned marketer or new to the field, you'll find actionable insights and practical tips to enhance your digital marketing efforts and achieve your business goals. Feel free to adjust or expand on this based on the specific content and focus of your PDF. If you provide more details or specific sections, I can help tailor it even further.

social mediamarketing digitaldigital marketing
also availabl

e for Android

...

OperaMini is great for browsing
the web on iPhone when your
connection stinks. Which is
unfortunately is fairly often in my
case. – @jonathanstark

http://www.flickr.com/photos/johanl/4424185115

”
app

yeah, whatever–I just wanna build a mobile website...
traditionally you might consider...

a device database
ie. DeviceAtlas
or WURFL
device detection
content adaptation
an abstraction layer
media types

WURFL/WALL
transcoding

exhausting
testing

device
capabilities

various standards

multiple templates private networks

geing “on-deck”
data limits
multiple sites
an off-deck strategy...
cHTML
thematic
the “One Web” dream
consistency
correct doctypes
fragmentation
switching algorithms
using UAProf data
WML
XHTML-MP
mimetypes

http://www.flickr.com/photos/rmlowe/3281353786

WAP
but that might be a bit overwhelming...

”

OMG...

http://www.flickr.com/photos/richardmoross/1413692087

Recommended for you

Amul Dairy Products - Latest Price, Dealers & Retailers in ...
Amul Dairy Products - Latest Price, Dealers & Retailers in ...Amul Dairy Products - Latest Price, Dealers & Retailers in ...
Amul Dairy Products - Latest Price, Dealers & Retailers in ...

Amul Dairy Products - Latest Price, Dealers & Retailers in ...

Achieve Reddit Stardom..................
Achieve Reddit Stardom..................Achieve Reddit Stardom..................
Achieve Reddit Stardom..................

Enhance your Reddit posts with our premium upvote and comment services https://www.sociocosmos.com/product-category/reddit/reddit-followers/

Best Digital Marketing Agency in Malappuram
Best Digital Marketing Agency in MalappuramBest Digital Marketing Agency in Malappuram
Best Digital Marketing Agency in Malappuram

Best Digital Marketing Agency in Malappuram Gridque specialize in grow your business online presence through innovative and successful digital marketing strategies. Best Digital Marketing Agency in Malappuram Gridque always help you achieve your goals.

social mediasocial media marketing
start somewhere familiar...

http://www.flickr.com/photos/adactio/4742158560
...a look at what we’re doing now?*

*for illustration purposes only
we could
do nothing...

http://www.alistapart.com/
but that’s not terribly mobile friendly – what about...

Recommended for you

Supercharge Pins........................
Supercharge Pins........................Supercharge Pins........................
Supercharge Pins........................

Give your pins the boost they need with real likes, comments, and shares. https://www.sociocosmos.com/product-category/pinterest/pinterest-account-followers/

pinterestbuy pinterest board followersbuy pinterest reaction
What Are The Dos & Don'ts When Responding To Negative Reviews On Google
What Are The Dos & Don'ts When Responding To Negative Reviews On GoogleWhat Are The Dos & Don'ts When Responding To Negative Reviews On Google
What Are The Dos & Don'ts When Responding To Negative Reviews On Google

Learn to navigate negative Google reviews effectively to maintain business reputation. Reviews influence decisions and visibility, so respond promptly, acknowledge feedback, offer solutions, and maintain professionalism. Avoid ignoring reviews, defensiveness, generic responses, and arguments. Monitor reviews, train staff, seek feedback, and highlight improvements to enhance customer trust and business success.

googl reviewgoogle negative reviewsocial media
一比一原版詹姆斯库克大学毕业证如何办理
一比一原版詹姆斯库克大学毕业证如何办理一比一原版詹姆斯库克大学毕业证如何办理
一比一原版詹姆斯库克大学毕业证如何办理

原版一模一样【微信:741003700 】【詹姆斯库克大学毕业证成绩单】【微信:741003700 】学位证,留信学历认证(真实可查,永久存档)原件一模一样纸张工艺/offer、在读证明、外壳等材料/诚信可靠,可直接看成品样本,帮您解决无法毕业带来的各种难题!外壳,原版制作,诚信可靠,可直接看成品样本。行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备。十五年致力于帮助留学生解决难题,包您满意。 本公司拥有海外各大学样板无数,能完美还原。 1:1完美还原海外各大学毕业材料上的工艺:水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。材料咨询办理、认证咨询办理请加学历顾问Q/微741003700 【主营项目】 一.毕业证【q微741003700】成绩单、使馆认证、教育部认证、雅思托福成绩单、学生卡等! 二.真实使馆公证(即留学回国人员证明,不成功不收费) 三.真实教育部学历学位认证(教育部存档!教育部留服网站永久可查) 四.办理各国各大学文凭(一对一专业服务,可全程监控跟踪进度) 如果您处于以下几种情况: ◇在校期间,因各种原因未��顺利毕业……拿不到官方毕业证【q/微741003700】 ◇面对父母的压力,希望尽快拿到; ◇不清楚认证流程以及材料该如何准备; ◇回国时间很长,忘记办理; ◇回国马上就要找工作,办给用人单位看; ◇企事业单位必须要求办理的 ◇需要报考公务员、购买免税车、落转户口 ◇申请留学生创业基金 留信网认证的作用: 1:该专业认证可证明留学生真实身份 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 办理詹姆斯库克大学毕业证【微信:741003700 】外观非常简单,由纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理詹姆斯库克大学毕业证【微信:741003700 】格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理詹姆斯库克大学毕业证【微信:741003700 】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理詹姆斯库克大学毕业证【微信:741003700 】是证明身份和学���的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

詹姆斯库克大学毕业证
a mobile
specific site...

http://mobify.me

http://m.alistapart.com/
oh, but then that just begs the question...
other...

TVs

laptops/netbooks

handheld consoles

what exactly is mobile...

http://www.flickr.com/photos/amagill/26273015
or, more specifically...

Recommended for you

SUZUKI_GS125R_Strategic_Marketing_Manage.pdf
SUZUKI_GS125R_Strategic_Marketing_Manage.pdfSUZUKI_GS125R_Strategic_Marketing_Manage.pdf
SUZUKI_GS125R_Strategic_Marketing_Manage.pdf

Project report

Reading 03 Social Structure & Ethnicity.docx
Reading 03 Social Structure & Ethnicity.docxReading 03 Social Structure & Ethnicity.docx
Reading 03 Social Structure & Ethnicity.docx

social

一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理

原版一模一样【微信:741003700 】【南昆士兰大学毕业证成绩单】【微信:741003700 】学位证,留信学历认证(真实可查,永久存档)原件一模一样纸张工艺/offer、在读证明、外壳等材料/诚信可靠,可直接看成品样本,帮您解决无法毕业带来的各种难题!外壳,原版制作,诚信可靠,可直接看成品样本。行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备。十五年致力于帮助留学生解决难题,包您满意。 本公司拥有海外各大学样板无数,能完美还原。 1:1完美还原海外各大学毕业材料上的工艺:水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。材料咨询办理、认证咨询办理请加学历顾问Q/微741003700 【主营项目】 一.毕业证【q微741003700】成绩单、使馆认证、教育部认证、雅思托福成绩单、学生卡等! 二.真实使馆公证(即留学回国人员证明,不成功不收费) 三.真实教育部学历学位认证(教育部存档!教育部留服网站永久可查) 四.办理各国各大学文凭(一对一专业服务,可全程监控跟踪进度) 如果您处于以下几种情况: ◇在校期间,因各种原因未能顺利毕业……拿不到官方毕业证【q/微741003700】 ◇面对父母的压力,希望尽快拿到; ◇不清楚认证流程以及材料该如何准备; ◇回国时间很长,忘记办理; ◇回国马上就要找工作,办给用人单位看; ◇企事业单位必须要求办理的 ◇需要报考公务员、购买免税车、落转户口 ◇申请留学生创业基金 留信网认证的作用: 1:该专业认证可证明留学生真实身份 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 办理南昆士兰大学毕业证【微信:741003700 】外观非常简单,由纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理南昆士兰大学毕业证【微信:741003700 】格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理南昆士兰大学毕业证【微信:741003700 】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理南昆士兰大学毕业证【微信:741003700 】是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

南昆士兰大学毕业证
128x160

240x320
320x480

1280x768
1024x768

480x800

what isn’t...
then again, we could...
create an adaptive experience...

http://www.flickr.com/photos/rohit_saxena/4873732679
an example
http://colly.com*

*for illustration purposes only, I’m not criticising the talented Mr. Collison or his fine work...

Recommended for you

Grow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdf
Grow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdfGrow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdf
Grow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdf

Struggling with social media marketing? Socio Cosmos offers easy-to-use tools to boost your presence. Get more followers, likes, and engagement - without the technical jargon. Start growing today! https://www.sociocosmos.com/

buy social media presencehow to buy social media likesbuy social media likes
Online Notepad Bondi Junction Westfield brings back bad memories.pdf
Online Notepad Bondi Junction Westfield brings back bad memories.pdfOnline Notepad Bondi Junction Westfield brings back bad memories.pdf
Online Notepad Bondi Junction Westfield brings back bad memories.pdf

Bringing back bad memories that is never forgotten.

media
2024 Brexton Busch Car T-shirt Sweepstakes Rules
2024 Brexton Busch Car T-shirt Sweepstakes Rules2024 Brexton Busch Car T-shirt Sweepstakes Rules
2024 Brexton Busch Car T-shirt Sweepstakes Rules

Official rules for Brexton Busch car tee sweepstakes.

http://colly.com
MOBILE SITE OF THE YEAR
NOMINEE

http://www.thenetawards.com/
a lovely website

http://colly.com/
squishy

squishy

with flexible layout
http://colly.com/
also available on mobile...

squishy

http://colly.com/

squishy

Recommended for you

Get Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdf
Get Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdfGet Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdf
Get Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdf

Want to stand out on Instagram? Sociocosmos helps you gain genuine followers, skyrocket engagement, and dominate your niche. Organic growth. Real results. Get started now! https://www.sociocosmos.com/product-category/instagram/

buy instagram followersbuy instagram likesbuy instagram views
Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...
Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...
Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...

Struggling to get noticed on Twitter? Sociocosmos can help! Buy real Twitter followers, likes, and retweets to boost your account and go viral. It's safe, secure (they don't need your password!), and can give your profile the jumpstart it needs. Get started today! https://www.sociocosmos.com/product-category/twitter/

buy twitter followersbuy twitter viewsbuy twitter comments
Buy YouTube Subscribers: Safe & Secure..
Buy YouTube Subscribers: Safe & Secure..Buy YouTube Subscribers: Safe & Secure..
Buy YouTube Subscribers: Safe & Secure..

Buy YouTube subscribers for instant growth with Sociocosmos. Safe, secure, and effective. https://www.sociocosmos.com/product-category/youtube/yt-short-views/

youtubebuy youtube subscribersbuy youtube views
al
an optimce
experien

squishy

squishy

brought to you through the magic of @media queries...
http://colly.com/

tada!
ahem...

http://www.flickr.com/photos/jakerome/3481634789
these are also mobile...
WebKit

approximations based on actual device testing - font rendering will vary...
http://colly.com/

WebKit
as are these...
the iPhone is #1 device for OperaMini

*OperaMini is often preferred by many users as it optimises content prior to download, which reduces data costs.
http://colly.com/

Recommended for you

and these...
77mm

47mm

Mozilla

insanely tiny!

expect many more tablet
devices on the market soon...
http://colly.com/
traditionally used
for the fine print...

which now require this...
http://www.flickr.com/photos/chrisbrenschmidt/1832787028
viewport is much smaller
than the actual content

and this...
http://www.flickr.com/photos/katerha/4592429363
keyhole browsing

for this experience
http://colly.com/

Recommended for you

...would you be
happy with this?

hmm...
http://colly.com/
once again

why are we writing for only one browser...
2000

2010

...is WebKit the new Internet Explorer?
”

“This site works best in Safari 4”
is ok where “This site works best in
IE4” wasn’t?!? Open standards or
double standards? – @csssquirrel
via @brucel

http://www.flickr.com/photos/pjanvandaele/3990379048
”

If you want to use the web on a
mobile device, is the purchase of
an iPhone the cost of entry?
or Android device
this design can work on
*many* more devices...

let alone only one device?

Recommended for you

as per my highly sophisticated
mobile web triage process... ;)

Good
Could be improved
Needs to be improved

let’s make it more accessible...
http://colly.com/
3 one style sheet w/@media queries
4

jQuery used only for animation...

5 same images used for

all screen devices...

only a few issues...
2
4

well structured,
meaningful markup

Javascript animations tend to work
poorly on the majority of mobile devices...

Good
Could be improved
Needs to be improved
a few guidelines...
2. use well structured, meaningful markup

for those still paying attention, yes there is a #1 and we will get to it shortly...

Recommended for you

2

well structured, meaningful markup...

mmm... meaning!
structure

there’s lots more, but who
wants to stare at code...
http://colly.com/

view source
2

well structured, meaningful markup...
use <header>, <h1>, <p> and other semantically meaningful tags to provide basic structure

*Note: this is not from hp://colly.com
recreating
existing <tags>
is not cool

<div class="body">
<div class="header">
<div class= "h1">
<span>Hello World!</span>
</div>
<div> soup...
</div>
<div class="body">HTML
<span class="emphasis">can actually be</span>meaningful.
</div>
</div>

soup is best served in a bowl...
without a basic, meaningful structure you will need to re-create many existing properties
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...
3

all-in-one stylesheet with @media queries...

a single css file is network efficient, but often includes
unnecessary style data for mobile devices...

<link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
....towards the end of ‘screen.css’ we find the @media queries

mobile specific tweaks are added at the very
end, and only through @media queries...

@media (max-device-width:480px) and (orientation:portrait) { ...

Recommended for you

how retro...

kinda backwards...

http://www.flickr.com/photos/dumbledad/3400708183
rocket science
a desktop browser...

are we expecting too much...
http://www.flickr.com/photos/nasa_goddard/4678389619/
rocket science

a mobile browser...

http://www.flickr.com/photos/wwworks/3749061604

...from our mobile browsers?
which brings us to...

Recommended for you

1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...

aha, I told you we’d eventually get to #1!
Luke Wroblewski

mobile first
http://www.lukew.com/ff/entry.asp?933

http://www.flickr.com/photos/pete-karl/4637024524
traditional thinking goes like so...
is technically served to everyone...

a full desktop site

Recommended for you

sprinkle on a few @media queries...

+ @media queries

a full desktop site
...if the @media query resolves
to true, tada - a mobile site!

= mobile site

+ @media queries

a full desktop site
but here’s the problem...
FAIL

= mobile site

+ @media queries

a full desktop site
http://www.flickr.com/photos/hendry/3053419265

Recommended for you

= mobile site

a full desktop site
http://www.flickr.com/photos/hendry/3053419265
@media queries will resolve to false on most devices...

no, really – you simply cannot rely on them currently on mobile devices
resulting in this experience...

http://colly.com/
so it’s far more effective when we start with...

Recommended for you

is technically served
to everyone...

a mobile site
for browsers that support
them, other browsers will
just ignore them...

+ @media queries
a mobile site
tada – a desktop site! ;)

= full desktop site
+ @media queries
a mobile site
which is really just...

Recommended for you

and not a new idea at all...

progressive enhancement

= full desktop site
Jeremy Keith

+ media queries
a mobile site
http://www.flickr.com/photos/clagnut/315554083
think mobile first
but let’s get back to...
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...

Recommended for you

3

all-in-one stylesheet with @media queries...

a single css file is network efficient, but often includes
unnecessary style data for mobile devices...

<link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
....towards the end of ‘screen.css’ we find the @media queries

mobile specific tweaks are added at the very
end, and only through @media queries...

@media (max-device-width:480px) and (orientation:portrait) { ...
3

default stylesheet plus @media queries...

place mobile related styles into a default stylesheet...

<link href="default.css" type="text/css" rel="stylesheet" media="screen" />
<link href="desktop.css" type="text/css" rel="stylesheet" media="screen
and (min-device-width:1024px) and (max-width:989px)" />
link additional style sheets using @media queries
to progressively enhance the content for more
capable browsers

some mobile browsers look for it...
*you may want to use both the ‘screen’ and ‘handheld’ media types for your default stylesheet
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...

4. progressively enhance using JavaScript
and @media queries
4

jQuery/JavaScript used only for animation...

jQuery is still a rather hefty library
for use on mobile devices...

<script type="text/javascript" src=".../jquery.min.js"><script>
<script type="text/javascript" src=".../scrollto.js"><script>
animation in JavaScript can be
very taxing on mobile devices...

Recommended for you

mobile browsers aren’t as
capable as desktop browsers...

again, are we expecting too much...?

http://www.flickr.com/photos/mjryall/3638778588
4

use CSS instead of JavaScript for animations...
are jQuery (and JavaScript) necessary to
provide an experience on mobile devices...?

<script type="text/javascript" src=".../jquery.min.js"><script>
<script type="text/javascript" src=".../scrollto.js"><script>
consider using basic DOM manipulation, or a mobile optimised Javascript library

<script type="text/javascript" src=".../xui.min.js"><script>
the “jQuery Mobile” long before jQuery Mobile...
http://xuijs.com

http://jquerymobile.com

use CSS for animations if available instead of Javascript

.scrollto {
-webkit-transform: translate(540px, -200px);
-moz-transform: translate(540px, -200px);
-o-transform: translate(540px, -200px);
}

...use CSS animations
(where possible) instead

ignored on browsers that don’t support it
look ma, no jQuery?

from a time before jQuery...
Twier?

http://www.flickr.com/photos/wordridden/2474879344
then again, do you really need javascript?
*none of these services relied on Javascript when they first started...

Recommended for you

1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...

4. progressively enhance using JavaScript
and @media queries

5. adapt content (especially images)
appropriately for each device
5

same images used for all devices...
one size rarely fits all...

ul li#biography a span.label {
background: url("../pig.png") repeat-x center bottom;
}
16 Kb
also adapt content used in <img /> tags

we should also adapt images found within the markup...

<img src="butterfly.png"
width="200" height="160" alt="butterfly" />
16 Kb

http://colly.com/
5

images adapted appropriately for each device...

ul li#biography a span.label {
background: url("../pig-small.png") repeat-x center bottom;
}
provide appropriate sized images for various devices
also adapt content used in <img /> tags

6 Kb

many CMS’s such as WordPress provide a means of
filtering HTML before it’s sent to the client

<img src="butterfly-small.png"
width="100" height="80" alt="butterfly" />
be sure to update the width and height aributes accordingly

services such as http://tinysrc.net can automatically resize + compress your images
http://colly.com/

6 Kb
we could also rethink the <img />* tag...
one image can have multiple source
files, each for an appropriate context

<img alt="butterfly">
<source src="butterfly-small.png" width="100" height="80" />
<source src="butterfly.png" width="200" height="160" />
<source src="butterfly-large.svg" width="400" height="400"
media="min-device-width:320px" /> image formats, and aspect ratios
could be modified as required
</img>
and possibly even include media queries...

*I’m just dreaming here, this doesn’t currently exist...

Recommended for you

the results could be...
much better...

approximations based on actual device testing - font rendering will vary...
http://colly.com/
quick

another example...
http://2010.dconstruct.org*

*again, for illustration purposes only, I’m not criticising the fine folks behind dConstruct...
http://2010.dconstruct.org/

Recommended for you

squishy

http://2010.dconstruct.org/

squishy
different

different

again, brought to you through the magic of @media queries...
http://2010.dconstruct.org/

tada!
so close...

http://2010.dconstruct.org/
6 fonts often not supported on mobile

sprite image not used 6
on mobile devices...

6 images not used on

mobile devices...

only one real issue...
3
2

a single (and compressed!) style sheet

well structured, meaningful
and compressed markup
Good
simple DOM scripting without
4 large Javascript libraries

Could be improved
Needs to be improved

Recommended for you

1. mobile first
2. use well structured, meaningful markup
3. the absence of support for media queries
is in fact the first @media query...

4. progressively enhance using JavaScript
and @media queries

5. adapt content (especially images)
appropriately for each device

6. compress content where possible,

and avoid sending unnecessary data
6

display:none still loads resources...
don’t expect mobile
bandwidth to be free...

@media (max-device-width:767px), all and (max-width:449px) { ...
.speaker-carousel {
display: none;
}

all of the speaker-carousel images are actually loaded,
even though they are never displayed on mobile devices...
images not used on
mobile devices...

367.35 KB

http://2010.dconstruct.org/

@font-face not supported
on most mobile devices...

93.63 KB
6

...avoid sending unnecessary data

@media (max-device-width:767px), all and (max-width:449px) { ...
.speaker-carousel {
display: none;
}

find another way to remove the
unused resources on mobile devices...

Recommended for you

anything else...?
little tweaks...

fixed
width

relative
width
width: 90%;
height: auto;

http://2010.dconstruct.org/
accessibility*

features
usability
experience

functionality
performance
bandwidth

a balancing act...

http://www.flickr.com/photos/superfantastic/50088733
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...

4. progressively enhance using JavaScript
and @media queries

5. adapt content (especially images)
appropriately for each device

6. compress content where possible,

and don’t include unnecessary data

Recommended for you

why even bother...

I’ve seen
that look...

http://www.flickr.com/photos/eldret_99/3311540632
...people actually do use the mobile web

source comScore MobiLens

http://www.flickr.com/photos/pictfactory/2796367140
...but, not only on these devices
but, also on these...

WebKit
OperaMini

Recommended for you

and, these...

WebKit
OperaMini
and, these...

btw - expect many, many more devices to be heading our ways soon...
Dinosaurs!

...and shouldn’t everyone benefit from technology?

http://www.flickr.com/photos/goincase/4647893507
thank you

hello@yiibu.com

Recommended for you

More Related Content

Viewers also liked

Reseaux sociaux-strategie-cyrille-frank-mediaculture-130723014406-phpapp01
Reseaux sociaux-strategie-cyrille-frank-mediaculture-130723014406-phpapp01Reseaux sociaux-strategie-cyrille-frank-mediaculture-130723014406-phpapp01
Reseaux sociaux-strategie-cyrille-frank-mediaculture-130723014406-phpapp01
Raymond Morin
 
Production log 9
Production log 9Production log 9
Production log 9
Sammyallen
 
English seven age
English seven ageEnglish seven age
English seven age
Shaikh Islam
 
Velocitycrap 130110064100-phpapp01
Velocitycrap 130110064100-phpapp01Velocitycrap 130110064100-phpapp01
Velocitycrap 130110064100-phpapp01
Raymond Morin
 
États et pratiques des relations avec les influenceurs - Les nouveaux défis d...
États et pratiques des relations avec les influenceurs - Les nouveaux défis d...États et pratiques des relations avec les influenceurs - Les nouveaux défis d...
États et pratiques des relations avec les influenceurs - Les nouveaux défis d...
Raymond Morin
 
26 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp02
26 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp0226 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp02
26 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp02
Raymond Morin
 
Dwolla Startup Pitch Deck
Dwolla Startup Pitch DeckDwolla Startup Pitch Deck
Dwolla Startup Pitch Deck
Joseph Hsieh
 

Viewers also liked (8)

Reseaux sociaux-strategie-cyrille-frank-mediaculture-130723014406-phpapp01
Reseaux sociaux-strategie-cyrille-frank-mediaculture-130723014406-phpapp01Reseaux sociaux-strategie-cyrille-frank-mediaculture-130723014406-phpapp01
Reseaux sociaux-strategie-cyrille-frank-mediaculture-130723014406-phpapp01
 
Production log 9
Production log 9Production log 9
Production log 9
 
6 1 131029103022-phpapp02
6 1 131029103022-phpapp026 1 131029103022-phpapp02
6 1 131029103022-phpapp02
 
English seven age
English seven ageEnglish seven age
English seven age
 
Velocitycrap 130110064100-phpapp01
Velocitycrap 130110064100-phpapp01Velocitycrap 130110064100-phpapp01
Velocitycrap 130110064100-phpapp01
 
États et pratiques des relations avec les influenceurs - Les nouveaux défis d...
États et pratiques des relations avec les influenceurs - Les nouveaux défis d...États et pratiques des relations avec les influenceurs - Les nouveaux défis d...
États et pratiques des relations avec les influenceurs - Les nouveaux défis d...
 
26 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp02
26 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp0226 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp02
26 time-management-hacks-i-wish-id-known-at-20-130328142451-phpapp02
 
Dwolla Startup Pitch Deck
Dwolla Startup Pitch DeckDwolla Startup Pitch Deck
Dwolla Startup Pitch Deck
 

Similar to Yiibu rethinkingthemobileweb-100910074556-phpapp01

Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01
Gustavo Luveira
 
Its about people, not devices
Its about people, not devicesIts about people, not devices
Its about people, not devices
Alexander Anikin
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
yiibu
 
Mobile: the next frontier
Mobile: the next frontierMobile: the next frontier
Mobile: the next frontier
Mike Ellis
 
Telecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open MobileTelecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open Mobile
MobileMonday Norway
 
Mobile Web Eahil2008
Mobile Web Eahil2008Mobile Web Eahil2008
Mobile Web Eahil2008
nabot
 
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissSingapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
YOGESH TADWALKAR
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
segun_fama
 
10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile web10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile web
Tijs Vrolix
 
Chrome for android_devfestx
Chrome for android_devfestxChrome for android_devfestx
Chrome for android_devfestx
Dominic Travers
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
yiibu
 
Digital Winners 2013: Brendan eich updated
Digital Winners 2013: Brendan eich updatedDigital Winners 2013: Brendan eich updated
Digital Winners 2013: Brendan eich updated
Telenor Group
 
Mobile web and j query mobile
Mobile web and j query mobileMobile web and j query mobile
Mobile web and j query mobile
psophy
 
New Technology 2017 L01 introduction
New Technology 2017 L01 introductionNew Technology 2017 L01 introduction
New Technology 2017 L01 introduction
Ólafur Andri Ragnarsson
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009
Peter-Paul Koch
 
Mobile Revolution and Assessment - ATP 2011
Mobile Revolution and Assessment - ATP 2011Mobile Revolution and Assessment - ATP 2011
Mobile Revolution and Assessment - ATP 2011
Peter Pascale
 
Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile web
Alexander Anikin
 
Nuno Sitima - State of the mobile web
Nuno Sitima - State of the mobile webNuno Sitima - State of the mobile web
Nuno Sitima - State of the mobile web
Mobile Monday Amsterdam
 
Att förstå mobilens natur
Att förstå mobilens naturAtt förstå mobilens natur
Att förstå mobilens natur
e9carsch
 
Mobile Marketing 2.0
Mobile Marketing 2.0Mobile Marketing 2.0
Mobile Marketing 2.0
Luc Francis Jacobs
 

Similar to Yiibu rethinkingthemobileweb-100910074556-phpapp01 (20)

Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01
 
Its about people, not devices
Its about people, not devicesIts about people, not devices
Its about people, not devices
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
Mobile: the next frontier
Mobile: the next frontierMobile: the next frontier
Mobile: the next frontier
 
Telecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open MobileTelecoms 2.0: Understanding the Impact of Open Mobile
Telecoms 2.0: Understanding the Impact of Open Mobile
 
Mobile Web Eahil2008
Mobile Web Eahil2008Mobile Web Eahil2008
Mobile Web Eahil2008
 
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissSingapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
 
10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile web10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile web
 
Chrome for android_devfestx
Chrome for android_devfestxChrome for android_devfestx
Chrome for android_devfestx
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
 
Digital Winners 2013: Brendan eich updated
Digital Winners 2013: Brendan eich updatedDigital Winners 2013: Brendan eich updated
Digital Winners 2013: Brendan eich updated
 
Mobile web and j query mobile
Mobile web and j query mobileMobile web and j query mobile
Mobile web and j query mobile
 
New Technology 2017 L01 introduction
New Technology 2017 L01 introductionNew Technology 2017 L01 introduction
New Technology 2017 L01 introduction
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009
 
Mobile Revolution and Assessment - ATP 2011
Mobile Revolution and Assessment - ATP 2011Mobile Revolution and Assessment - ATP 2011
Mobile Revolution and Assessment - ATP 2011
 
Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile web
 
Nuno Sitima - State of the mobile web
Nuno Sitima - State of the mobile webNuno Sitima - State of the mobile web
Nuno Sitima - State of the mobile web
 
Att förstå mobilens natur
Att förstå mobilens naturAtt förstå mobilens natur
Att förstå mobilens natur
 
Mobile Marketing 2.0
Mobile Marketing 2.0Mobile Marketing 2.0
Mobile Marketing 2.0
 

Recently uploaded

Master TikTok Influence.................
Master TikTok Influence.................Master TikTok Influence.................
Master TikTok Influence.................
SocioCosmos
 
Monetizing Social Media- How Influencers and Brands Make Money Online
Monetizing Social Media- How Influencers and Brands Make Money OnlineMonetizing Social Media- How Influencers and Brands Make Money Online
Monetizing Social Media- How Influencers and Brands Make Money Online
Arpan Buwa
 
Get More Shares on Quora................
Get More Shares on Quora................Get More Shares on Quora................
Get More Shares on Quora................
SocioCosmos
 
Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...
Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...
Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...
SocioCosmos
 
Digital Marketing Mastery: Strategies for Success in the Digital Age
Digital Marketing Mastery: Strategies for Success in the Digital AgeDigital Marketing Mastery: Strategies for Success in the Digital Age
Digital Marketing Mastery: Strategies for Success in the Digital Age
siddheshmatwandkar6
 
Amul Dairy Products - Latest Price, Dealers & Retailers in ...
Amul Dairy Products - Latest Price, Dealers & Retailers in ...Amul Dairy Products - Latest Price, Dealers & Retailers in ...
Amul Dairy Products - Latest Price, Dealers & Retailers in ...
chetankumar9855
 
Achieve Reddit Stardom..................
Achieve Reddit Stardom..................Achieve Reddit Stardom..................
Achieve Reddit Stardom..................
SocioCosmos
 
Best Digital Marketing Agency in Malappuram
Best Digital Marketing Agency in MalappuramBest Digital Marketing Agency in Malappuram
Best Digital Marketing Agency in Malappuram
gridquedigital
 
Supercharge Pins........................
Supercharge Pins........................Supercharge Pins........................
Supercharge Pins........................
SocioCosmos
 
What Are The Dos & Don'ts When Responding To Negative Reviews On Google
What Are The Dos & Don'ts When Responding To Negative Reviews On GoogleWhat Are The Dos & Don'ts When Responding To Negative Reviews On Google
What Are The Dos & Don'ts When Responding To Negative Reviews On Google
Outreach Digital Marketing
 
一比一原版詹姆斯库克大学毕业证如何办理
一比一原版詹姆斯库克大学毕业证如何办理一比一原版詹姆斯库克大学毕业证如何办理
一比一原版詹姆斯库克大学毕业证如何办理
omune1
 
SUZUKI_GS125R_Strategic_Marketing_Manage.pdf
SUZUKI_GS125R_Strategic_Marketing_Manage.pdfSUZUKI_GS125R_Strategic_Marketing_Manage.pdf
SUZUKI_GS125R_Strategic_Marketing_Manage.pdf
ManjuBv2
 
Reading 03 Social Structure & Ethnicity.docx
Reading 03 Social Structure & Ethnicity.docxReading 03 Social Structure & Ethnicity.docx
Reading 03 Social Structure & Ethnicity.docx
MInnamullah
 
一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理
omune1
 
Grow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdf
Grow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdfGrow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdf
Grow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdf
SocioCosmos
 
Online Notepad Bondi Junction Westfield brings back bad memories.pdf
Online Notepad Bondi Junction Westfield brings back bad memories.pdfOnline Notepad Bondi Junction Westfield brings back bad memories.pdf
Online Notepad Bondi Junction Westfield brings back bad memories.pdf
braydenstoch777
 
2024 Brexton Busch Car T-shirt Sweepstakes Rules
2024 Brexton Busch Car T-shirt Sweepstakes Rules2024 Brexton Busch Car T-shirt Sweepstakes Rules
2024 Brexton Busch Car T-shirt Sweepstakes Rules
jrjustice22
 
Get Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdf
Get Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdfGet Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdf
Get Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdf
SocioCosmos
 
Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...
Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...
Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...
SocioCosmos
 
Buy YouTube Subscribers: Safe & Secure..
Buy YouTube Subscribers: Safe & Secure..Buy YouTube Subscribers: Safe & Secure..
Buy YouTube Subscribers: Safe & Secure..
SocioCosmos
 

Recently uploaded (20)

Master TikTok Influence.................
Master TikTok Influence.................Master TikTok Influence.................
Master TikTok Influence.................
 
Monetizing Social Media- How Influencers and Brands Make Money Online
Monetizing Social Media- How Influencers and Brands Make Money OnlineMonetizing Social Media- How Influencers and Brands Make Money Online
Monetizing Social Media- How Influencers and Brands Make Money Online
 
Get More Shares on Quora................
Get More Shares on Quora................Get More Shares on Quora................
Get More Shares on Quora................
 
Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...
Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...
Buy Social Media Presence Followers, Likes, Views & More with Sociocosmos (1)...
 
Digital Marketing Mastery: Strategies for Success in the Digital Age
Digital Marketing Mastery: Strategies for Success in the Digital AgeDigital Marketing Mastery: Strategies for Success in the Digital Age
Digital Marketing Mastery: Strategies for Success in the Digital Age
 
Amul Dairy Products - Latest Price, Dealers & Retailers in ...
Amul Dairy Products - Latest Price, Dealers & Retailers in ...Amul Dairy Products - Latest Price, Dealers & Retailers in ...
Amul Dairy Products - Latest Price, Dealers & Retailers in ...
 
Achieve Reddit Stardom..................
Achieve Reddit Stardom..................Achieve Reddit Stardom..................
Achieve Reddit Stardom..................
 
Best Digital Marketing Agency in Malappuram
Best Digital Marketing Agency in MalappuramBest Digital Marketing Agency in Malappuram
Best Digital Marketing Agency in Malappuram
 
Supercharge Pins........................
Supercharge Pins........................Supercharge Pins........................
Supercharge Pins........................
 
What Are The Dos & Don'ts When Responding To Negative Reviews On Google
What Are The Dos & Don'ts When Responding To Negative Reviews On GoogleWhat Are The Dos & Don'ts When Responding To Negative Reviews On Google
What Are The Dos & Don'ts When Responding To Negative Reviews On Google
 
一比一原版詹姆斯库克大学毕业证如何办理
一比一原版詹姆斯库克大学毕业证如何办理一比一原版詹姆斯库克大学毕业证如何办理
一比一原版詹姆斯库克大学毕业证如何办理
 
SUZUKI_GS125R_Strategic_Marketing_Manage.pdf
SUZUKI_GS125R_Strategic_Marketing_Manage.pdfSUZUKI_GS125R_Strategic_Marketing_Manage.pdf
SUZUKI_GS125R_Strategic_Marketing_Manage.pdf
 
Reading 03 Social Structure & Ethnicity.docx
Reading 03 Social Structure & Ethnicity.docxReading 03 Social Structure & Ethnicity.docx
Reading 03 Social Structure & Ethnicity.docx
 
一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理
 
Grow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdf
Grow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdfGrow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdf
Grow Your Social Media - Simple & Effective Tools by Socio Cosmos.pdf
 
Online Notepad Bondi Junction Westfield brings back bad memories.pdf
Online Notepad Bondi Junction Westfield brings back bad memories.pdfOnline Notepad Bondi Junction Westfield brings back bad memories.pdf
Online Notepad Bondi Junction Westfield brings back bad memories.pdf
 
2024 Brexton Busch Car T-shirt Sweepstakes Rules
2024 Brexton Busch Car T-shirt Sweepstakes Rules2024 Brexton Busch Car T-shirt Sweepstakes Rules
2024 Brexton Busch Car T-shirt Sweepstakes Rules
 
Get Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdf
Get Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdfGet Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdf
Get Real Instagram Growth Followers, Likes, Engagement - SocioCosmos.pdf
 
Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...
Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...
Elevate Your Twitter Presence Buy Followers, Likes, & More - Sociocosmos pen_...
 
Buy YouTube Subscribers: Safe & Secure..
Buy YouTube Subscribers: Safe & Secure..Buy YouTube Subscribers: Safe & Secure..
Buy YouTube Subscribers: Safe & Secure..
 

Yiibu rethinkingthemobileweb-100910074556-phpapp01

  • 1. Rethinking the Mobile Web a pragmatic look at creating an accessible and inclusive mobile experience http://www.flickr.com/photos/fpat/3692425154
  • 2. we a lovely, location-b ased, social, photo thing y... this presentation is not about these. http://www.flickr.com/photos/scobleizer/3985020876 apps, and...
  • 3. Dinosaurs! we think the iPad is pretty awesome, but... http://www.flickr.com/photos/goincase/4647893507
  • 5. billion 1.8 the number of internet connections in the world today... 26% of the world’s population at the beginning of 2010 – http://www.internetworldstats.com
  • 6. billion 6.8 the number of people in the world today... *2009 estimates put the population around 6.79 billion inhabitants...
  • 7. billion 3.4 the number of people with mobile devices today... or roughly 1/2 the population of the planet, which is...
  • 8. it’s about people not devices...
  • 9. so here’s the dilemma... http://www.flickr.com/photos/soundman1024/1796003688
  • 10. "The future is already here – it’s just not evenly distributed." – William Gibson http://www.flickr.com/photos/kiwanja/3169447879
  • 11. no home Sony Ericsson w810i no iPhone technology should not only be accessible... http://www.flickr.com/photos/walkadog/3093763311
  • 13. and available to everyone... iPhone http://www.flickr.com/photos/pictfactory/2796367140
  • 14. yes, even this man who does not have an iPhone... not an iPhone... http://www.flickr.com/photos/dopesmuglar/486087009
  • 15. so, who actually has an iPhone... http://www.flickr.com/photos/data_op/2468057934
  • 16. USA
  • 17. about 6% US market share... enormous impact US Population: 307 million Smartphone penetration: 31% of pop. iPhone market share: 21% of smp. Total iPhones in US: 19 million (~6%) low overall penetration The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact http://moconews.net/article/419-deep-discounts-on-smartphones-drive-u.s.-adoption-rates-to-nearly-a-thi/ and http://www.npd.com/press/releases/press_100510.html
  • 18. EU5
  • 19. only 4% EU5* market share... enormous impact EU5* = France, Germany, Italy, Spain and United Kingdom low overall penetration The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact http://www.comscore.com/layout/set/popup/layout/set/popup/Press_Events/Press_Releases/2010/6/The_iPhone_Reality_in_Europe_Low_Overall_Penetration_Enormous_Impact
  • 20. <4% global market share* enormous impact low overall penetration *I suspect it’s actually much less, but finding accurate global figures is a tad difficult...
  • 21. ie: BMW The ”most popular” devices don’t necessarily translate to the most used devices. ie: Ford
  • 22. ” yeah, but those devices suck! http://www.flickr.com/photos/eldret_99/3311540398
  • 24. the first smartphone in 2003... considered portable in 1984 fits in your pocket still widely used... Released: 1984 CPU: 8 MHz RAM: 128k (512k max) Storage: 400k (3.5” floppy) Display: 22.9 cm Monochrome Dimensions: 34.5 x 24.4 x 27.7 cm Weight: 7.5 kgs Released: 2003 CPU: 104 MHz RAM: 6 MB Storage: 32 MB MMC Card Display: 5.3 cm Thousands of colours Dimensions: 10.9 x 5.8 x 2.4 cm Weight: 122 g
  • 25. the music phone in 2008... again, it was ‘portable’...? ...this runs Flash not a feature phone, nor a smartphone... Released: 1998 CPU: 233 MHz RAM: 32 MB (512 MB max) Storage: 4 GB (+ optical drive) Display: 38.1 cm Millions of colours Dimensions: 40.1 x 38.6 x 44.7 cm Weight: 17.3 kgs Released: 2008 CPU: 434 MHz RAM: 128 MB Storage: 8 GB (16 GB max) Display: 8.1 cm Millions of colours Dimensions: 11.1 x 5.2 x 1.5 cm Weight: 109 g
  • 26. the feature phone in 2009... smartphone from 2005 extremely popular today... still widely used today... Released: 2005 CPU: 220 MHz RAM: 22 MB Storage: 64 MB Display: 5.3 cm Thousands of colours Dimensions: 10.8 x 5.3 x 2.2 cm Weight: 126 g Released: 2009 CPU: 369 MHz RAM: 30 MB Storage: 1 GB (16 GB max) Display: 5.1 cm Thousands of colours Dimensions: 10.6 x 4.7 x 1.5 cm Weight: 88 g
  • 27. the smartphone in 2010... ...playing “catch-up” Released: 2010 CPU: 680 MHz RAM: 256 MB Storage: 16 GB (32 GB max) Display: 8.9 cm Millions of colours Dimensions: 11.4 x 5.9 x 1.3 cm Weight: 135 g raising the “bar”... Released: 2010 CPU: 1 GHz A4 Processor RAM: 512 MB Storage: 16 GB (32 GB max) Display: 8.9 cm Millions of colours Dimensions: 11.5 x 5.9 x 0.9 cm Weight: 137 g
  • 28. ” ...but folks with those other phones simply don’t use the Internet. http://www.flickr.com/photos/carbonnyc/3369424492
  • 29. ” yeah, and grandma doesn’t do Facebook... Grandma* Facebook http://www.flickr.com/photos/amagill/304701054 *not my Grandma
  • 30. billion 1.3 the number of mobile internet users today... ...includes WAP and ‘real web’ via Tomi Ahonen Consulting
  • 31. 1/3 number of global internet users who access the internet only via mobile... ...includes WAP and ‘real web’ via Tomi Ahonen Consulting
  • 32. 21% the projected worldwide 3G penetration in 2010... via Morgan Stanley
  • 33. so, what are they using...
  • 34. mobile browser market share via http://gs.statcounter.com - 02/2010 other? things have changed skeptical UC ate Nokia’s share... other? other? note OperaMini... quality + sample size? Data Source: http://gs.statcounter.com Published Under a Creative Commons Attribution 3.0 Unported License You are free to copy, distribute and transmit the work and to adapt the work providing it is attributed to www.icrossing.co.uk http://www.flickr.com/photos/icrossing_uk/4342659861 Blackberry!
  • 35. something happened in February... UC browser... Nokia browser... Top 9 Mobile Browsers in China from Sep 09 to Aug 10 | StatCounter Global Stats http://gs.statcounter.com/#mobile_browser-CN-monthly-200909-201008
  • 36. moving forward... used in iOS, Android, Palm WebOS, Nokia Qt, Bada, Symbian and new Blackberry... primarily used on feature phones supporting Java ME... + WebKit OperaMini watch these... Windows Mobile proxy browser... lots of new browsers, variation and of course – legacy browsers Obigo “Fennec” Internet Explorer Browser UC proxy browsers MicroB SkyFire Internet Browser
  • 37. the importance of WebKit... open source licensed under the GNU Library General Public License excellent standards support including HTML, CSS3, SVG, etc. innovations often contributed back example: HTML5, CSS animations, SquirrelFish, etc. adopted by many leading companies WebKit including Apple, Nokia, Samsung, Google, Palm, etc. used in many mobile operating systems including iOS, Android, webOS, Bada, Symbian, etc. btw - “There is no WebKit on Mobile” by @ppk http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
  • 38. the importance of OperaMini... free costs consumers absolutely nothing a full-web experience supports Ajax, zooming, tabbed browsing, etc excellent standards support based on the same code-base as the Opera browser available just about anywhere on JavaME, iPhone, Android, Windows Mobile + more an extremely efficient browser a proxy server filters, compresses & pre-renders content usable on older devices breathe new life into those antique devices... very important OperaMini
  • 39. proxy browser rendered + optimised on proxy server... and proxy browsers... free + unlimited bandwidth OBML* limited + costly bandwidth HTML proxy server bbc.co.uk *OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.
  • 40. on private networks... caller a d limited + costly bandwidth switching centre c receiver b base-station to the Internet... transcoding, bandwidth limitations, service blocking and no packet neutrality
  • 41. also availabl e for Android ... OperaMini is great for browsing the web on iPhone when your connection stinks. Which is unfortunately is fairly often in my case. – @jonathanstark http://www.flickr.com/photos/johanl/4424185115 ”
  • 42. app yeah, whatever–I just wanna build a mobile website...
  • 43. traditionally you might consider... a device database ie. DeviceAtlas or WURFL device detection content adaptation an abstraction layer media types WURFL/WALL transcoding exhausting testing device capabilities various standards multiple templates private networks geing “on-deck” data limits multiple sites an off-deck strategy... cHTML thematic the “One Web” dream consistency correct doctypes fragmentation switching algorithms using UAProf data WML XHTML-MP mimetypes http://www.flickr.com/photos/rmlowe/3281353786 WAP
  • 44. but that might be a bit overwhelming... ” OMG... http://www.flickr.com/photos/richardmoross/1413692087
  • 46. ...a look at what we’re doing now?* *for illustration purposes only
  • 48. but that’s not terribly mobile friendly – what about...
  • 50. oh, but then that just begs the question...
  • 51. other... TVs laptops/netbooks handheld consoles what exactly is mobile... http://www.flickr.com/photos/amagill/26273015
  • 54. then again, we could...
  • 55. create an adaptive experience... http://www.flickr.com/photos/rohit_saxena/4873732679
  • 56. an example http://colly.com* *for illustration purposes only, I’m not criticising the talented Mr. Collison or his fine work...
  • 57. http://colly.com MOBILE SITE OF THE YEAR NOMINEE http://www.thenetawards.com/
  • 60. also available on mobile... squishy http://colly.com/ squishy
  • 61. al an optimce experien squishy squishy brought to you through the magic of @media queries... http://colly.com/ tada!
  • 63. these are also mobile... WebKit approximations based on actual device testing - font rendering will vary... http://colly.com/ WebKit
  • 64. as are these... the iPhone is #1 device for OperaMini *OperaMini is often preferred by many users as it optimises content prior to download, which reduces data costs. http://colly.com/
  • 65. and these... 77mm 47mm Mozilla insanely tiny! expect many more tablet devices on the market soon... http://colly.com/
  • 66. traditionally used for the fine print... which now require this... http://www.flickr.com/photos/chrisbrenschmidt/1832787028
  • 67. viewport is much smaller than the actual content and this... http://www.flickr.com/photos/katerha/4592429363
  • 68. keyhole browsing for this experience http://colly.com/
  • 69. ...would you be happy with this? hmm... http://colly.com/
  • 70. once again why are we writing for only one browser... 2000 2010 ...is WebKit the new Internet Explorer?
  • 71. ” “This site works best in Safari 4” is ok where “This site works best in IE4” wasn’t?!? Open standards or double standards? – @csssquirrel via @brucel http://www.flickr.com/photos/pjanvandaele/3990379048
  • 72. ” If you want to use the web on a mobile device, is the purchase of an iPhone the cost of entry? or Android device this design can work on *many* more devices... let alone only one device?
  • 73. as per my highly sophisticated mobile web triage process... ;) Good Could be improved Needs to be improved let’s make it more accessible... http://colly.com/
  • 74. 3 one style sheet w/@media queries 4 jQuery used only for animation... 5 same images used for all screen devices... only a few issues... 2 4 well structured, meaningful markup Javascript animations tend to work poorly on the majority of mobile devices... Good Could be improved Needs to be improved
  • 76. 2. use well structured, meaningful markup for those still paying attention, yes there is a #1 and we will get to it shortly...
  • 77. 2 well structured, meaningful markup... mmm... meaning! structure there’s lots more, but who wants to stare at code... http://colly.com/ view source
  • 78. 2 well structured, meaningful markup... use <header>, <h1>, <p> and other semantically meaningful tags to provide basic structure *Note: this is not from hp://colly.com recreating existing <tags> is not cool <div class="body"> <div class="header"> <div class= "h1"> <span>Hello World!</span> </div> <div> soup... </div> <div class="body">HTML <span class="emphasis">can actually be</span>meaningful. </div> </div> soup is best served in a bowl... without a basic, meaningful structure you will need to re-create many existing properties
  • 79. 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query...
  • 80. 3 all-in-one stylesheet with @media queries... a single css file is network efficient, but often includes unnecessary style data for mobile devices... <link href="screen.css" type="text/css" rel="stylesheet" media="screen" /> ....towards the end of ‘screen.css’ we find the @media queries mobile specific tweaks are added at the very end, and only through @media queries... @media (max-device-width:480px) and (orientation:portrait) { ...
  • 82. rocket science a desktop browser... are we expecting too much... http://www.flickr.com/photos/nasa_goddard/4678389619/
  • 83. rocket science a mobile browser... http://www.flickr.com/photos/wwworks/3749061604 ...from our mobile browsers?
  • 85. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query... aha, I told you we’d eventually get to #1!
  • 88. is technically served to everyone... a full desktop site
  • 89. sprinkle on a few @media queries... + @media queries a full desktop site
  • 90. ...if the @media query resolves to true, tada - a mobile site! = mobile site + @media queries a full desktop site
  • 91. but here’s the problem...
  • 92. FAIL = mobile site + @media queries a full desktop site http://www.flickr.com/photos/hendry/3053419265
  • 93. = mobile site a full desktop site http://www.flickr.com/photos/hendry/3053419265
  • 94. @media queries will resolve to false on most devices... no, really – you simply cannot rely on them currently on mobile devices
  • 95. resulting in this experience... http://colly.com/
  • 96. so it’s far more effective when we start with...
  • 97. is technically served to everyone... a mobile site
  • 98. for browsers that support them, other browsers will just ignore them... + @media queries a mobile site
  • 99. tada – a desktop site! ;) = full desktop site + @media queries a mobile site
  • 100. which is really just...
  • 101. and not a new idea at all... progressive enhancement = full desktop site Jeremy Keith + media queries a mobile site http://www.flickr.com/photos/clagnut/315554083
  • 103. but let’s get back to...
  • 104. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query...
  • 105. 3 all-in-one stylesheet with @media queries... a single css file is network efficient, but often includes unnecessary style data for mobile devices... <link href="screen.css" type="text/css" rel="stylesheet" media="screen" /> ....towards the end of ‘screen.css’ we find the @media queries mobile specific tweaks are added at the very end, and only through @media queries... @media (max-device-width:480px) and (orientation:portrait) { ...
  • 106. 3 default stylesheet plus @media queries... place mobile related styles into a default stylesheet... <link href="default.css" type="text/css" rel="stylesheet" media="screen" /> <link href="desktop.css" type="text/css" rel="stylesheet" media="screen and (min-device-width:1024px) and (max-width:989px)" /> link additional style sheets using @media queries to progressively enhance the content for more capable browsers some mobile browsers look for it... *you may want to use both the ‘screen’ and ‘handheld’ media types for your default stylesheet
  • 107. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query... 4. progressively enhance using JavaScript and @media queries
  • 108. 4 jQuery/JavaScript used only for animation... jQuery is still a rather hefty library for use on mobile devices... <script type="text/javascript" src=".../jquery.min.js"><script> <script type="text/javascript" src=".../scrollto.js"><script> animation in JavaScript can be very taxing on mobile devices...
  • 109. mobile browsers aren’t as capable as desktop browsers... again, are we expecting too much...? http://www.flickr.com/photos/mjryall/3638778588
  • 110. 4 use CSS instead of JavaScript for animations... are jQuery (and JavaScript) necessary to provide an experience on mobile devices...? <script type="text/javascript" src=".../jquery.min.js"><script> <script type="text/javascript" src=".../scrollto.js"><script> consider using basic DOM manipulation, or a mobile optimised Javascript library <script type="text/javascript" src=".../xui.min.js"><script> the “jQuery Mobile” long before jQuery Mobile... http://xuijs.com http://jquerymobile.com use CSS for animations if available instead of Javascript .scrollto { -webkit-transform: translate(540px, -200px); -moz-transform: translate(540px, -200px); -o-transform: translate(540px, -200px); } ...use CSS animations (where possible) instead ignored on browsers that don’t support it
  • 111. look ma, no jQuery? from a time before jQuery... Twier? http://www.flickr.com/photos/wordridden/2474879344
  • 112. then again, do you really need javascript? *none of these services relied on Javascript when they first started...
  • 113. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query... 4. progressively enhance using JavaScript and @media queries 5. adapt content (especially images) appropriately for each device
  • 114. 5 same images used for all devices... one size rarely fits all... ul li#biography a span.label { background: url("../pig.png") repeat-x center bottom; } 16 Kb also adapt content used in <img /> tags we should also adapt images found within the markup... <img src="butterfly.png" width="200" height="160" alt="butterfly" /> 16 Kb http://colly.com/
  • 115. 5 images adapted appropriately for each device... ul li#biography a span.label { background: url("../pig-small.png") repeat-x center bottom; } provide appropriate sized images for various devices also adapt content used in <img /> tags 6 Kb many CMS’s such as WordPress provide a means of filtering HTML before it’s sent to the client <img src="butterfly-small.png" width="100" height="80" alt="butterfly" /> be sure to update the width and height aributes accordingly services such as http://tinysrc.net can automatically resize + compress your images http://colly.com/ 6 Kb
  • 116. we could also rethink the <img />* tag... one image can have multiple source files, each for an appropriate context <img alt="butterfly"> <source src="butterfly-small.png" width="100" height="80" /> <source src="butterfly.png" width="200" height="160" /> <source src="butterfly-large.svg" width="400" height="400" media="min-device-width:320px" /> image formats, and aspect ratios could be modified as required </img> and possibly even include media queries... *I’m just dreaming here, this doesn’t currently exist...
  • 118. much better... approximations based on actual device testing - font rendering will vary... http://colly.com/
  • 119. quick another example... http://2010.dconstruct.org* *again, for illustration purposes only, I’m not criticising the fine folks behind dConstruct...
  • 122. different different again, brought to you through the magic of @media queries... http://2010.dconstruct.org/ tada!
  • 124. 6 fonts often not supported on mobile sprite image not used 6 on mobile devices... 6 images not used on mobile devices... only one real issue... 3 2 a single (and compressed!) style sheet well structured, meaningful and compressed markup Good simple DOM scripting without 4 large Javascript libraries Could be improved Needs to be improved
  • 125. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for media queries is in fact the first @media query... 4. progressively enhance using JavaScript and @media queries 5. adapt content (especially images) appropriately for each device 6. compress content where possible, and avoid sending unnecessary data
  • 126. 6 display:none still loads resources... don’t expect mobile bandwidth to be free... @media (max-device-width:767px), all and (max-width:449px) { ... .speaker-carousel { display: none; } all of the speaker-carousel images are actually loaded, even though they are never displayed on mobile devices...
  • 127. images not used on mobile devices... 367.35 KB http://2010.dconstruct.org/ @font-face not supported on most mobile devices... 93.63 KB
  • 128. 6 ...avoid sending unnecessary data @media (max-device-width:767px), all and (max-width:449px) { ... .speaker-carousel { display: none; } find another way to remove the unused resources on mobile devices...
  • 132. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query... 4. progressively enhance using JavaScript and @media queries 5. adapt content (especially images) appropriately for each device 6. compress content where possible, and don’t include unnecessary data
  • 133. why even bother... I’ve seen that look... http://www.flickr.com/photos/eldret_99/3311540632
  • 134. ...people actually do use the mobile web source comScore MobiLens http://www.flickr.com/photos/pictfactory/2796367140
  • 135. ...but, not only on these devices
  • 136. but, also on these... WebKit OperaMini
  • 138. and, these... btw - expect many, many more devices to be heading our ways soon...
  • 139. Dinosaurs! ...and shouldn’t everyone benefit from technology? http://www.flickr.com/photos/goincase/4647893507