We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byKenneth Durk
Modified over 2 years ago
Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners
1.2 Billion mobile web users worldwide 25% in the U.S. are mobile-only
So Why? Why did smartphone sales take off so suddenly?
Why the iPhone? Mainly, ease of use It was designed as a consumer product Blackberry was designed with business users in mind
90% of all websites are not mobile ready 50% of business websites are not mobile ready
Anywhere from 20%-100% increased conversation rate after optimizing for mobile
the old way: Design for the desktop first, then scale and trim the content to fit on a phone. (graceful degradation)
the new way: Design for the phone first, then expand and enhance the site up to the full sized version. (progressive enhancement)
Sounds like you end up in the same place… So, whats the difference?
desktop first: cutting away fat mobile first: adding spice
mobile first: constraints (and why they are a good thing)
Smaller Screen Size
Uh oh. 1024x768 320x480
80% gone, and thats awesome!
Some of that content is probably not important. If all the important content does not fit...
An example Luke Wroblewski credit to:
This is great. They should have started here.
How do we know what to cut out? Know your users and what they need.
Not all mobile devices are 320x480. *gasp*
There are a wide variety of screen sizes. This isnt a new problem. Weve seen it on the desktop for years.
The real problem: Pixel Density
original icon scaled icon retina ready icon
Content must be focused. Make it Easy and Fast. Dont make me think! -Steven Krug
Optimize for Speed. Delays and hiccups are extremely detrimental to conversion rates.
mobile first is about focus. Decide what is important at the beginning of a project.
Responsive design is powered by CSS Media Queries
Requires more forethought and planning than traditional layout, especially for the designer(s). Easier to maintain... One Site. One Set of Links. Works best for content focused sites.
RWD is probably not the best choice for web apps. Sites with Specific Workflows or a big E-Commerce elements work better with custom tailored mobile sites.
‘Mobile first’ Alexander Roberts ISS Web Team Manager Swansea University.
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
Responsive Web Designing Using CSS3 & HTML5 -Sandip Jadhav “We are building a web, for all device ”
GO MOBILE. GO RESPONSIVE. 185 mil mobile internet users in India <35yrs Values convenience more 17% Check on Smartphone India Statistics on Mobile.
10 Mobile Application Framework Must Know to Launch New App.
Responsive Design What it is and why you need it.
RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).
Part II: New Developments in RWD. Background RWD is constantly evolving. Designers continue to refine RWD theory and practice. New tools are constantly.
Beyond apps Stephen Pinches Group Product Manager – Emerging Platforms.
A “new-ish” web design methodology Addresses growing number of Internet devices Tailored experience to any device Limits resizing, panning.
WRA 210 – SS2014 RWD1 : CSS Media Queries. Responsive? Responsive Web Design… Means that a web site works optimally well for users regardless of the device.
Mobile Devices Lesson 11. Objective: The challenges of designing for mobile devices Using CSS3 media queries Converting a fixed width layout to a single.
Coding a Responsive HTML
SEO & Mobile J OHN K ARP – S ENIOR C AMPAIGN D IRECTOR.
A Quick Introduction. What are QR Codes? Two dimensional barcodes that can be read using smartphones and QR reading devices. These barcodes link directly.
Going Mobile According to the Mobile Marketing Association, more people worldwide own mobile devices than own a toothbrush…roughly 90% of the American.
Responsive Web Design Design websites so that they can adapt to different devices seamlessly. Image by Muhammed RafizeldiMuhammed Rafizeldi.
Developing Content for Mobile Devices Larry D. Lee Web Developer for K4Health.
Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.
| imodules.com Making Your Site Mobile-Ready Presented by: Mark Werner & Chris Smith.
Recession Reversal 5 Marketing Marvels That Will Have You Thriving... While Your Competition Wonders What Happened...
DESIGNING FOR MOBILE Lunch & Learn Series | February 20, 2014.
Responsive Web Design Nuts & Bolts David Weedon - UI/UX Designer, Covenant Technology Partners.
A seminar on “Mobile Version of The Website”
IWebKit Easy to use framework Available free for non- commercial use New version under development.
What is jQuery Mobile? How to use it? Doncho Minkov Telerik Corporation Technical Trainer.
Basics of testing mobile apps
Barry Dworak Elizabeth Allen. Size Resolution Pointing - Precise mouse versus variable fingertip sizes User moving - User at desk, focused versus doing.
RESPONSIVE WEB DESIGN NYU Webmaster Meetup, October 3 rd, 2014.
Being Responsibly Responsive Jason
The Future of Mobile Marketing Lee Mueller University of Montana Integrated Online Marketing 420.
Portable Device Operating Systems. Portable Device OS Portable devices use scaled down operating systems, which are smaller than those found in notebook.
Mobile at USC Common Solutions Group University of Minnesota, June 2011.
1 Company Confidential Need a Mobile DotNetNuke Site? Get One the Quick and Easy Way Using CSS Media Queries Amelia Marschall Partner & Creative Director.
Ron Cariker President - 7 Media Group text 7MG to 55678
1 Responsive Design Gilbane Boston 28 November Peter Marsh SVP, Sales & Marketing Atex Group Ltd.
Responsive (Mobile) Design What is this? Why Should You Care?
Moving from Web-based Collaboration to the Mobile Arena Nimrod Geva Product Group Manager, KWizCom
RESPONSIVE AND MOBILE DESIGN BY: CHRIS PASQUARETTE APRIL, 2013.
310KM M-Commerce Application Selection of Mobile Platform Group 4 Choy Chun Lung, Lawrence Hui Yiu Ting, Eddy Chan Ki Yin, CKY Liu Tsz Ping, Scott.
SharePoint Mobile Improving efficiency of the mobile workforce Anthony Pham Product Support Manager KWizCom
Responsive design - Bedrock to our site Responsive site templates included.
MOVE FORWARD WITH MOBILE AGEND A Why the mobile web is now a must What Google has to say about all this Best practices for mobile What are my options?
LESSON 15 – UNIT 0 ADAPTING YOUR WEB SITE FOR MOBILE DEVICES.
Lloyd-Jamie Bennett – P Stylianos Michael – P
Enterprise Mobility ‘Mobile First’ strategy for your Business
Web Design & Development Your Dream Site - Our Labor Of Love.
EMBRACE THE MOBILE MIND SHIFT. MOBILE GROWTH IS ASTONISHING Never try to change people’s behavior. Always meet your users and customers where they are.
MOBILE STRATEGY IN PUBLIC RELATIONS How to Be Mobile Ready for Your Campaigns.
© 2017 SlidePlayer.com Inc. All rights reserved.