Presentation to:
Madison Web Design & Development Meetup - February 11, 2013.
Web Content Mavens, Washington, DC - January 8, 2013.
NYC Web Design Meetup -January 24, 2013.
Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.
A talk members of the Forum One Communications UX team gave at UXCampDC 2013. The focus was on some pain points we hit while trying to wrap our brains around Responsive Design and the tool we've made to help sketch solutions more easily and quickly.
Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to build responsive designs.
Mobile first responsive web design is the best way to build something that is both responsive from a layout AND a performance perspective.
But if mobile first is the right way to do responsive design, then why are so few people doing it? In this presentation, we’ll dig into why mobile first responsive design matters and the five techniques necessary to make it work.
Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.
A talk members of the Forum One Communications UX team gave at UXCampDC 2013. The focus was on some pain points we hit while trying to wrap our brains around Responsive Design and the tool we've made to help sketch solutions more easily and quickly.
Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to build responsive designs.
Mobile first responsive web design is the best way to build something that is both responsive from a layout AND a performance perspective.
But if mobile first is the right way to do responsive design, then why are so few people doing it? In this presentation, we’ll dig into why mobile first responsive design matters and the five techniques necessary to make it work.
Mobile is all the rage these days — and it should be. Many website owners believe creating a separate mobile website is the solution, with browser sniffing to redirect all "mobile" traffic to a separate m.example.com domain. But it turns out that most of the time this is a terrible solution. Come hear Jen Simmons talk about how there's only one web — not a mobile web separate from the desktop web. And learn how you can use HTML5 and responsive web design to create one unified website or web app for your project and Just Have It Work™ on a wide range of devices.
Adapting to Input — Smashing Conference NYCJason Grigsby
Responsive Web Design has forced us to accept that we don't know the size of our canvas, and we've learned to embrace the squishiness of the web. Input, it turns out, is every bit as challenging as screen size. We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers.
In this session, Jason will guide you through the input landscape, showing you new forms of input like sensors and voice control, as well as new lessons about old input standbys. You'll learn the design principles necessary to build web sites that respond and adapt to whatever input people use.
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
WordPress and the Enterprise DisconnectJohn Eckman
While the WordPress community rightly celebrates powering > 24% of the web, Enterprise customers have a drastically different perspective.
How can we more effectively sell Enterprise clients on the benefits of WordPress, without losing the ease of use and simplicity that has made WordPress great?
Uncle Sam Wants You (To Optimize Your Content For Mobile)Karen McGrane
President Obama recently directed all government agencies to optimize their content for mobile, saying "Americans deserve a government that works for them anytime, anywhere, and on any device." Government has a responsibility to make its content available to all Americans equally. What about your organization? If the government has mandated its agencies to develop a content strategy for mobile, isn't it time you did too?
In this session, Karen will discuss why it's important to think holistically about publishing your content in whatever channel or device your customer wants to consume it — and what the risks are in not making content accessible to mobile users. Already convinced it's important? She'll also explain how to get started with your mobile content strategy, defining what you want to publish, what the relationship should be between your mobile and desktop site, and how your editorial workflow and content management tools need to evolve.
Mobile is all the rage these days — and it should be. Many website owners believe creating a separate mobile website is the solution, with browser sniffing to redirect all "mobile" traffic to a separate m.example.com domain. But it turns out that most of the time this is a terrible solution. Come hear Jen Simmons talk about how there's only one web — not a mobile web separate from the desktop web. And learn how you can use HTML5 and responsive web design to create one unified website or web app for your project and Just Have It Work™ on a wide range of devices.
Adapting to Input — Smashing Conference NYCJason Grigsby
Responsive Web Design has forced us to accept that we don't know the size of our canvas, and we've learned to embrace the squishiness of the web. Input, it turns out, is every bit as challenging as screen size. We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers.
In this session, Jason will guide you through the input landscape, showing you new forms of input like sensors and voice control, as well as new lessons about old input standbys. You'll learn the design principles necessary to build web sites that respond and adapt to whatever input people use.
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
WordPress and the Enterprise DisconnectJohn Eckman
While the WordPress community rightly celebrates powering > 24% of the web, Enterprise customers have a drastically different perspective.
How can we more effectively sell Enterprise clients on the benefits of WordPress, without losing the ease of use and simplicity that has made WordPress great?
Uncle Sam Wants You (To Optimize Your Content For Mobile)Karen McGrane
President Obama recently directed all government agencies to optimize their content for mobile, saying "Americans deserve a government that works for them anytime, anywhere, and on any device." Government has a responsibility to make its content available to all Americans equally. What about your organization? If the government has mandated its agencies to develop a content strategy for mobile, isn't it time you did too?
In this session, Karen will discuss why it's important to think holistically about publishing your content in whatever channel or device your customer wants to consume it — and what the risks are in not making content accessible to mobile users. Already convinced it's important? She'll also explain how to get started with your mobile content strategy, defining what you want to publish, what the relationship should be between your mobile and desktop site, and how your editorial workflow and content management tools need to evolve.
In 2010, New York State used paper ballots for the first time. This presentation offers a design concept for how NY ballots can use the design guidelines in the EAC ballot templates to make New York State ballots more readable, while still working within current election law.
Design mockup by Drew Davies, Oxide Design Co. and AIGA Design for Democracy
Analysis and presentation by Whitney Quesenbery, WQusability and UPA Usability in Civic Life
Full transcript available here: https://karenmcgrane.com/talks/adapting-ourselves-to-adaptive-content/
For years, we've been telling designers: the web is not print. You can't have pixel-perfect layouts. You can't determine how your site will look in every browser, on every platform, on every device. We taught designers to cede control, think in systems, embrace web standards. So why are we still letting content authors plan for where their content will "live" on a web page? Why do we give in when they demand a WYSIWYG text editor that works "just like Microsoft Word"? Worst of all, why do we waste time and money creating and recreating content instead of planning for content reuse? What worked for the desktop web simply won't work for mobile. As our design and development processes evolve, our content workflow has to keep up. Karen will talk about how we have to adapt to creating more flexible content.
Color is one of the first things we learn how to do in CSS — and yet many of us don't ever go further than typing hex numbers handed to us by a designer. But getting colors to appear on a screen is just the beginning. Find out why colors look different on different devices, and what you can do about it. Learn how to adjust colors with media queries to make sure your colors look their best on any screen size. Find out how user context may affect the appropriate colors for a website. And finally, learn how you can make this whole color thing a lot less complicated by using a CSS preprocessor like Sass to manage your color choices and create color variations automatically.
Presented in 2015 & 2016 at Amazon's WebDevCon, ConFoo, Breaking Development, Mobile+Web Dev Conference, Code Fellows Seattle, CascadiaFest, CSS Summit, CSS Brigade Vancouver, CSS Day Amsterdam, Future Insights Live, WebVisions NYC, and Albany UX.
Friends, a zombie apocalypse is upon us: an onslaught of new mobile devices, platforms, and screen sizes, hordes of them descending every day. We're outmatched. There aren't enough designers and developers to battle every platform. There aren't enough editors and writers to populate every screen size. Defeating the zombies will require flexibility and stamina—in our content. We'll have to separate our content from its form, so it can adapt appropriately to different contexts and constraints. We'll have to change our production workflow so we're not just shoveling content from one output to another. And we'll have to enhance our content management tools and interfaces so they're ready for the future. Surviving the zombie apocalypse is possible. In this talk Karen will explain how: by developing a content strategy for mobile.
Your content is the most important feature of your website, so it's important to make sure that the text looks good and is easy to read no matter what device type or screen size it's being viewed on. One size does not fit all when it comes to typography, but you can use media queries to adjust type qualities such as size, line height, column width, margins, hyphenation, and even typeface depending on the viewport size. Learn how you can use CSS to apply design rules that will make your typography look better and perform better across devices. You'll also find out how typography affects the loading time of your website, and what you can do to improve performance.
Presented in 2015 at ConFoo and Albany UX. Presented in 2014 at WebVisions Chicago, Blend Conference, Frontend Conference Zurich, Refresh Ottawa, Mobile+Web Dev Conference, STC Summit, Bmoresponsive, ConvergeSE, and Girl Geeks Montreal.
Expert Strategy ™ Series Virtual Seminar Presentation
1 hour 30 minutes, Presentation + Q&A. Wednesday, May 16th, 10 am PDT.
* Create “Magic Moments” in your own mobile and tablet app.
* Learn the new Cross Channel UX Design framework.
* Take advantage of all sensors and capabilities of the mobile platform
http://www.designcaffeine.com/virtual-seminars/designing-magic-mobile-moments/
You don't get to decide which device people use to access your content: they do. By 2015, more people will access the internet via mobile devices than on traditional computers. In the US today, one-third of people who browse the internet on their mobile phone say that's the only way they go online—for teens and young adults, those numbers are even higher. It's time to stop avoiding the issue by saying "no one will ever want to do that on mobile; "chances are, someone already wants to. In this session, Karen will discuss why you need to deliver content wherever your customer wants to consume it — and what the risks when you don't make content accessible to mobile users. Already convinced it's important? She'll also explain how to get started with your mobile content strategy, defining what you want to publish, what the relationship should be between your mobile and desktop site, and how your editorial workflow and content management tools need to evolve.
Content Strategy for Responsive Websites: By Clarissa Peterson gives a presentation about the differences in understanding the concept of responsive websites…
This is a short slide show that goes throught the history of cell phone technology and how it has progressed through the mobile marketing stage into the machine it has become.
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016Anna Dahlström
Slides from my talk at UX Ireland on 10 November 2016
http://uxireland.net/sessions/index.php?session=108
Abstract:
From myths to trends and best practice, actual usage, engagement, design patterns and interactions - in this session, I will go through the insights behinds the stats and take a look at the reality behind mobile and what really matters when designing for multiple devices.
According to the Pew Research Center's Cell Internet Use 2013 survey, 57% of all American adults use their cell phone to access the Internet or use e-mail. The International Data Corporation projects that tablets will outsell PCs overall by 2015. It is very likely that an increasing percentage of the visits to your business or practice website are originating from a mobile device. How can you build a web presence that meets the needs of all of your site visitors without breaking your budget? Learn about the latest trends in web development to answer that question.
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Jack Zheng
For the most recent version please visit:
https://www.edocr.com/v/k52p5vj4/jgzheng/Mobile-Web-Overview
I have developed the mobile web development course and modules for some courses in KSU/SPSU. This is overview module to introduce the whole field. Topics include choices of mobile application development and delivery, basic principles and best practices of mobile friendly web sites and web applications, and major tools and frameworks.
Mobilism 2011: How to put the mobile in the mobile webJenifer Hanen
Media queries, server-side or client-side sniffers, how do we determine if the user is a mobile or desktop device? This tech talk will discuss which is the right solution(s) and how to implement it taking into consideration the various mobile user's browser capacity, bandwidth restrictions, as well as user choice.
Jenifer Hanen
@msjen
http://blackphoebe.com/msjen
Alt text is one of the key components that will make your website more accessible to users with disabilities. But alt text is more than just describing what you see in an image. It needs to consider context, and make sure that screen reader users are supplied all the same information that is available to visual users.
Designing for Users: How to Create a Better User ExperienceClarissa Peterson
You can launch the best-looking website ever, but if it’s not easy to use, it’s not going to be successful. Learn to think like a user and uncover usability problems that might not be apparent at first glance. Find out some basic improvements you can implement to make your site more usable and accessible. User experience isn’t just for designers to think about: everyone who works on a website has the opportunity to make the user experience better. Even little changes can make a big difference.
Presented at WordCamp Calgary, OpenWest, Web Unleashed, ThunderPlains, and ConFoo Vancouver in 2017. Presented at ConFoo Montreal in 2018.
Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson
Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages — but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens.
Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.
Your website's users want to get stuff done, and you probably aren't making it easy for them. When users encounter forms with unnecessary steps, content that requires too many clicks to access, or things that just don't make sense, they often give up. In this talk, you’ll see some practical examples of sites that do a good job of making interactions and content easy to follow and understand, and you'll learn how to help your users get to where they want to be without annoying them on the way there.
Presented in 2016 at ConFoo.
A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014.
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.
Although responsive web design has only been around for a few years, it's grown up a lot since first we started talking about fluid grids and media queries. Now, we look to responsive design with the goal of providing a good experience for every user on every device. From the DC Web Women Code(Her) Conference, 9/13/14.
Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site.
Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
35. “There is no Mobile Web. There is only
The Web, which we view in different
ways. There is also no Desktop Web. Or
Tablet Web.”
– Stephen Hay
@stephenhay
62. “Mobile use case: I just transferred
money at my desk using my phone
because logging into my banking app
requires fewer steps.”
– Stephanie Rieger
@stephanierieger
91. Books
Content Strategy for Mobile
Karen McGrane (2012)
http://www.abookapart.com/products/content-strategy-for-mobile
Responsive Web Design
Ethan Marcotte (2011)
http://www.abookapart.com/products/responsive-web-design/
Content Strategy for the Web, 2nd Ed.
Kristina Halvorson & Melissa Rach (2012)
http://contentstrategy.com/
92. Articles
Responsive Web Design - Ethan Marcotte (May 2010)
http://www.alistapart.com/articles/responsive-web-design/
Responsive-Ready Content - Sara Wachter-Boettcher (March 2012)
http://sarawb.com/2012/03/07/content-strategy-responsive-design/
How to Approach a Responsive Design (Boston Globe) - Tito Bottitta (Jan. 2012)
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Design Process In The Responsive Age - Drew Clemons (May 2012)
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Dive into Responsive Prototyping with Foundation - Jonathan Smiley (April 2012)
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
93. A Few More Examples of Responsive Design
Boston Globe http://www.bostonglobe.com
Smashing Magazine http://www.smashingmagazine.com
People (mobile site) http://m.people.com
Disney http://disney.com/
Mashable (beta) http://beta.mashable.com/
Stuff & Nonsense http://www.stuffandnonsense.co.uk/
Google Nexus http://www.google.com/nexus/
Hotellweb http://www.hotellweb.no/?lang=en_US
Andersson-Wise Architects http://www.anderssonwise.com
WordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/