The document discusses responsive UX, which is designing websites and applications that adapt to different screen sizes and devices using fluid grids, media queries, and responsive images; it provides examples of how to implement responsive design principles through fluid grids, image scaling, and media queries to build sites that automatically adjust for smartphones, tablets, and other devices.
2. Hello.
• Kirk Ballou
CEO of TouchTitans
Mobile Experience Studio
• Platforms: iOS, Android,
Windows Phone, Symbian
• Target devices:
Smartphones, Tablets and Set
Top Box
• Mobile UX, Design and
Development
• Mobile Monday Dallas
founder - momodfw.com
Our Clients
4. What is Responsive UX?
The use of Media Queries, Fluid
Grids and Adaptive Layouts
Responding to the users display and
capabilities.
5. History of
Responsive UX
Ethan Marcotte - Responsive Web Design
http://alistapart.com/articles/responsive-
web-design/
Luke Wroblewski - Mobile First
http://lukew.com/
6. Principles
Total width based on average browser size from W3c.
1280 so 1140pixels wide for browser size. Others target
960px wide.
The screen sizes you target should be based on what
your audience is using. Check your analytics.
Divide your site into columns. For each column grab
pixels wide.
285 px (left panel) / 1140 (site width) use this
percentage instead of defining the left panel as 285px
wide.
.leftcol {
width: 25%;
}
8. Why use it?
One URL.
M.brandname.com
One site to maintain.
Cater to the user
Utilize device capabilities
9. Why use it?
No Redirects for Mobile and Tablet
users.
Many brands maintain several mobile
and tablet sites.
The most overlooked benefit
Improve Load Times for mobile!
10.
11. Doing it wrong
Majority of Responsive
UX sites scale desktop
size images to mobile.
Avg. desktop
connection 3-5 mps.
3G speed - 795kps
12. Doing it wrong
2 Megabyte download
Desktop - 3MB/per sec
5 second download
Mobile - 720kb/per sec
21 second download
13. Methods to avoid
lag on mobile
Jquery Lazy loader
http://www.appelsiini.net/projects/lazyload
Default mobile size images.. switch for
desktop either via CSS3 or Javascript.
CSS Tricks 9 ways to switch images
http://css-tricks.com/css-image-
replacement/
14. Testing
Performance
Web Page Test
http://www.webpagetest.org/
Pingdom
http://tools.pingdom.com/fpt/
Blaze - mobile site performance
http://www.blaze.io/mobile/
15. Media Queries
/* iPads (portrait and landscape)
----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles for iPad go here */
}
16. Media Queries -
iPad 3
/* the ‘new’ iPads (portrait and
landscape) ----------- */
@media only screen
and (min-device-width : 1536px)
and (max-device-width : 2048px)
and (-webkit-min-device-pixel-ratio:2){
/* Styles for ‘new’ iPad go here */
}
27. Development Tips
Load time testing. Browser testing.
Modify interactions for the device
Take advantage of device features.
Store locator eliminated.