SlideShare a Scribd company logo
iOS7
The good, the bad & the changes
Chrissy Welsh
Lead UX - Backbase
@chrissywelsh
iOS7
The good, the bad & the changes
Chrissy Welsh
Lead UX - Backbase
@chrissywelsh
What we will cover
• Bugs to watch out for
• Design decisions for native apps
& websites + their workarounds
• Gestures
• The new look and feel
• New & removed features
Bugs to watch out for...
• Web SQL permissions to increase the default 5MB of
space for an app to the previously permitted 50MB limit no
longer work correctly, and require a workaround.
• “Save to Home Screen” apps are basically broken. Once
more than four apps are saved to home screen, the save
slots are recycled and sometimes duplicated, and the
phone has to be rebooted in order to clear itself.
• If your app uses AppCache and you are managing state via
hash or other mechanisms, the history object will never
update, disabling history.back.
Design decisions: Tints
Feature: Tints are selected based on the primary
background colour
Workaround: Select your background colours carefully
Design decisions: Navigation
Feature: Bottom navigation is
problematic, in this design it’s
disabled because of the new iOS7
Safari toolbar.
Workaround: 2 user taps will
activate the menu again - or rethink
the UX & navigation.
Design decisions: URL bar
Feature: No way to hide the URL bar with javascript, no full screen
mode. Problem if your app relies on absolute positioning.
Workaround: Swiping up will reset to full screen, or asking user to
add app to homescreen
Design decisions: Page titles
Feature: Safari now ignores page <title>
Workaround: It will show the URL, so make sure it
makes sense.
Design decisions: HTML5
Issue: Animating SVG
with Javascript is a bit hit
or miss with your
performance.
Workaround: Look at
your interactive elements
and slim them down if
possible.
Gestures: Up-swipe
Feature: iOS7 now has a control
center visible on a bottom up
swipe.
Workaround: Be careful with
your app or site to suggest an
upwards swipe gesture to the
user.
Gestures: left/right-swipe
Feature: Right and left
swipe gestures within
about 10 percent of
display edge are always
grabbed by iOS and
treated as a forward/back
request, and not passed
to the browser.
Workaround: None
The new look & feel
Feature: The new OS
icons are 5% bigger in
7.0 that 6.0
Workaround: Update
those bad boys
Removed features: Datetime
Issue: doesn’t
support the
datetime input type
anymore and it will
fallback to text.
New feature: Sticky position
Feature: Sticky position is a new experimental feature that
allow us to fix an element to the viewport but only when it’s
off the visible area (usually after a scrolling action)
New features: Multitasking
Issues: When running a
homescreen app the system will
use a while image.
Workaround: None
New features: Dynamic behaviour
Feature: Dynamic behaviors offer
a way to improve the user
experience of your app by
incorporating real-world behavior
and characteristics, such as
gravity, into your app’s animations.
New features: Speech synthesis
Feature: Speech Synthesis api
allows mobile safari to speak.
New features: Custom transitions
Feature: Allows you to set up the screen changes in
the UI the way you want it.
New features: Smile detection
Feature: If you have a camera
app - or use the camera there are
some playful things you can do.
New features: Image filters
Feature: There are now image
filters available as part of the OS.
• CILinearToSRGBToneCurve
• CIPhotoEffectChrome
• CIPhotoEffectFade
• CIPhotoEffectInstant
• CIPhotoEffectMono
• CIPhotoEffectNoir
• CIPhotoEffectProcess
• CIPhotoEffectTonal
• CIPhotoEffectTransfer
• CISRGBToneCurveToLinear
• CIVignetteEffect
New features: Motion effects (parallax)
Feature: Phone titling to see
more background, or provide
direction in games.
New features: QR code generator
Feature: For all your QR Code
needs. Available as part of the OS.
New feature: Touch iD
Feature: Touch iD as
identification - not available for
websites/apps ... yet.
New feature: Touch iD
http://www.youtube.com/watch?v=1OFW6Va1m5k
*Just remember to test all those cool new features!
What we covered
• Bugs to watch out for
• Design decisions for native apps & websites + their
workarounds
• Gestures
• The new look and feel
• New & removed features
Question Time
ios7 samples: github.com/shu223/iOS7-Sampler
Chrissy Welsh
Lead UX - Backbase
@chrissywelsh

More Related Content

What's hot

Going Serverless with AWS Lambda, Google Cloud Functions and more
Going Serverless with AWS Lambda, Google Cloud Functions and moreGoing Serverless with AWS Lambda, Google Cloud Functions and more
Going Serverless with AWS Lambda, Google Cloud Functions and more
El Mahdi Benzekri
 
Appafolio Tour Presentation
Appafolio Tour PresentationAppafolio Tour Presentation
Appafolio Tour Presentationappafolio
 
Appafolio Tour - Create Your Own Custom iPad and iPhone Portfolio Apps
Appafolio Tour - Create Your Own Custom iPad and iPhone Portfolio AppsAppafolio Tour - Create Your Own Custom iPad and iPhone Portfolio Apps
Appafolio Tour - Create Your Own Custom iPad and iPhone Portfolio Apps
Brent Brookler
 
"Localizer" by CyberZ, Inc.
"Localizer" by CyberZ, Inc."Localizer" by CyberZ, Inc.
"Localizer" by CyberZ, Inc.
Isom Winton
 
Photo Gallery For E Bay Auctions
Photo Gallery For E Bay AuctionsPhoto Gallery For E Bay Auctions
Photo Gallery For E Bay AuctionsNextBee Media
 
Web Images, The Right Way
Web Images, The Right WayWeb Images, The Right Way
Web Images, The Right Way
Thanh Trần Trọng
 
Mobile site options
Mobile site optionsMobile site options
Mobile site options
January Kohli
 
Lean Principles for WAP Portal Design
Lean Principles for WAP Portal DesignLean Principles for WAP Portal Design
Lean Principles for WAP Portal Design
VIVOCORP
 
Richard Downey, The Specialist Works
Richard Downey, The Specialist WorksRichard Downey, The Specialist Works
Richard Downey, The Specialist Works
White Nights Conference
 
Preparing images for the Web
Preparing images for the WebPreparing images for the Web
Preparing images for the Websdireland
 
Planning- Editing and software
Planning- Editing and software Planning- Editing and software
Planning- Editing and software
megansimpson28
 

What's hot (13)

Going Serverless with AWS Lambda, Google Cloud Functions and more
Going Serverless with AWS Lambda, Google Cloud Functions and moreGoing Serverless with AWS Lambda, Google Cloud Functions and more
Going Serverless with AWS Lambda, Google Cloud Functions and more
 
Appafolio Tour Presentation
Appafolio Tour PresentationAppafolio Tour Presentation
Appafolio Tour Presentation
 
Appafolio Tour - Create Your Own Custom iPad and iPhone Portfolio Apps
Appafolio Tour - Create Your Own Custom iPad and iPhone Portfolio AppsAppafolio Tour - Create Your Own Custom iPad and iPhone Portfolio Apps
Appafolio Tour - Create Your Own Custom iPad and iPhone Portfolio Apps
 
"Localizer" by CyberZ, Inc.
"Localizer" by CyberZ, Inc."Localizer" by CyberZ, Inc.
"Localizer" by CyberZ, Inc.
 
Photo Gallery For E Bay Auctions
Photo Gallery For E Bay AuctionsPhoto Gallery For E Bay Auctions
Photo Gallery For E Bay Auctions
 
Web Images, The Right Way
Web Images, The Right WayWeb Images, The Right Way
Web Images, The Right Way
 
Mobile site options
Mobile site optionsMobile site options
Mobile site options
 
Lean Principles for WAP Portal Design
Lean Principles for WAP Portal DesignLean Principles for WAP Portal Design
Lean Principles for WAP Portal Design
 
Richard Downey, The Specialist Works
Richard Downey, The Specialist WorksRichard Downey, The Specialist Works
Richard Downey, The Specialist Works
 
Preparing images for the Web
Preparing images for the WebPreparing images for the Web
Preparing images for the Web
 
Hotels and mobiles
Hotels and mobilesHotels and mobiles
Hotels and mobiles
 
Planning- Editing and software
Planning- Editing and software Planning- Editing and software
Planning- Editing and software
 
Brainstorming session
Brainstorming sessionBrainstorming session
Brainstorming session
 

Similar to Ios7 - The good the bad & the changes

Eye candy for your iPhone
Eye candy for your iPhoneEye candy for your iPhone
Eye candy for your iPhone
Brian Shim
 
10 Ways to Boost the Performance of React Native Apps.pdf
10 Ways to Boost the Performance of React Native Apps.pdf10 Ways to Boost the Performance of React Native Apps.pdf
10 Ways to Boost the Performance of React Native Apps.pdf
Expert App Devs
 
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile appsUsing PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Monaca
 
Phonegap - An Introduction
Phonegap - An IntroductionPhonegap - An Introduction
Phonegap - An Introduction
Tyler Johnston
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
colberding
 
Tangoe matrix sprint 15 usable and light weight user interface demo - sep -...
Tangoe matrix sprint 15 usable and light weight user interface   demo - sep -...Tangoe matrix sprint 15 usable and light weight user interface   demo - sep -...
Tangoe matrix sprint 15 usable and light weight user interface demo - sep -...
Venkatarajan Govindarajan (CUA Student from HFI)
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
Active web page chapter for reading purpose
Active web page chapter for reading purposeActive web page chapter for reading purpose
Active web page chapter for reading purpose
SambalSwetank
 
Offline of web applications
Offline of web applicationsOffline of web applications
Offline of web applications
FDConf
 
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014
Jan Jongboom
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCritical Mass
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
Ryan Stewart
 
Christopher Allen's Presentation at eComm 2009
Christopher Allen's Presentation at eComm 2009Christopher Allen's Presentation at eComm 2009
Christopher Allen's Presentation at eComm 2009eCommConf
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Magic Software
 
Building native apps with web components
Building native apps with web componentsBuilding native apps with web components
Building native apps with web components
Denis Radin
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by Citytech
Ritwik Das
 
Beyond Responsive Web Design - Moving your web agency to mobile development (...
Beyond Responsive Web Design - Moving your web agency to mobile development (...Beyond Responsive Web Design - Moving your web agency to mobile development (...
Beyond Responsive Web Design - Moving your web agency to mobile development (...
craigharmonic
 
An introduction to html5 by Devs
An introduction to html5 by DevsAn introduction to html5 by Devs
An introduction to html5 by Devs
Debidatta Satapathy
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
Nate Walton
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
Jason Grigsby
 

Similar to Ios7 - The good the bad & the changes (20)

Eye candy for your iPhone
Eye candy for your iPhoneEye candy for your iPhone
Eye candy for your iPhone
 
10 Ways to Boost the Performance of React Native Apps.pdf
10 Ways to Boost the Performance of React Native Apps.pdf10 Ways to Boost the Performance of React Native Apps.pdf
10 Ways to Boost the Performance of React Native Apps.pdf
 
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile appsUsing PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
 
Phonegap - An Introduction
Phonegap - An IntroductionPhonegap - An Introduction
Phonegap - An Introduction
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
 
Tangoe matrix sprint 15 usable and light weight user interface demo - sep -...
Tangoe matrix sprint 15 usable and light weight user interface   demo - sep -...Tangoe matrix sprint 15 usable and light weight user interface   demo - sep -...
Tangoe matrix sprint 15 usable and light weight user interface demo - sep -...
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Active web page chapter for reading purpose
Active web page chapter for reading purposeActive web page chapter for reading purpose
Active web page chapter for reading purpose
 
Offline of web applications
Offline of web applicationsOffline of web applications
Offline of web applications
 
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
Christopher Allen's Presentation at eComm 2009
Christopher Allen's Presentation at eComm 2009Christopher Allen's Presentation at eComm 2009
Christopher Allen's Presentation at eComm 2009
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
Building native apps with web components
Building native apps with web componentsBuilding native apps with web components
Building native apps with web components
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by Citytech
 
Beyond Responsive Web Design - Moving your web agency to mobile development (...
Beyond Responsive Web Design - Moving your web agency to mobile development (...Beyond Responsive Web Design - Moving your web agency to mobile development (...
Beyond Responsive Web Design - Moving your web agency to mobile development (...
 
An introduction to html5 by Devs
An introduction to html5 by DevsAn introduction to html5 by Devs
An introduction to html5 by Devs
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 

Recently uploaded

一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
PrabhjeetSingh219035
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
Hess9
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 

Recently uploaded (20)

一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 

Ios7 - The good the bad & the changes

  • 1. iOS7 The good, the bad & the changes Chrissy Welsh Lead UX - Backbase @chrissywelsh
  • 2. iOS7 The good, the bad & the changes Chrissy Welsh Lead UX - Backbase @chrissywelsh
  • 3. What we will cover • Bugs to watch out for • Design decisions for native apps & websites + their workarounds • Gestures • The new look and feel • New & removed features
  • 4. Bugs to watch out for... • Web SQL permissions to increase the default 5MB of space for an app to the previously permitted 50MB limit no longer work correctly, and require a workaround. • “Save to Home Screen” apps are basically broken. Once more than four apps are saved to home screen, the save slots are recycled and sometimes duplicated, and the phone has to be rebooted in order to clear itself. • If your app uses AppCache and you are managing state via hash or other mechanisms, the history object will never update, disabling history.back.
  • 5. Design decisions: Tints Feature: Tints are selected based on the primary background colour Workaround: Select your background colours carefully
  • 6. Design decisions: Navigation Feature: Bottom navigation is problematic, in this design it’s disabled because of the new iOS7 Safari toolbar. Workaround: 2 user taps will activate the menu again - or rethink the UX & navigation.
  • 7. Design decisions: URL bar Feature: No way to hide the URL bar with javascript, no full screen mode. Problem if your app relies on absolute positioning. Workaround: Swiping up will reset to full screen, or asking user to add app to homescreen
  • 8. Design decisions: Page titles Feature: Safari now ignores page <title> Workaround: It will show the URL, so make sure it makes sense.
  • 9. Design decisions: HTML5 Issue: Animating SVG with Javascript is a bit hit or miss with your performance. Workaround: Look at your interactive elements and slim them down if possible.
  • 10. Gestures: Up-swipe Feature: iOS7 now has a control center visible on a bottom up swipe. Workaround: Be careful with your app or site to suggest an upwards swipe gesture to the user.
  • 11. Gestures: left/right-swipe Feature: Right and left swipe gestures within about 10 percent of display edge are always grabbed by iOS and treated as a forward/back request, and not passed to the browser. Workaround: None
  • 12. The new look & feel Feature: The new OS icons are 5% bigger in 7.0 that 6.0 Workaround: Update those bad boys
  • 13. Removed features: Datetime Issue: doesn’t support the datetime input type anymore and it will fallback to text.
  • 14. New feature: Sticky position Feature: Sticky position is a new experimental feature that allow us to fix an element to the viewport but only when it’s off the visible area (usually after a scrolling action)
  • 15. New features: Multitasking Issues: When running a homescreen app the system will use a while image. Workaround: None
  • 16. New features: Dynamic behaviour Feature: Dynamic behaviors offer a way to improve the user experience of your app by incorporating real-world behavior and characteristics, such as gravity, into your app’s animations.
  • 17. New features: Speech synthesis Feature: Speech Synthesis api allows mobile safari to speak.
  • 18. New features: Custom transitions Feature: Allows you to set up the screen changes in the UI the way you want it.
  • 19. New features: Smile detection Feature: If you have a camera app - or use the camera there are some playful things you can do.
  • 20. New features: Image filters Feature: There are now image filters available as part of the OS. • CILinearToSRGBToneCurve • CIPhotoEffectChrome • CIPhotoEffectFade • CIPhotoEffectInstant • CIPhotoEffectMono • CIPhotoEffectNoir • CIPhotoEffectProcess • CIPhotoEffectTonal • CIPhotoEffectTransfer • CISRGBToneCurveToLinear • CIVignetteEffect
  • 21. New features: Motion effects (parallax) Feature: Phone titling to see more background, or provide direction in games.
  • 22. New features: QR code generator Feature: For all your QR Code needs. Available as part of the OS.
  • 23. New feature: Touch iD Feature: Touch iD as identification - not available for websites/apps ... yet.
  • 24. New feature: Touch iD http://www.youtube.com/watch?v=1OFW6Va1m5k *Just remember to test all those cool new features!
  • 25. What we covered • Bugs to watch out for • Design decisions for native apps & websites + their workarounds • Gestures • The new look and feel • New & removed features
  • 26. Question Time ios7 samples: github.com/shu223/iOS7-Sampler Chrissy Welsh Lead UX - Backbase @chrissywelsh