"Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

•

2 j'aime•1,839 vues

Blend Interactive

This document discusses responsive web design and provides tips for designing adaptively across devices. It recommends simplifying designs, creating live wireframes, designing a visual language, and sweating the details. It also suggests testing designs across devices and lists some design pattern resources. The goal is to create designs that adapt to different screen sizes and capabilities through a responsive approach.

Designing for the
Responsive Web

RESPONSIVE DESIGN:
“A design that adapts to the size
and capability of the device your
content is being view on.”

1. Simplify

Progressive enhancement

1. Simplify
2. Create live wireframes

DESIGN PATTERNS:
mobile-patterns.com
ui-patterns.com

3. Design a visual language

4. Sweat the details

Device Testing

Success!

Thank You!
Sam Otis | @sam_otis | sam@blendinteractive.com

Contenu connexe

Tendances

Cold logic makes a hard case for opting for mobile web apps over native ones. If you can build it in HTML, CSS, and javascript, then do, right? Except for the pesky little detail called the real world, where marketers demand apps, boardrooms pay for apps, and even worse, users seem to prefer them. Or do they? In this talk, Brian will try to reframe the web vs native vs hybrid debate into a conversation about what your customers really need, and what they’ll actually use. The technology you choose for your mobile approach is of strategic importance, but you need to be thinking about much more than just technology.

Mobile web vs. native apps: It's not about technology, it's about psychology

Mobile web vs. native apps: It's not about technology, it's about psychology

Mobile web vs. native apps: It's not about technology, it's about psychology

Slideshare

Ephesiany Francisco

Many Notes pitch for App Circus at BlackBerry 10 Jam 2012

Many Notes pitch for App Circus at BlackBerry 10 Jam 2012

Many Notes pitch for App Circus at BlackBerry 10 Jam 2012

Ми стоїмо на порозі нової ери - HTML5, якого так бояться Adobe та Microsoft. Один код, що працює під всіма платформами. Один набір зображень під всі роздільні здатності екранів. Мобільний Web. Мрія розробника! Проте чи завжди доречне використання HTML5? Коли, як і чому? Як зберегти юзабіліті програми на високому рівні? Цей огляд допоможе зробити вибір технології. Порівняння підходів та спроба побудувати універсальний патерн побудови інтерфейсу програми - мета цієї презентації.

Mobile UX - Dmytro Svarytsevych

Mobile UX - Dmytro Svarytsevych

Mobile UX - Dmytro Svarytsevych

Igor Bronovskyy

Mobile webapp

Dmytro Svarytsevych

Mobile Apps using Flex and ColdFusion

Mobile Apps using Flex and ColdFusion

Mobile Apps using Flex and ColdFusion

Responsive Web Design | Bside Studios

Responsive Web Design | Bside Studios

Responsive Web Design | Bside Studios

Chickens2

ABA TECHSHOW 2017: 60 tips in 60 minutes

ABA TECHSHOW 2017: 60 tips in 60 minutes

ABA TECHSHOW 2017: 60 tips in 60 minutes

Clio - Cloud-Based Legal Technology

Elearn mobile review discussion

Elearn mobile review discussion

Elearn mobile review discussion

Mobile web apps design

Mobile web apps design

Mobile web apps design

ZR_Datasheet_v141121a-prepress2

ZR_Datasheet_v141121a-prepress2

ZR_Datasheet_v141121a-prepress2

Intro To Mobile App Development

Intro To Mobile App Development

Intro To Mobile App Development

Perspective on Opera

Perspective on Opera

Perspective on Opera

Low Carbon Jargon

Beginning iOS Development with Swift

Beginning iOS Development with Swift

Beginning iOS Development with Swift

Native apps vs Web apps

Native apps vs Web apps

Native apps vs Web apps

Building successful mobile apps

Building successful mobile apps

Building successful mobile apps

Ajibola Aiyedogbon

Fitting content to domain

Fitting content to domain

Fitting content to domain

Ekta Rohra Jafri

Natural Language Interface for IoT Devices

Natural Language Interface for IoT Devices

Natural Language Interface for IoT Devices

Christopher Mohritz

Skype

Tendances (20)

Mobile web vs. native apps: It's not about technology, it's about psychology

Mobile web vs. native apps: It's not about technology, it's about psychology

Mobile web vs. native apps: It's not about technology, it's about psychology

Slideshare

Many Notes pitch for App Circus at BlackBerry 10 Jam 2012

Many Notes pitch for App Circus at BlackBerry 10 Jam 2012

Many Notes pitch for App Circus at BlackBerry 10 Jam 2012

Mobile UX - Dmytro Svarytsevych

Mobile UX - Dmytro Svarytsevych

Mobile UX - Dmytro Svarytsevych

Mobile webapp

Mobile Apps using Flex and ColdFusion

Mobile Apps using Flex and ColdFusion

Mobile Apps using Flex and ColdFusion

Responsive Web Design | Bside Studios

Responsive Web Design | Bside Studios

Responsive Web Design | Bside Studios

Chickens2

ABA TECHSHOW 2017: 60 tips in 60 minutes

ABA TECHSHOW 2017: 60 tips in 60 minutes

ABA TECHSHOW 2017: 60 tips in 60 minutes

Elearn mobile review discussion

Elearn mobile review discussion

Elearn mobile review discussion

Mobile web apps design

Mobile web apps design

Mobile web apps design

ZR_Datasheet_v141121a-prepress2

ZR_Datasheet_v141121a-prepress2

ZR_Datasheet_v141121a-prepress2

Intro To Mobile App Development

Intro To Mobile App Development

Intro To Mobile App Development

Perspective on Opera

Perspective on Opera

Perspective on Opera

Beginning iOS Development with Swift

Beginning iOS Development with Swift

Beginning iOS Development with Swift

Native apps vs Web apps

Native apps vs Web apps

Native apps vs Web apps

Building successful mobile apps

Building successful mobile apps

Building successful mobile apps

Fitting content to domain

Fitting content to domain

Fitting content to domain

Natural Language Interface for IoT Devices

Natural Language Interface for IoT Devices

Natural Language Interface for IoT Devices

Skype

Plus de Blend Interactive

Your website's not just designed for your audiences: it's designed for everyone. Which means it needs to be accessible to everyone. Often, accessibility falls into the hands of back- and front-end developers. But just as important is the ongoing maintenance of content within the CMS - the headings and images and alt tags and simple verbiage used to communicate your brand's message: a message that deserves to be seen and heard by everyone. In this talk, we will dive into what we can do as editors to help fuel more accessible websites, separating the code from the content and making clear the responsibilities we all have in making sure the web is a better place for everyone.

"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops ...

"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops ...

"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops ...

Blend Interactive

Your website's not just designed for your audiences: it's designed for everyone. Which means it needs to be accessible to everyone. Often, accessibility falls into the hands of back- and front-end developers. But just as important is the ongoing maintenance of content within the CMS - the headings and images and alt tags and simple verbiage used to communicate your brand's message: a message that deserves to be seen and heard by everyone. In this talk, we will dive into what we can do as editors to help fuel more accessible websites, separating the code from the content and making clear the responsibilities we all have in making sure the web is a better place for everyone.

"The Accessible Editor" by Corey Vilhauer, from DrupalCon 2018 in Nashville, ...

"The Accessible Editor" by Corey Vilhauer, from DrupalCon 2018 in Nashville, ...

"The Accessible Editor" by Corey Vilhauer, from DrupalCon 2018 in Nashville, ...

Blend Interactive

"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017

"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017

"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017

Blend Interactive

"Never Knowing Enough: dealing with the self doubt that hinders your success....

"Never Knowing Enough: dealing with the self doubt that hinders your success....

"Never Knowing Enough: dealing with the self doubt that hinders your success....

Blend Interactive

From Corey Vilhauer's workshop "Making things real: Content strategy for realistic content management" at Confab Intensive 2017 in Denver, Colorado. Everyone has a plan. Until reality sets in. You've seen it all before. A marketing team that's created unreasonable expectations. A designer who's looking to break barriers—without regard to the content model. The myth of personalization. The dangers of the completely customizable website. And now it's your job to bridge the gap between dreams and usable web programming. How do we take what we want and translate it into something usable? How do we take someone's ideas and turn them into a usable web implementation, navigating the constraints and pitfalls of project dreams, organizational bias, and unrealistic expectations? It's called "reification," and it's the act of making something real. We're not talking code. We're not talking CMS selection. We're simply talking about helping those we work with understand the content management landscape though a common language and practical questions. Let's take the best case scenario and get it closer to a real life scenario. Let's make things real.

"Making things real: Content strategy for realistic content management" - Con...

"Making things real: Content strategy for realistic content management" - Con...

"Making things real: Content strategy for realistic content management" - Con...

Blend Interactive

From Confab Central 2017 in Minneapolis, Minnesota - June 8, 2017 Everyone has a plan. Until reality sets in. You've done the interviews, and you’ve rallied the team, and now you have a dream. Here’s the thing: Your dream isn’t going to work. No dream ever does. Instead, your dream is going to cause disappointment and frustration, because it hasn’t been paired with the content management robots that will eventually serve and store your future website. How do we prepare our dreams so they can function within the cold world of web programming? How do we help teams understand the reality of content management, and set expectations accordingly? How do we balance the rigidity of a content model with the creative flow of a marketing team? More than anything, how do we get everyone on the same page—from ideation to CMS help text? It's called “reification,” and it's the act of making something real. We’re not talking code. We’re not talking CMS selection. We’re simply talking about helping those we work with understand the content management landscape through a common language and practical questions. Let’s take the best case scenario and get it closer to a real life scenario. Let's make things real. In this session, you’ll learn how to: * More effectively plan content projects for both the editors and the CMS. * Balance the complexity of a content model with the talents and efficiencies of the editorial team. * Account for structural needs while still maintaining discussion of messaging and overall branding. * Better communicate how content models affect the final usability of the CMS.

"Making things real: Content strategy for realistic content management" - Con...

"Making things real: Content strategy for realistic content management" - Con...

"Making things real: Content strategy for realistic content management" - Con...

Blend Interactive

Writing for the web is messy and complicated. As web content managers, we must weigh user needs against stakeholder demands, tight timelines, budget constraints, and more. We’re often thrown into projects that are already underway or lack a clear strategy. Our work is constrained by organizational pressures. In this workshop, we’ll talk about aligning content with project goals, creating a strategy that puts users first, and building products that can maintain momentum and success, even after we’re gone.

Getting Started With User-Centered Content by Emileigh Barnes & Kate Garklavs...

Getting Started With User-Centered Content by Emileigh Barnes & Kate Garklavs...

Getting Started With User-Centered Content by Emileigh Barnes & Kate Garklavs...

Blend Interactive

We all want to create useful, usable content—and we want to deliver that content to the right users. But how do we know what works? And how do we use these insights to inform and adapt our content strategy? What does success look like? Join us as we relate content goals to relevant and meaningful success metrics in order to quantitatively assess the quality of our web content and the efficacy of our content strategy. Say hello to positive change on the web! Join us and learn to: Translate strategic business objectives into measurable content goals Find the right metrics for the right goals (and how to avoid misleading metrics Measure and adapt your content strategy Effectively present analytics data to engage content stakeholders and inform their work on the web Configure Google Analytics to support your measurement plan Rick Allen has worked on the web his entire career to help shape communications and content strategy. Rick is co-founder of Meet Content, an online resource aiming to empower higher education to create and sustain web content that works. As principal of ePublish Media, Inc., a content strategy consultancy in Boston, Mass., Rick partners with organizations big and small to drive and sustain bold goals.

Content Measurement and Analytics: Making Positive Change on the Web by Rick ...

Content Measurement and Analytics: Making Positive Change on the Web by Rick ...

Content Measurement and Analytics: Making Positive Change on the Web by Rick ...

Blend Interactive

Taking up the cry against organizational silos can bring both empathy and cringing. Of course, silos are awful and keep us from doing our best work, but when you’re in the middle of a silo – and maybe that silo is inside ANOTHER silo – well, what’s a website manager to do? Based on her career among higher education’s ivory-tower silos, Amanda Costello brings together lessons from architecture and the Midwestern landscape to examine not only how to understand our silos, but to teach them a thing or two as well.

“How Silos Learn: Working in the Idea Factory” by Amanda Costello - Now What?...

“How Silos Learn: Working in the Idea Factory” by Amanda Costello - Now What?...

“How Silos Learn: Working in the Idea Factory” by Amanda Costello - Now What?...

Blend Interactive

In 2017, “adaptive content” has become a buzzword. To some, it’s a complex, long-term initiative to structure content for flexible reuse and dynamic targeting. To others, it’s a way to ensure that everyone, everywhere, sees exactly what they want—like magic! In this talk, Karen shares her perspective (and reservations) on how adaptive content is being used today. She’ll discuss how adaptive content supports targeting content to device type—and why that’s rarely necessary. She’ll also describe ways that adaptive content can support tailoring content according to context—and ways that can go wrong. You’ll walk away with a better understanding of when adaptive content is necessary and how to get the most value from it.

"Adaptive Content, Context, and Controversy

"Adaptive Content, Context, and Controversy

"Adaptive Content, Context, and Controversy

Blend Interactive

Search engine algorithms are always changing, it can feel impossible to keep up. But the goal behind every Google search result has always stayed the same—to give people exactly what they want and need. If that’s Google’s #1 goal, then why would we cater to search engines instead of working harder to make our audience happy? Great SEO that results in better visibility and higher conversions always maps back to the people behind the keywords. In this talk, Chris will show you practical SEO techniques and approaches you can use to make sure your content is helpful, relevant, and findable, too.

"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017

"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017

"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017

Blend Interactive

The temptation with video content is to do too much: too many stories, too many voices, too many seconds! Parsing a bigger message into smaller bites offers a flexibility to align with an integrated marketing strategy. But it’s not about speeding things up or cutting things out. Utilizing short form content effectively takes foresight, contingency planning and conceptual agility. In this session, Ravi Jain will walk through the creative process of harnessing the potential of short- form aggregate storytelling.

“The Beauty of Brevity” by Ravi Jain - Now What? Conference 2017

“The Beauty of Brevity” by Ravi Jain - Now What? Conference 2017

“The Beauty of Brevity” by Ravi Jain - Now What? Conference 2017

Blend Interactive

The content management implementation failure rate is higher than it should be, and projects seem to fail for the same cluster of reasons: unrealistic requirements, expectations, human factors, etc. In this session, Deane will discuss the major reasons for project failure learned through almost two decades of implementation experience, and discuss strategies and policies to put in place at each stage of the project to prevent them.

“Why Content Projects Fail” by Deane Barker - Now What? Conference 2017

“Why Content Projects Fail” by Deane Barker - Now What? Conference 2017

“Why Content Projects Fail” by Deane Barker - Now What? Conference 2017

Blend Interactive

Jake walked out of the conference room after meeting with Claire (VP of Engineering) and Sanjay (Design Director). He almost felt their glare burning a hole through his shirt. Jake had just sat through a hour-long meeting reviewing the user feedback from last year’s site launch. There had been reports of some accessibility issues for some time, but they’d been mostly ignored. The picture wasn’t getting any better: they were missing out on a lot of potential revenue by being hostile to people with disabilities. Jake pulled out his phone and sent a message to his team in Slack. “We’ve got some work to do” What was his next move? How did he begin the work and start to prioritize what needed to be done? How did he change the team’s process to include accessibility in EVERY post launch plan? Check in with Derek to find out what Jake and his team did next; you’ll learn what you need to do after a site launch to ensure your site is both accessible and easy to use by people with disabilities… and stays that way.

Not Perfect, "Always Better: A Story of Inclusion" by Derek Featherstone - No...

Not Perfect, "Always Better: A Story of Inclusion" by Derek Featherstone - No...

Not Perfect, "Always Better: A Story of Inclusion" by Derek Featherstone - No...

Blend Interactive

Content Design for Mobile Devices - Now What? Conference 2017

Content Design for Mobile Devices - Now What? Conference 2017

Content Design for Mobile Devices - Now What? Conference 2017

Blend Interactive

From MinneWebCon 2017 in Minneapolis, Minnesota - May 1, 2017 Everyone has a plan. Until reality sets in. You've done the interviews, and you've rallied the team, and now you have a dream. Here's the thing: Your dream isn't going to work. No dream ever does. Instead, your dream is going to cause disappointment and frustration, because it hasn't been paired with the content management robots that will eventually serve and store your future website. How do we prepare our dreams so they can function within the cold world of web programming? How do we take what we want and translate it into something usable? How do we take someone's ideas and turn them into a usable web implementation, navigating the constraints and pitfalls of project dreams, organizational bias, and unrealistic expectations? It's called "reification," and it's the act of making something real. We're not talking code. We're not talking CMS selection. We're simply talking about helping those we work with understand the content management landscape though a common language and practical questions. Let's take the best case scenario and get it closer to a real life scenario. Let's make things real.

"Making Things Real: Taking content strategy from abstract to functional" - M...

"Making Things Real: Taking content strategy from abstract to functional" - M...

"Making Things Real: Taking content strategy from abstract to functional" - M...

Blend Interactive

“Writing for Your Audience — The Message, the Words, the Plan” – Business Sen...

“Writing for Your Audience — The Message, the Words, the Plan” – Business Sen...

“Writing for Your Audience — The Message, the Words, the Plan” – Business Sen...

Blend Interactive

Functional concepts in C#

Functional concepts in C#

Functional concepts in C#

Blend Interactive

There are two big parts to content strategy: the people, and the process. But there's a third one that presents some of the industry's biggest struggles: managing the space between people and process—especially in an organization that is new to content strategy. In this talk, we will discuss managing expectations, projects, and people—within small teams, among changing organizations, and with new clients.

"The Self-Directed Strategist: Building a Practice and Managing Organizationa...

"The Self-Directed Strategist: Building a Practice and Managing Organizationa...

"The Self-Directed Strategist: Building a Practice and Managing Organizationa...

Blend Interactive

Imagine a future where siloed departments and legacy workflows don’t stand in our way. Today’s content is complex, interconnected, and needs to be ready for devices we haven’t even dreamed of yet. Tomorrow isn’t going to get any simpler. Successful outcomes demand a new kind of collaboration. For the past two years, Rebekah has studied how successful teams collaborate and has helped transform the way her team works and produces together. In this session, you’ll hear what she’s learned about making effective cross-discipline collaboration possible, and leave with actionable inspiration you can use to unite your team and workflow, too. This talk will show you: * What it takes to make effective collaboration possible * How you can play a key role in creating the cross-discipline teams of tomorrow * Practical tips you can use to bridge silos, increase productivity, and deliver better project outcomes for everyone From the 2016 Now What? Conference: www.nowwhatconference.com

Next Level Collaboration: The Future of Content and Design by Rebekah Cancino...

Next Level Collaboration: The Future of Content and Design by Rebekah Cancino...

Next Level Collaboration: The Future of Content and Design by Rebekah Cancino...

Blend Interactive

Plus de Blend Interactive (20)

"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops ...

"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops ...

"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops ...

"The Accessible Editor" by Corey Vilhauer, from DrupalCon 2018 in Nashville, ...

"The Accessible Editor" by Corey Vilhauer, from DrupalCon 2018 in Nashville, ...

"The Accessible Editor" by Corey Vilhauer, from DrupalCon 2018 in Nashville, ...

"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017

"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017

"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017

"Never Knowing Enough: dealing with the self doubt that hinders your success....

"Never Knowing Enough: dealing with the self doubt that hinders your success....

"Never Knowing Enough: dealing with the self doubt that hinders your success....

"Making things real: Content strategy for realistic content management" - Con...

"Making things real: Content strategy for realistic content management" - Con...

"Making things real: Content strategy for realistic content management" - Con...

"Making things real: Content strategy for realistic content management" - Con...

"Making things real: Content strategy for realistic content management" - Con...

"Making things real: Content strategy for realistic content management" - Con...

Getting Started With User-Centered Content by Emileigh Barnes & Kate Garklavs...

Getting Started With User-Centered Content by Emileigh Barnes & Kate Garklavs...

Getting Started With User-Centered Content by Emileigh Barnes & Kate Garklavs...

Content Measurement and Analytics: Making Positive Change on the Web by Rick ...

Content Measurement and Analytics: Making Positive Change on the Web by Rick ...

Content Measurement and Analytics: Making Positive Change on the Web by Rick ...

“How Silos Learn: Working in the Idea Factory” by Amanda Costello - Now What?...

“How Silos Learn: Working in the Idea Factory” by Amanda Costello - Now What?...

“How Silos Learn: Working in the Idea Factory” by Amanda Costello - Now What?...

"Adaptive Content, Context, and Controversy

"Adaptive Content, Context, and Controversy

"Adaptive Content, Context, and Controversy

"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017

"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017

"Empathy Behind the Algorithms" by Chris Corak - Now What? Conference 2017

“The Beauty of Brevity” by Ravi Jain - Now What? Conference 2017

“The Beauty of Brevity” by Ravi Jain - Now What? Conference 2017

“The Beauty of Brevity” by Ravi Jain - Now What? Conference 2017

“Why Content Projects Fail” by Deane Barker - Now What? Conference 2017

“Why Content Projects Fail” by Deane Barker - Now What? Conference 2017

“Why Content Projects Fail” by Deane Barker - Now What? Conference 2017

Not Perfect, "Always Better: A Story of Inclusion" by Derek Featherstone - No...

Not Perfect, "Always Better: A Story of Inclusion" by Derek Featherstone - No...

Not Perfect, "Always Better: A Story of Inclusion" by Derek Featherstone - No...

Content Design for Mobile Devices - Now What? Conference 2017

Content Design for Mobile Devices - Now What? Conference 2017

Content Design for Mobile Devices - Now What? Conference 2017

"Making Things Real: Taking content strategy from abstract to functional" - M...

"Making Things Real: Taking content strategy from abstract to functional" - M...

"Making Things Real: Taking content strategy from abstract to functional" - M...

“Writing for Your Audience — The Message, the Words, the Plan” – Business Sen...

“Writing for Your Audience — The Message, the Words, the Plan” – Business Sen...

“Writing for Your Audience — The Message, the Words, the Plan” – Business Sen...

Functional concepts in C#

Functional concepts in C#

Functional concepts in C#

"The Self-Directed Strategist: Building a Practice and Managing Organizationa...

"The Self-Directed Strategist: Building a Practice and Managing Organizationa...

"The Self-Directed Strategist: Building a Practice and Managing Organizationa...

Next Level Collaboration: The Future of Content and Design by Rebekah Cancino...

Next Level Collaboration: The Future of Content and Design by Rebekah Cancino...

Next Level Collaboration: The Future of Content and Design by Rebekah Cancino...

"Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

1. Designing for the Responsive Web

2. RESPONSIVE DESIGN: “A design that adapts to the size and capability of the device your content is being view on.”

3.

4.

5.

6.

8.

9.

10. Progressive enhancement

11.

12. 1. Simplify 2. Create live wireframes

13.

14.

15.

16. DESIGN PATTERNS: mobile-patterns.com ui-patterns.com

17. 3. Design a visual language

18.

19.

20.

21.

22. 4. Sweat the details

23.

24.

25.

26. Device Testing

28.

29. Thank You! Sam Otis | @sam_otis | sam@blendinteractive.com