This document provides an overview of responsive web design. It begins by noting the increasing diversity of devices used to access websites. It then introduces responsive web design as a solution, allowing one website to adapt to different screens through a flexible grid, flexible images and media, and media queries. Examples of responsive sites are shown. Some criticisms of the approach are addressed. The business case for a responsive approach is made. Finally, the document gets into the technical details of implementing a responsive design through flexible grids, images, and media queries. It provides code examples and tips for supporting older browsers. Frameworks to help with responsive design are also mentioned.
Responsive Web Design: One Size No Longer Fits AllPerficient, Inc.
Designing to allow an ever-increasing number of devices to access your website or web application is a game you can never win. There is arguably little business benefit to targeting less-widely used devices, yet web-accessible smartphones that aren't iPhones constitute a large group of users that is costly to ignore.
Responsive Web Design is a new approach to the design and execution of websites and web applications that offers a way to cater to a much wider array of users and devices than would be possible otherwise. Through the use of modern web standards and a thorough execution plan it is possible to create attractive, brand-aware user experiences that work across a wide range of devices - feature phones, smartphones, tablets, netbooks, laptops and desktop computers - without requiring expensive device-centric development.
This slideshow covers:
• Costs and benefits of Responsive Web Design
• Examples of large-scale responsive websites currently deployed
• When to consider a responsive approach to your project
• The skills your team should have, and the techniques they should be using, when designing responsively
Presentation from SES NY, 2012, by Avi Wilensky of Promediacorp, discussing UX, responsive web design and overall mobile SEO best practices and trends.
This is my keynote presentation delivered at the ReMIX conference in Vienna, Austria on Oct 1st 2009. The goal of the presentation is to explore the software development lifecycle through the eyes of a designer, developer, and architect.
Presentation by Allen Wirfs-Brock
Agile Portugal 2011, June 23, 2011
www.wirfs-brock.com/allen
@awbjs
One dimension of software agility is the ability to adapt to changing development technologies and infrastructure. Long-lived software systems may have to be adapted to several major technology changes over the course of their active use. Today, many project are increasing focused on web based applications that use web browsers as their primarily user interface. How durable is this application style going to be? Is the browser likely to continue to expand its primacy? Can we expect the basic structure of our web facing applications to remain fairly stable for the foreseeable future or do we need to be preparing to make drastic changes? If the browser is a transitional technology, what will replace it? In this talk I’ll explore these and related issues about what is likely to happen with web develop technologies over the next few years.
Den Multi Device Konsumenten zufrieden stellen …Connected-Blog
M-Days 2012
Stephan Haux
Director Product Management
Netbiscuits GmbH
Blog by Messe Frankfurt for the Digital Business:
http://connected.messefrankfurt.com/en/
Responsive Web Design: One Size No Longer Fits AllPerficient, Inc.
Designing to allow an ever-increasing number of devices to access your website or web application is a game you can never win. There is arguably little business benefit to targeting less-widely used devices, yet web-accessible smartphones that aren't iPhones constitute a large group of users that is costly to ignore.
Responsive Web Design is a new approach to the design and execution of websites and web applications that offers a way to cater to a much wider array of users and devices than would be possible otherwise. Through the use of modern web standards and a thorough execution plan it is possible to create attractive, brand-aware user experiences that work across a wide range of devices - feature phones, smartphones, tablets, netbooks, laptops and desktop computers - without requiring expensive device-centric development.
This slideshow covers:
• Costs and benefits of Responsive Web Design
• Examples of large-scale responsive websites currently deployed
• When to consider a responsive approach to your project
• The skills your team should have, and the techniques they should be using, when designing responsively
Presentation from SES NY, 2012, by Avi Wilensky of Promediacorp, discussing UX, responsive web design and overall mobile SEO best practices and trends.
This is my keynote presentation delivered at the ReMIX conference in Vienna, Austria on Oct 1st 2009. The goal of the presentation is to explore the software development lifecycle through the eyes of a designer, developer, and architect.
Presentation by Allen Wirfs-Brock
Agile Portugal 2011, June 23, 2011
www.wirfs-brock.com/allen
@awbjs
One dimension of software agility is the ability to adapt to changing development technologies and infrastructure. Long-lived software systems may have to be adapted to several major technology changes over the course of their active use. Today, many project are increasing focused on web based applications that use web browsers as their primarily user interface. How durable is this application style going to be? Is the browser likely to continue to expand its primacy? Can we expect the basic structure of our web facing applications to remain fairly stable for the foreseeable future or do we need to be preparing to make drastic changes? If the browser is a transitional technology, what will replace it? In this talk I’ll explore these and related issues about what is likely to happen with web develop technologies over the next few years.
Den Multi Device Konsumenten zufrieden stellen …Connected-Blog
M-Days 2012
Stephan Haux
Director Product Management
Netbiscuits GmbH
Blog by Messe Frankfurt for the Digital Business:
http://connected.messefrankfurt.com/en/
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...Holger Bartel
A primer on responsive design, various aspects on this technique, various examples, challenges and best practices in form of a case study of a past project as well as considerations and lessons learned.
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
With the continued movement of work around the world, and with the pressures for reduced travel, it's easy to find yourself interacting with co-workers who are only represented by electronic simulacra (voice, text, video, or avatars). What does this mean to human interaction, to trust, and to effective collaboration?
Mobile Development on a Shoestring ConnectionJenifer Hanen
Designing and developing mobile applications and responsive web sites when there are a variety of ways that a person can connect to the mobile web, as we can't assume unlimited data and wifi.
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)Mirko Lorenz
Data-driven journalism: Data in the newsroom
These are the slides from my talk at OK Con 2011. It provides a brief overview, then discussess barriers and challenges for data-journalism.
NOTE: This version is slightly edited, I primarily cleaned up missing image credits, etc. The message is the same.
CC-BY 3.0
BNC09: Dynamic Publishing Solutions - New Production Workflows - Gary CosiminiBookNet Canada
Migrating from binary file formats to XML will help maximize the reuse and distribution of content – text, images, audio and video – making the publishing process faster, more efficient and cost-effective. Gary Cosimini, Business Development Director for Adobe Systems’ Creative Solutions business unit, will discuss how publishers can realize the full potential of XML content management and retrieval, transforming their operations.
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...Holger Bartel
A primer on responsive design, various aspects on this technique, various examples, challenges and best practices in form of a case study of a past project as well as considerations and lessons learned.
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
With the continued movement of work around the world, and with the pressures for reduced travel, it's easy to find yourself interacting with co-workers who are only represented by electronic simulacra (voice, text, video, or avatars). What does this mean to human interaction, to trust, and to effective collaboration?
Mobile Development on a Shoestring ConnectionJenifer Hanen
Designing and developing mobile applications and responsive web sites when there are a variety of ways that a person can connect to the mobile web, as we can't assume unlimited data and wifi.
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)Mirko Lorenz
Data-driven journalism: Data in the newsroom
These are the slides from my talk at OK Con 2011. It provides a brief overview, then discussess barriers and challenges for data-journalism.
NOTE: This version is slightly edited, I primarily cleaned up missing image credits, etc. The message is the same.
CC-BY 3.0
BNC09: Dynamic Publishing Solutions - New Production Workflows - Gary CosiminiBookNet Canada
Migrating from binary file formats to XML will help maximize the reuse and distribution of content – text, images, audio and video – making the publishing process faster, more efficient and cost-effective. Gary Cosimini, Business Development Director for Adobe Systems’ Creative Solutions business unit, will discuss how publishers can realize the full potential of XML content management and retrieval, transforming their operations.
Our efforts behind Future Friendly as a philosophy and Responsive Web Design are twofold, to acknowledge and embrace unpredictability while focusing on audience needs, context and content, and staying ahead of what's coming around the corner next.
This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.
The JoomlaChicago Loop sponsored "Joomla & Responsive Design", a presentation focused on the key ingredients and dynamics of making a Joomla website flow and react to the different viewing devices and browser viewport sizes.
Dennis Kmetz (Director of Interactive Media, Taylor Bruce Design Partnership) presented Joomla & Responsive Design on Thursday, March 1, 2012.
Speed and Simplicity: Design and Usability for Multi-device WebsitesDoug Gapinski
We’ve entered the age of sequential and simultaneous browsing. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. Tablets and mobile remain hot topics for sales, use, and design. In an age where most users are accessing sites via multiple devices, top companies are focusing on fast and clean delivery of information.
This webinar focused on how new realities are changing web design, web design process, and usability standards.
Session Outline
• Ubiquitous computing, ubiquitous internet
• Sequential and simultaneous browsing
• The rise of the tablet
• Flat design for a lumpy web
• Speed matters
• Usability strategies
We’ve entered the age of sequential and simultaneous browsing. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. Tablets and mobile remain hot topics for sales, use, and design. In an age where most users are accessing sites via multiple devices, top companies are focusing on fast and clean delivery of information.
This webinar focused on how new realities are changing web design, web design process, and usability standards.
Session Outline
• Ubiquitous computing, ubiquitous internet
• Sequential and simultaneous browsing
• The rise of the tablet
• Flat design for a lumpy web
• Speed matters
• Usability strategies
Your web site needs to be accessible and usable for everyone even as the number of devices, platforms and browsers that are used to access it continue to expand every day. Incorporating a responsive web design represents a fundamental shift in how web sites are built now – and into the future.
Join Rick Wilson, President of Miva Merchant as he discusses the explosive growth in tablets and how you need to be making changes to your site now along with things you need to consider as you redesign your ecommerce web site in the future.
What the App? : A Modernization Strategy for Your Business ApplicationsJohn Head
Presented at IBM Connect 2016: It's 2016 – your application portfolio is being reviewed and scrutinized. Email and application platforms are being separated. Users' expectations of their work experiences are higher than ever. But you're invested in your Notes & Domino applications – what do you do? Looking through the lens of IBM ESS solutions, we will answer that question by providing a roadmap and experiences to help you choose the best path. We will deep dive into the five aspects of Application Modernization: User Experience, Social, Cloud, Mobile, & Modern Workflow. See demos of actual application transformations and the impact they have within an organization. Learn how new functionality in the products will make your journey easier.
Webinar Recording "Best Practices in RWD - Responsive Web Design"Sachin Katariya
Key Takeaways:
A> Understanding RWD: What exactly is Responsive Web Design – the philosophy, the concept
B> Techniques and tools for RWD - Details about Media queries and CSS as well as various frameworks and tools for creating RWD design
C> Advantages and Limitations in RWD
D> Conceptual Knowledge of Server Side Responsive Design (RESS)
Have Questions? - Please feel free to email sachink@harbingergroup.com
Sachin Katariya - Harbinger Systems
This presentation takes provides details on the latest design concepts and trends for Android and iOS UI/UX.
Under the hood: UI/UX Design stages
2014 Web Design Trends
Latest Technologies in Web Designing - Saas, Bootstrap, Yeoman, Compass
Benefits of using Latest Trends in Web Designing
Comparison between Old and New Trends in Web Designing
2014 Android Design Trends
Benefits of using Latest Trends in Android in Interface Design
Comparison between Older version Android and Android Kitkat
2014 iOS Design Trends
Benefits of using Latest Trends iOS UI Design
Comparison between iOS 6 and iOS 7
Good Design Tools & Expertise
PSEWEB 2013 - Make it responsive - TERMINALFOURTerminalfour
TERMINALFOUR Presentation by David Miller on the challenges of implementing responsive web sites - presented at the PSEWEB event in Vancouver - June 2013 www.pseweb.ca, www.terminalfour.com
We bridge the gap between technology and design
Your IT project should not suffer because of miscommunication.
Expect efficiency and positive attitude.
Need a ten minute overview of responsive web design? In this talk we'll talk about the problem responsive web design (RWD) is trying to solve, what RWD is, the basic implementation aspects of RWD and some of the latest developments and sources of information if you want to learn more about RWD.
Responsive Web design is the approach that suggests
that design and development should respond to the
user’s behavior and environment based on screen size,
platform and orientation. The practice consists of a mix
of flexible grids and layouts, images and an intelligent
use of CSS media queries. As the user switches from
their laptop to iPad, the website should automatically
switch to accommodate for resolution, image size and
scripting abilities. In other words, the website should
have the technology to automatically respond to the
user’s preferences. This would eliminate the need for a
different design and development phase for each new
gadget on the market.
Similar to Getting Down & Dirty with Responsive Web Design (20)
Falcon stands out as a top-tier P2P Invoice Discounting platform in India, bridging esteemed blue-chip companies and eager investors. Our goal is to transform the investment landscape in India by establishing a comprehensive destination for borrowers and investors with diverse profiles and needs, all while minimizing risk. What sets Falcon apart is the elimination of intermediaries such as commercial banks and depository institutions, allowing investors to enjoy higher yields.
Explore our most comprehensive guide on lookback analysis at SafePaaS, covering access governance and how it can transform modern ERP audits. Browse now!
Remote sensing and monitoring are changing the mining industry for the better. These are providing innovative solutions to long-standing challenges. Those related to exploration, extraction, and overall environmental management by mining technology companies Odisha. These technologies make use of satellite imaging, aerial photography and sensors to collect data that might be inaccessible or from hazardous locations. With the use of this technology, mining operations are becoming increasingly efficient. Let us gain more insight into the key aspects associated with remote sensing and monitoring when it comes to mining.
Skye Residences | Extended Stay Residences Near Toronto Airportmarketingjdass
Experience unparalleled EXTENDED STAY and comfort at Skye Residences located just minutes from Toronto Airport. Discover sophisticated accommodations tailored for discerning travelers.
Website Link :
https://skyeresidences.com/
https://skyeresidences.com/about-us/
https://skyeresidences.com/gallery/
https://skyeresidences.com/rooms/
https://skyeresidences.com/near-by-attractions/
https://skyeresidences.com/commute/
https://skyeresidences.com/contact/
https://skyeresidences.com/queen-suite-with-sofa-bed/
https://skyeresidences.com/queen-suite-with-sofa-bed-and-balcony/
https://skyeresidences.com/queen-suite-with-sofa-bed-accessible/
https://skyeresidences.com/2-bedroom-deluxe-queen-suite-with-sofa-bed/
https://skyeresidences.com/2-bedroom-deluxe-king-queen-suite-with-sofa-bed/
https://skyeresidences.com/2-bedroom-deluxe-queen-suite-with-sofa-bed-accessible/
#Skye Residences Etobicoke, #Skye Residences Near Toronto Airport, #Skye Residences Toronto, #Skye Hotel Toronto, #Skye Hotel Near Toronto Airport, #Hotel Near Toronto Airport, #Near Toronto Airport Accommodation, #Suites Near Toronto Airport, #Etobicoke Suites Near Airport, #Hotel Near Toronto Pearson International Airport, #Toronto Airport Suite Rentals, #Pearson Airport Hotel Suites
Attending a job Interview for B1 and B2 Englsih learnersErika906060
It is a sample of an interview for a business english class for pre-intermediate and intermediate english students with emphasis on the speking ability.
What is the TDS Return Filing Due Date for FY 2024-25.pdfseoforlegalpillers
It is crucial for the taxpayers to understand about the TDS Return Filing Due Date, so that they can fulfill your TDS obligations efficiently. Taxpayers can avoid penalties by sticking to the deadlines and by accurate filing of TDS. Timely filing of TDS will make sure about the availability of tax credits. You can also seek the professional guidance of experts like Legal Pillers for timely filing of the TDS Return.
3.0 Project 2_ Developing My Brand Identity Kit.pptxtanyjahb
A personal brand exploration presentation summarizes an individual's unique qualities and goals, covering strengths, values, passions, and target audience. It helps individuals understand what makes them stand out, their desired image, and how they aim to achieve it.
Taurus Zodiac Sign_ Personality Traits and Sign Dates.pptxmy Pandit
Explore the world of the Taurus zodiac sign. Learn about their stability, determination, and appreciation for beauty. Discover how Taureans' grounded nature and hardworking mindset define their unique personality.
Buy Verified PayPal Account | Buy Google 5 Star Reviewsusawebmarket
Buy Verified PayPal Account
Looking to buy verified PayPal accounts? Discover 7 expert tips for safely purchasing a verified PayPal account in 2024. Ensure security and reliability for your transactions.
PayPal Services Features-
🟢 Email Access
🟢 Bank Added
🟢 Card Verified
🟢 Full SSN Provided
🟢 Phone Number Access
🟢 Driving License Copy
🟢 Fasted Delivery
Client Satisfaction is Our First priority. Our services is very appropriate to buy. We assume that the first-rate way to purchase our offerings is to order on the website. If you have any worry in our cooperation usually You can order us on Skype or Telegram.
24/7 Hours Reply/Please Contact
usawebmarketEmail: support@usawebmarket.com
Skype: usawebmarket
Telegram: @usawebmarket
WhatsApp: +1(218) 203-5951
USA WEB MARKET is the Best Verified PayPal, Payoneer, Cash App, Skrill, Neteller, Stripe Account and SEO, SMM Service provider.100%Satisfection granted.100% replacement Granted.
"𝑩𝑬𝑮𝑼𝑵 𝑾𝑰𝑻𝑯 𝑻𝑱 𝑰𝑺 𝑯𝑨𝑳𝑭 𝑫𝑶𝑵𝑬"
𝐓𝐉 𝐂𝐨𝐦𝐬 (𝐓𝐉 𝐂𝐨𝐦𝐦𝐮𝐧𝐢𝐜𝐚𝐭𝐢𝐨𝐧𝐬) is a professional event agency that includes experts in the event-organizing market in Vietnam, Korea, and ASEAN countries. We provide unlimited types of events from Music concerts, Fan meetings, and Culture festivals to Corporate events, Internal company events, Golf tournaments, MICE events, and Exhibitions.
𝐓𝐉 𝐂𝐨𝐦𝐬 provides unlimited package services including such as Event organizing, Event planning, Event production, Manpower, PR marketing, Design 2D/3D, VIP protocols, Interpreter agency, etc.
Sports events - Golf competitions/billiards competitions/company sports events: dynamic and challenging
⭐ 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐝 𝐩𝐫𝐨𝐣𝐞𝐜𝐭𝐬:
➢ 2024 BAEKHYUN [Lonsdaleite] IN HO CHI MINH
➢ SUPER JUNIOR-L.S.S. THE SHOW : Th3ee Guys in HO CHI MINH
➢FreenBecky 1st Fan Meeting in Vietnam
➢CHILDREN ART EXHIBITION 2024: BEYOND BARRIERS
➢ WOW K-Music Festival 2023
➢ Winner [CROSS] Tour in HCM
➢ Super Show 9 in HCM with Super Junior
➢ HCMC - Gyeongsangbuk-do Culture and Tourism Festival
➢ Korean Vietnam Partnership - Fair with LG
➢ Korean President visits Samsung Electronics R&D Center
➢ Vietnam Food Expo with Lotte Wellfood
"𝐄𝐯𝐞𝐫𝐲 𝐞𝐯𝐞𝐧𝐭 𝐢𝐬 𝐚 𝐬𝐭𝐨𝐫𝐲, 𝐚 𝐬𝐩𝐞𝐜𝐢𝐚𝐥 𝐣𝐨𝐮𝐫𝐧𝐞𝐲. 𝐖𝐞 𝐚𝐥𝐰𝐚𝐲𝐬 𝐛𝐞𝐥𝐢𝐞𝐯𝐞 𝐭𝐡𝐚𝐭 𝐬𝐡𝐨𝐫𝐭𝐥𝐲 𝐲𝐨𝐮 𝐰𝐢𝐥𝐥 𝐛𝐞 𝐚 𝐩𝐚𝐫𝐭 𝐨𝐟 𝐨𝐮𝐫 𝐬𝐭𝐨𝐫𝐢𝐞𝐬."
Accpac to QuickBooks Conversion Navigating the Transition with Online Account...PaulBryant58
This article provides a comprehensive guide on how to
effectively manage the convert Accpac to QuickBooks , with a particular focus on utilizing online accounting services to streamline the process.
Enterprise Excellence is Inclusive Excellence.pdfKaiNexus
Enterprise excellence and inclusive excellence are closely linked, and real-world challenges have shown that both are essential to the success of any organization. To achieve enterprise excellence, organizations must focus on improving their operations and processes while creating an inclusive environment that engages everyone. In this interactive session, the facilitator will highlight commonly established business practices and how they limit our ability to engage everyone every day. More importantly, though, participants will likely gain increased awareness of what we can do differently to maximize enterprise excellence through deliberate inclusion.
What is Enterprise Excellence?
Enterprise Excellence is a holistic approach that's aimed at achieving world-class performance across all aspects of the organization.
What might I learn?
A way to engage all in creating Inclusive Excellence. Lessons from the US military and their parallels to the story of Harry Potter. How belt systems and CI teams can destroy inclusive practices. How leadership language invites people to the party. There are three things leaders can do to engage everyone every day: maximizing psychological safety to create environments where folks learn, contribute, and challenge the status quo.
Who might benefit? Anyone and everyone leading folks from the shop floor to top floor.
Dr. William Harvey is a seasoned Operations Leader with extensive experience in chemical processing, manufacturing, and operations management. At Michelman, he currently oversees multiple sites, leading teams in strategic planning and coaching/practicing continuous improvement. William is set to start his eighth year of teaching at the University of Cincinnati where he teaches marketing, finance, and management. William holds various certifications in change management, quality, leadership, operational excellence, team building, and DiSC, among others.
1. NT102: Getting Down and Dirty
with Responsive Web Design
Martin Ridgway, Perficient - Lead User Experience Designer
2. About Perficient
Perficient (perficient.com) is a leading information technology consulting firm
serving clients throughout North America. We help clients implement business-
driven technology solutions that integrate business processes, improve worker
productivity, increase customer loyalty and create a more agile enterprise to better
respond to new business opportunities.
3. Perficient Solutions, Expertise and Services
Business-Driven Solutions Perficient Services
Enterprise Portals End-to-End Solution Delivery
SOA and Business Process Management IT Strategic Consulting
Business Intelligence IT Architecture Planning
User-Centered Custom Applications Business Process & Workflow Consulting
CRM Solutions Usability and UI Consulting
Enterprise Performance Management Custom Application Development
Customer Self-Service Offshore Development
eCommerce & Product Information Package Selection, Implementation and
Management Integration
Enterprise Content Management Architecture & Application Migrations
Industry-Specific Solutions Education
Mobile Technology
Security Assessments
Perficient brings deep solutions expertise and offers a complete set of flexible
services to help clients implement business-driven IT solutions
4. Perficient XD
STRATEGY & RESEARCH CREATIVE & INNOVATION &
IDEATION & ANALYSIS INTERACTION DESIGN IMPLEMENTATION
• Envisioning Workshops • Contextual Inquiry/Interviews • Visual Design • Search Engine Optimization
• Industry Trend Forecasting • Brand Identity Assessment & • Information Architecture & • UI Development
• Media Research Analysis Competitive Benchmarking Interaction Design • Mobile Development
• Strategies for: • User Profiles and Personas • Mobile Design • Emerging Platforms
• Digital Campaigns • Card Sorting for Information • Digital Publishing
• Brand Loyalty & eCRM Architecture • Marketing Campaigns and
• Social Media & • Heuristic Evaluation & Content
Governance Usability Testing
• Content & Engagements • Iterative Prototype Design
• Web & Campaign Analytics
• Mobile
CAMPAIGNS
SOCIAL MOBILE
& CONTENT
6. What we’ll be covering today
• There’s something big on the
horizon
• What we can do - just what is
Responsive Web Design
anyway?
• Examples please - show me
this new hotness
• Drawbacks and criticisms – it’s
not all roses, right?
• The business case for
Responsive Web Design
• Down and dirty with the code
– implementing a Responsive
Web Design
8. J E F F R E Y V E E N SAYS :
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows.”
(He founded Adaptive Path as well as Typekit, and has worked for Google. He’s clever. Take heed.)
11. The landscape’s getting more diverse
With each passing day, the way society uses
the Internet changes:
As of February 2012,
• There are 1.2 billion mobile Web users
worldwide
• Mobile devices account for 8.49% of
global website hits
• Many mobile Web users are mobile-only
And by 2015,
• Paying by mobile will be worth over $1
trillion
• Mobile commerce will reach $119
billion
• US mobile commerce will be worth $31
billion
Source: MobiThinking - http://bit.ly/a2f9uO
16. LU C K I LY, M Y F R I E N D * J E F F SAYS :
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows.
Responsive Web Design represents a fundamental shift in how we’ll build websites for the decade to come.”
* may not really be my friend
(Told you he’s clever)
18. A responsive example
Responsive websites
adapt (and respond) to
their environment.
Same site, different
experiences.
19. Or, to put it another way
One website, many screens
20. Why?
• One solution to rule them all
• One codebase means one set of metrics for all users
• A responsive design allows for greater consistency of brand across
all experiences
21. How?
Be pragmatic!
• Review your traffic logs and determine what mobile devices are
accessing your site today
• Test your site on those devices and determine where the
experience breaks down
• Develop an action plan to address common issues, such as:
• Content that is only accessible when a user hovers over something
• Controls that are too small to manipulate on touch screens
• Popup (or modal) windows that are unusable on small screens
• A lot of heavy graphics and media
29. Why not Responsive Web Design?
3 reasons not to:
1. Load time
2. Integration with 3rd party applications
3. The big one…
More time, more effort and therefore more money
than building a desktop site ONLY
31. The business case
Less time, less effort and therefore less money
to build responsively, than building separate experiences for desktop iPhone and iPad
iPhone site
Time to develop
iPad site vs
A responsive website that
works with every device
Desktop site
(and that’s just for the desktop and two other devices!)
33. L I K E JA KO B N I E L S E N * FO R E X A M P L E
* photograph may actually be Leslie Nielsen
34. JA KO B * , T H I S I S BA D A DV I C E
“Good mobile user experience requires a different design than what's needed to satisfy desktop users.
Two designs, two sites, and cross-linking to make it all work.”
* photograph may still actually be Leslie Nielsen Source: http://www.useit.com/alertbox/mobile-vs-full-sites.html
35. Responses to Nielsen
Serious Not-so serious
“About 25 per cent of the people
who use the mobile web only use a
mobile browser. They never use a
desktop computer. These users are
disproportionately low
income, black, and Hispanic.”
- Karen McGrane, UX professional
Source: http://bit.ly/HNvjFB
36. Conclusions
• Does a responsive approach align to our site’s objectives?
• Do our users expect a similar version of the website on their
phone as they do on their computer?
• Do we have the time and the resources to do it?
39. The Theory
Responsive Web Design is 3 things
• A flexible grid
• Flexible images and media
• Media queries
- Ethan Marcotte
Source: http://www.alistapart.com/articles/responsive-web-design
54. Media queries – browser support
• Works in all major browsers…
…with the exception of Internet Explorer 8 and below
So what do we do about old IE?
• Don’t worry about it!
• …seriously you guys. Don’t.
55. An example CSS file supporting older browsers
/* default styles go here,
stuff for older IE, etc */
@media screen and (min-width:480px) {
/* mobile device media query */
}
@media screen and (min-width:768px) {
/* tablet device media query */
}
@media screen and (min-width:960px) {
/* desktop media query (for new browsers) */
}
61. “Stay committed to your decisions,
but stay flexible in your approach.”
- Tom Robbins, novelist
Editor's Notes
Day by day, the number of devices, platforms and browsers that need to work with your site grows – Jeffrey VeenVeen is a founding partner of Adaptive Path. He’s worked for Google, and is the founder of Typekit, an easy solution to use real fonts on the Web.Which is a long way of saying, this guy’s been around the block a few times, and he knows whereof he speaks.
Remember this quote? I was disingenuous before, because I only showed you half of it.“Day by day, the number of devices, platforms and browsers that need to work with your site grows. Responsive Web Design represents a fundamental shift in how we’ll build websites for the decade to come.”Yeah, decade. That’s a loooooong time in Web terms. A decade ago Internet Explorer 6 was the most popular browser in the world, and Facebook hadn’t been invented. So if we’re talking about a technique that can change the way we build websites for a whole decade, that’s gotta be some pretty serious technology, right?
That was a quick section, right?Well, ok. There are a few issues. Nothing comes for free, and a new technique like this is bound to have its share of potential problems. Many of them can be mitigated with careful planning, but be aware: Not every website is a candidate for responsive web design. The fact is, many times the objectives of the desktop version of a website just aren’t the same as those of the mobile version.
Think about Yelp.com for example. If I’m on the go, I use Yelp to look for nearby restaurants, bars, etc. I’m not looking to leave a review (in all likelihood), and I’m probably looking in my local area. So the mobile version of the site gives me a stripped down view, it uses location services to know where I am, and it presents that information to me quickly and cleanly. If I want to view the full site from my mobile device I can – the option to do so is as the bottom of the screen – but 9 times out of 10 the mobile version suits me just fine.Contrast that with the desktop version of the site. Much more emphasis on leaving reviews, of browsing, and of choosing the metropolitan area I want to focus on. Two different experiences, and dissimilar enough that responsive design wouldn’t do it justice.Oh, and by the way, if you’re ever in Houston, go to Lankford Grocery. Best hamburgers in town. And the Thursday lunch special is chicken fried steak. To die for.Now, Yelp’s an extreme example. I happen to believe the vast majority of websites would benefit from a responsive design approach. But, let’s look at some problems that approach faces…
There are 3 popular reasons given not to choose responsive web design. I categorize these as slightly different to the Yelp example, because whereas I believe that is a justifiable reason to develop a different solution based on the needs of the user, the criticisms on this page are – by and large – not a reason NOT to design responsively.Load time – A popular misconception of responsive web design is this: “When I load a responsive site, I’m essentially loading the desktop version of the website, and then hiding or resizing items that I either don’t want to see, or deem to be less important than on the desktop version.” Though technically true, this is one of those “drawbacks” that isn’t a drawback at all, as the industry has already moved on. What we’re doing now is something called “mobile first” – a subset of responsive design that builds up from the mobile version, as opposed to building the desktop version and scaling down. So what does that mean for load times? Well, now a mobile device will only ever download what it needs and will ignore (most) everything else, meaning the website is snappy and loads quickly. A desktop browser accessing the site will download what it needs, so it’s also snappy. Everyone’s happy!Integration with 3rd party apps – This could be a sticking point. Let’s take advertising blocks as an example. There are standard ad sizes, set in pixels, that are universally understood on the Web. But a responsive web design recommends a designer to think outside of the context of pixels. So what to do? The ads can be shrunk, just like any responsive image, but what about when there’s a block of 4 ads in a grid on a desktop site? How does that translate to the mobile view of the site? Do we linearize the ads? If so, are the advertisers who are paying for the spots aware that their ads are now further away from the top of the page (still a concern for advertisers)? Communication is vital in these kinds of scenarios.Then there’s the biggest obstacle of all…I’m not going to lie to you guys. It takes more effort, more time, and more money to design a site responsively than to build just a fixed-width, standard desktop website, because building a responsive website is a slightly more complex endeavor than not.
But here’s the thing…
It’s much cheaper to design and build a responsive website than it is to design and build separate websites for desktop, iPad and iPhone. And we’re only talking about targeting 3 devices in total here! What about all those other devices that are out there? Start factoring those in, and suddenly responsive web design becomes a very attractive option.
Now, just like with every new technique, there are going to be detractors. And responsive web design has gained one very big detractor indeed…
On April 10, 2012 Jakob Nielsen – one of the pioneers of web usability, and a leading figure in the field of Experience Design – published an article about mobile vs desktop sites. In it, he issued a proclamation that was wrong in almost every way. He said:
“Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.”His article goes on to say that what we should be doing is providing not just separate websites, but cut-down content for mobile users, and – worse still! – auto-directs to mobile sites. When I say auto-directs, I mean when you visit a site on your mobile device, you are automatically taken to the mobile version of that site. Whether you want to go there or not. Now, to give Nielsen credit, he does say there should always be a link back to the desktop version, but this all seems a bit clunky to me.However, here’s my overarching problem with Nielsen’s advice: “The notion that you should create a separate, stripped-down version for 'the mobile use case' might be appropriate if a clean mobile use case existed, but it doesn't.”Nielsen’s article assumes the myth of the mobile user: A distracted, on-the-go user who ingests information in seconds-long bite-size chunks. That’s not the whole story, not by a long shot. Nielsen is confusing device context with user intent. All we know about mobile users is they’re on a small screen. We cannot divine their intent from that. I know I sit for hours on my phone or tablet when I’m waiting at the airport. I’m browsing. Leisurely. I’m anything-but “on-the-go”! Stripping a website back simply because I happen to be browsing from a smaller device is akin to a book author stripping out chapters from the paperback version of her latest bestseller because it happens to be a smaller form-factor than the hardback version!
A couple of responses to Nielsen’s article, one serious, one hilarious.McGrane goes on to say, “Jakob's recommendation that mobile sites should cut content and features relegates these users to second-class citizens. He suggests that the mobile-only user should get sites optimized for 'the mobile use case', which doesn't exist if your mobile browser is your only browser. We should strive to make the web accessible for all users.”If this issue interests you, I encourage you to read both Nielsen’s original article, and some of the response articles, of which the link in this slide is but one.
With good communication, all the obstacles I talked about can be overcome.But these conclusions should be in the forefront of your minds when talking about responsive web design…1. Does a responsive approach align to our site’s objectives?2. Do our users expect a similar version of the website on their phone as they do on their computer?3. Do we have the time, the resources (and most importantly) the money to do it?I’d assume that point 2 will pretty-much always be true, but it’s worth keeping in the back of your mind if you intend to become the next Yelp. However, if all these points line up, we’re a go for a responsive approach.
But here’s the thing…
I have nothing further to add to this slide’s epicness.
Responsive Web Design is a term coined by Ethan Marcotte in his seminal A List Apart article, the link is on this slide. In it, he laid out the three principles for Responsive Web Design: A flexible (or fluid if you prefer) grid; flexible images, or images that work in a flexible context; and media queries to bring the whole shebang together. Read that article. It’s 2 years old now, but the principles laid out have paved the way for an entirely new way of looking at web design and development.And read this book, also by Marcotte. It’s short, just like all the A Book Apart titles, and a truly great resource for all things responsive.
The following slides contain math.
This is a wireframe of a basic web page. Our wrapper is 960px wide, and inside that we have a centered element called main that is 900px wide. For the sake of simplicity in this first example, we’re going to assume that’s it. Nothing else exists on this page.Now, normally in our CSS we would specify the widths of those two elements, wrap and main in pixels. But this is a responsive design, and we want to be flexible. So what we do instead is use the following little equation to determine our widths.
But here’s the thing…
For the purposes of this example, we’re going to assume that our target is main. Our context is wrap. So target (900) divided by context (960) equals 0.9375. Multiply that by 100 to give us our percentage width for main, which is 93.75. So, main will always be 93.75% the width of wrap, no matter how much we shrink or expand our screen size.
Expressing that in our CSS is simple…The important line is in black. The rest of the CSS is to give that line some context. So we’ve set wrap to be 95% of its context’s width (in this case, the context for wrap is the browser window, because nothing else surrounds it). And we’ve centered both wrap and main horizontally with the margin statement.The main block has our width specified as a percentage, so it will always be 93.75% of the width of wrap. If wrap is 960px wide, that means main will be 900px wide. When I’m writing CSS for a responsive design, I like to put the calculation in a comment right next to the relevant line of CSS. It makes coming back to the code later a whole lot easier.Now, that’s kind of a simple example. Not many websites these days are one-column like that. So, let’s make this a bit more real-world in our next example.
Remember, Target divided by Context equals Result. So in the case of the block called “pri” (short for primary), it’s 660px in our comp, and its context is its immediate surrounding container, ie “main”.Sec (short for secondary) is 220px wide in our comp, and its context is again its immediate surrounding container, which is also main. So we divide target by context to get our results.
Our CSS for those two blocks is pretty straightforward, as it turns out. Don’t be put off by the large number of decimal places. Division like this tends to lead to a lot of long numbers.In order to get the two blocks to float next to one another I’ve added a float left to the primary column, and a float right to the secondary content.As an aside, naming your content sections becomes even more important when designing responsively. In the previous slide, I could have called the two columns “leftcol” and “rightcol”. But what happens when you shrink the screen down, and leftcol is now stacked above rightcol? Your naming convention makes no sense.So, now we’ve seen what can be done in laying out the largest elements of your page. But the concept of flexible grids doesn’t just apply to those big content areas. We can apply the technique to just about anything that we place on our page. After all, everything on the Web is a block.
The small squares could be thumbnails in a gallery. So in this case, our calculation would be thumb as the target, pri as the context. So 180 divided by 660, which equals 0.27 etc, multiplied by 100 to give us our percentage width for each thumbnail. But what about the margin between the thumbnails? Well, that can be expressed as a percentage too. And how would all that come together in our CSS?
Again, we’re floating each of our thumbnails left, and expressing the width of them as a percentage of their context, ie, the element on the page that contains them. And as you can see, we can also express the margin in the same way.
OK, a previous example used elements called thumb to illustrate our responsive grid. Thing is, those thumb elements probably contain images, and we all know images are a set number of pixels wide and pixels high. There’s not a whole lot we can do to change that, right? So our images will be a fixed width within our flexible thumb container. They’ll overflow the container as the screen size gets smaller, and our beautiful page will break, right?Wrong.This bit’s so easy, I’m going to give you a bit of background first…We were taught for years that in order to give our users the fastest possible experience, we should include widths and heights in our img element declarations. There’s a lot of technical information as to why, but basically it boiled down to making sure the browser only has to do one pass when it renders the page, meaning the page loads as fast as possible, If we didn’t include the widths and heights, the browser had to do a second pass to finalize how the page looks when it loads the images in. That’s much less of a problem now than it was a few years ago as browser technology has improved significantly.So, to go back to what we should do for our images to make them responsive?Step 1: Strip out those width and height attributes. Leave the alt attribute though. It’s important for accessibility reasons, even if it’s empty!Step 2: Add this little snippet of CSS. img max width 100%.Step 3: Profit!And that’s it. You’ve just made all your images responsive! When you resize a page, your images will shrink down and maintain their aspect ratio properly, and when you expand back up, they’ll grow, but only to 100% of their size, so you won’t end up with horribly pixellated images. Told you this bit was easy!
To apply the same flexibility to other types of media as we have to images, all we do is extend our previous CSS declaration to the other media types. And make sure we don’t specify any of their widths or heights in our HTML either!Now we have a truly flexible page, which is great, and is the foundation of responsive design. But our final piece brings it all together.
CSS is phenomenally powerful. Using just CSS we can apply unique styles to different screen sizes, all with one statement.The text in black is our media query. We have to begin by saying this media query applies only when we’re talking about styles for the screen (as opposed to print styles, which would be in a separate media query starting with “at media print”). Then we use a CSS declaration, min-width (we could also use max-width…or to set an explicit range we can use both: styles should be applies where min-width is 480px and max-width is 768px, for example. But here, we’re keeping things simple. We’re saying that the styles contained within this media query should only be applied when we’re on a screen, and the minimum-width of that screen is 960px.
We can chain multiple conditions together in order to more selectively apply styles. Here we’re targeting screens with a minimum width of 768px and are oriented to landscape view. By its very nature, this limits this particular media query to probably only target tablet devices in landscape mode.
What about browser support for this stuff?
Browser support for all this stuff is fantastic. All current versions of every major browser support media queries. Yes, even the venerably Internet Explorer, long the butt of web design jokes, has really stepped it up with IE9. And IE10 looks like it’s going to be a phenomenal browser!But what about older versions of browsers? Well, excluding IE for a moment, every other browser has supported media queries for about 5 years now. So it’s safe to use.A lot of people still use older versions of IE, and you may be thinking, “Sure, all this sounds awesome, but we’re still on IE7. What use is all this to us?” To which I answer, yes, but 1. Your customers probably aren’t. And 2. for anyone that is still on an older browser, why not just serve them up a version of the site without all the media queries?Here’s how.
Just specify all your default styles, and the stuff you’d like to override later, in your CSS file BEFORE any of the media queries. Browsers ignore that which they don’t understand, so older versions of IE will read and understand everything down to the first media query, then ignore the rest. That way, you can safely use all of this new technology in every single browser available today.
You guys are busy. You just want to get on with things! And anyway, who creates stuff from scratch these days, right?A disclaimer – I haven’t used all of these, and they’re not recommendations. There are plenty more frameworks out there. Just search for “responsive framework”.
If there’s one thing you take away from this presentation, let it be this quote. Stay committed to your decisions, but stay flexible in your approach. That to me encapsulates the essence of responsive web design, and how we use it in our projects.I hope you guys have gained something from this webinar. Whether that’s a new technique, or gaining an insight into just why responsive web design is such a good business case. Or maybe you’ve learned that any PowerPoint slide, no matter how dull, can be livened up with the addition of a funny image downloaded from the Internet.Whatever the case, it’s been a pleasure to present today. In the time we have left, I’ll be happy to take any questions you may have.