What is the lifespan of a website, and when is it time to redesign? Let's explore the signs your site may be dying, ways to keep it alive, and the difference between a redesign vs realign.
When designing a website, do you think about accessibility for your mobile users? This presentation explains why you should think mobile first when designing your website and tools that can help you.
#ProdTank - Mobile Conversion, June 2013Dave Martin
Product managers should embrace mobile to ease the users pain and increase conversion. Learnings from mobile should be tested and transfered to desktop.
This talk went back to basics to illustrate how putting additional effort into the areas that appear obvious and easy can achieve true simplicity and deliver high values.
The technology buzz word around mobile is currently Responsive Web Design we talked about the benefits and short comings of RWD. An adaptive or RWD 2.0 approach might be more valuable to some companies.
Email is a big deal, and one of the most important ways to connect with your audience. With the majority of people now reading email on mobile devices, creating robust responsive templates is no longer an option. Unfortunately email design is still considered a dark art, and its steep learning curve can be daunting. In this talk, I present email design techniques that make the task of developing for email more simple, along with strategies for optimizing user experience in email clients that will get those emails read.
No matter what the content, subscribers interact with email messages across a dizzying variety of apps, devices, programs and platforms. In fact, 50% of emails are viewed on a mobile device. How can you ensure an effective email experience across a range of screen sizes? This presentation discusses how to find out who is opening your emails on mobile, the implications of various screen sizes and operating systems, along with common pitfalls and easy wins for optimizing email for mobile devices.
This presentation will teach you:
- Examples and key best practices
- Strategies for approaching mobile-friendly emails
- Actionable advice to take back to your team and implement right away
This presentation was developed by Justine Jordan, Director of Research and Education at Litmus, and was given at NEDMA's 2014 DM Innovations Symposium.
In a word where 50% of emails are opened on a mobile device and 80% of consumers delete emails that look bad on smartphones, it's crucial to account for fat fingers and small screens. Through this presentation, you will learn how to find out who is opening your emails on mobile, the implications of various screen sizes and operating systems, and easy wins for optimizing email for mobile devices.
his presentation was given by Justine Jordan, Director of Research & Education at Litmus, at NEDMA's Annual Conference on May 14, 2014.
Why Nobody Fills Out My Forms 2 - Electric BoogaloAndrew Malek
Still having difficulty encouraging people to fill out web forms to sign up for newsletters, apply for jobs, or complete their online shopping orders? Find out even more tips to help keep people from abandoning early, such as making form field widths more convenient, easing credit card entry, grouping related fields into sections to promote scanning, and styling buttons and controls so your webpage does not look like it was written in 2000.
My "Integrated Mobile Marketing Strategy" presentation from SES London. Topics: Mobile SEO, QR codes, Social WiFi, Shazam Ads, Click-to-Call, and more.
Don't Make Me Think is a book by Steve Krug about human-computer interaction and web usability. The book's premise is that a good software program or web site should let users accomplish their intended tasks as easily and directly as possible.
Invited talk given at the Google Local Ads Forum in London and Hamburg. Setting the stage about where we're at with local, why local is often thought to be hard and how far we have to go.
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
What is the lifespan of a website, and when is it time to redesign? Let's explore the signs your site may be dying, ways to keep it alive, and the difference between a redesign vs realign.
When designing a website, do you think about accessibility for your mobile users? This presentation explains why you should think mobile first when designing your website and tools that can help you.
#ProdTank - Mobile Conversion, June 2013Dave Martin
Product managers should embrace mobile to ease the users pain and increase conversion. Learnings from mobile should be tested and transfered to desktop.
This talk went back to basics to illustrate how putting additional effort into the areas that appear obvious and easy can achieve true simplicity and deliver high values.
The technology buzz word around mobile is currently Responsive Web Design we talked about the benefits and short comings of RWD. An adaptive or RWD 2.0 approach might be more valuable to some companies.
Email is a big deal, and one of the most important ways to connect with your audience. With the majority of people now reading email on mobile devices, creating robust responsive templates is no longer an option. Unfortunately email design is still considered a dark art, and its steep learning curve can be daunting. In this talk, I present email design techniques that make the task of developing for email more simple, along with strategies for optimizing user experience in email clients that will get those emails read.
No matter what the content, subscribers interact with email messages across a dizzying variety of apps, devices, programs and platforms. In fact, 50% of emails are viewed on a mobile device. How can you ensure an effective email experience across a range of screen sizes? This presentation discusses how to find out who is opening your emails on mobile, the implications of various screen sizes and operating systems, along with common pitfalls and easy wins for optimizing email for mobile devices.
This presentation will teach you:
- Examples and key best practices
- Strategies for approaching mobile-friendly emails
- Actionable advice to take back to your team and implement right away
This presentation was developed by Justine Jordan, Director of Research and Education at Litmus, and was given at NEDMA's 2014 DM Innovations Symposium.
In a word where 50% of emails are opened on a mobile device and 80% of consumers delete emails that look bad on smartphones, it's crucial to account for fat fingers and small screens. Through this presentation, you will learn how to find out who is opening your emails on mobile, the implications of various screen sizes and operating systems, and easy wins for optimizing email for mobile devices.
his presentation was given by Justine Jordan, Director of Research & Education at Litmus, at NEDMA's Annual Conference on May 14, 2014.
Why Nobody Fills Out My Forms 2 - Electric BoogaloAndrew Malek
Still having difficulty encouraging people to fill out web forms to sign up for newsletters, apply for jobs, or complete their online shopping orders? Find out even more tips to help keep people from abandoning early, such as making form field widths more convenient, easing credit card entry, grouping related fields into sections to promote scanning, and styling buttons and controls so your webpage does not look like it was written in 2000.
My "Integrated Mobile Marketing Strategy" presentation from SES London. Topics: Mobile SEO, QR codes, Social WiFi, Shazam Ads, Click-to-Call, and more.
Don't Make Me Think is a book by Steve Krug about human-computer interaction and web usability. The book's premise is that a good software program or web site should let users accomplish their intended tasks as easily and directly as possible.
Invited talk given at the Google Local Ads Forum in London and Hamburg. Setting the stage about where we're at with local, why local is often thought to be hard and how far we have to go.
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
Designing Websites With a Mobile First ApproachDan Moriarty
Learn about designing and building your website to be mobile first, meaning you begin at the smallest screen size available. Make your design, content, and planning decisions here, and then enhance and expand to the desktop
It is essentially a mobile optimized website, designed to make become faster to load and easier to use on mobile devices like Smartphones and Tablets. Moreover, the m. website can be designed to be more attractive, more user-friendly and more inviting.
Thank you for joining in! Where is a very big chance that you are curious about mobile apps and looking to find out more about it or maybe even start designing one on your own. Or, you are a mobile developer, who wants to improve your skills in mobile app design and learn awesome stuff which could definitely improve your app?
If so - that’s exactly what we’re going to do with this presentation! I’m going to help you take your first step towards the great looking and user-friendly mobile app design!
That’s what this presentation is about: taking an idea from a rough concept to a polished experience that your users will love.
Handheld apps that work by touch require you to design not only how your pixels look, but how they *feel* in the hand. This workshop explores the ergonomic challenges and interface opportunities for designing mobile touchscreen apps. Learn how fingers and thumbs turn desktop conventions on their head and require you to leave behind familiar design patterns. The workshop presents nitty-gritty "rule of thumb" design techniques that together form a framework for crafting finger-friendly interface metaphors, affordances, and gestures for a new generation of mobile apps that inform and delight. This is an intermediate to advanced workshop aimed at designers, developers, and information architects making the transition from desktop to touchscreen apps for mobile and tablet devices.
What will you learn?
■Discover the ergonomic demands of designing for touch.
■Find out how the iPad's form and size create unique design considerations.
■Devise interface metaphors that invite touch.
■Design gesture interactions, and learn techniques to help people discover unfamiliar gestures on their own.
■Learn why buttons are a hack and how to design interfaces without traditional UI controls.
■Train in gesture jiujitsu, the dark art of using awkward gestures for defensive design.
■Explore the psychology behind screen rotation and the opportunities and pitfalls it creates.
Know thy interaction – How interaction is changing what we create on the webnolly00
Interaction on the web has progressed at a fascinating rate over the last few years. I’ll be looking back at this evolution, how we can learn from the past and at some of the most inspiring interaction work being developed at the moment.
I’ll also take a look at the future and what could be shaping our interaction experiences in the years to come.
An analysis of the trends in the web platform to help you plan, prepare and build for a better web. We'll go into ways to analyse trend data to help you learn more effectively about the platform, and we'll go into tools you'll need to make intelligent decisions when deciding on feature levels and browser support.
Carousel30: Optimizing for the mobile user experience whitepaperCarousel30
White paper by digital agency Carousel30 on how to optimize your mobile user experience through choosing the correct approach for your website, using responsive design or mobile apps.
Making simple, elegant solutions is HARD and often invisible. These are some of the most common things I hear come out of people’s mouths when heading for a bad UX decision.
How to Create a Great Mobile App ExperienceChris Beaman
Chris Beaman outlines some of the keys to creating a fantastic mobile application experience. He discusses wireframes, creating something different, making conversion as simple as possible and more.
This is a presentation that I did on mobile and tablet usage and how it has grown over there years, and how web designers and clients have had to keep up with the times so to speak and create website that was easy for consumers to access their websites easily and without a problem on all handheld devices.
5 compelling reasons your website should be responsiveDesignveloper
5 compelling reasons your website should be responsive
There is no doubt that it’s the age of mobile devices now. I know it sounds ridiculous but more people in this world own smartphones than toothbrushes. Mobile seems to become everything surrounding us from doing business, checking email, shopping or even playing game.
Because of that insanely increase of mobile devices, it’s a must for any kind of business to have a website that is mobile friendly. Actually, it’s not a big problem. Usually, we have a website designed for desktop users and another one specifically developed for mobile users. But, the question is “Is is possible to have a website that can use for both desktop and mobile?”. Absolutely, it can! Responsive web design comes to your rescue.
4. If you’ve visited websites on a smartphone like an iPhone, you’re
probably used to seeing the regular desktop version of a website shrunk
down to a small size.You have to zoom in to read any of the text.
5. And you’ve seen websites that have a separate mobile version.
You don’t have to zoom on your mobile phone, but you also
may not get all of the content that’s on the full website.
6. One Website
On a responsive website, the browser responds to the size of the screen and
displays the content in a way that it is appropriate for that screen size. But it’s only
one website, one set of code, one set of content. Not separate websites.
7. It makes more sense if I show you. This is The Boston Globe
website, which launched a responsive redesign in 2011. At the
time, it was the largest responsive web design project to date.
8. This is the site at the narrowest width: what you would see on your
smartphone. The text is all full size, you don’t need to zoom in to read.
9. As you make the website wider, the content expands to fill the space.
10. Now there’s enough room for the content to move
into two columns. It’s the exact same content, though.
11. At desktop width, there is now room for everything to rearrange
into three columns.You can see a lot more without scrolling, but it’s
the same content as you see on a mobile phone.
12. Looking at the site in more detail, you’ll notice that
there isn’t a full navigation at the top of the page.
13. But if you click on “Sections,” you’ll get a drop-
down menu of the sections of the website.
15. At this slightly wider size, the content has expanded to make use
of the full screen, and you can also see that the items in the
header have been rearranged to take advantage of the space.
16. There’s still a drop-down menu for the Sections navigation,
but now the navigation items are in two columns instead of
one. Again, this is to take advantage of the extra space.
17. There isn’t enough room for the search box to appear at the top of
the page. So instead there’s a search icon, and when you click on it…
20. Now we’re at about the size of a tablet, and there’s enough room
for two columns. Additionally, the search box in the header now
appears by default, you don’t need to click to get it.
21. You still need to click the Sections link to see the navigation.
22. At this width, there’s enough room for three columns. Additionally, the full Sections
navigation appears at the top; you don’t need to click to see the navigation items.
23. As we go even wider, things expand to take advantage of the extra
room, including the picture at the top left. The picture continues to
be the full width of the column even as the column gets wider.
24. At a full desktop width, there is plenty of room for a detailed layout, but we still
have the exact same content as we started with at the narrowest screen width.
25. Before I tell you how responsive design improves the user experience of a site, I’m
first going to tell you a little bit about how responsive design came about.
27. Before mobile, computers and phones were totally separate. Our jobs as UX
designers were much easier. And we couldn’t have even imagined what was coming.
29. Now there are all these different devices that we can use to access the
internet: smartphones, feature phones, tablets, laptops, eReaders. Who
would have thought you can carry a computer around in your pocket?
Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
30. Nobody could have predicted the way things are now. So we need to
understand we can’t predict the way things may be in the future.
31. Fixed-width Site
When we first started designing for mobile phones, there were two main options.
The first was to just leave the site the way it was.You could still access the site
from your mobile phone, you just had to zoom in and out to see everything.
32. This is what I get when I visit The New York Times website. I imagine
they have a mobile site, but I can’t find a link from this page.
34. But when I zoom in so that the text is actually large enough
for me to read, this is what I get. It’s pretty hard to read
when you can’t even see a full line of text all at once.
35. Separate Mobile Site
The other option was to create a separate mobile website. It had
separate code, and often separate content, from your main website.
36. This mobile site from USA.gov doesn’t look too bad. It’s
very clean and the navigation is easy to understand.
37. But when I go to the main USA.gov website, there’s all this content that isn’t
on the mobile site. If I’m viewing the mobile site, I won’t have access to it.
38. Neither of those options was the right answer. Web designers tried
out a lot of different ideas and techniques, looking for a better
solution to the challenge of designing for mobile phones.
39. Responsive Design
In 2010, web designer Ethan Marcotte put together a few different techniques
into something he called “Responsive Web Design.” It started to catch on.
40. He described it in an article for A List Apart later that year,
then wrote a book about it in 2011. This is a great book to
read if you want to learn more about responsive design.
Responsive Web Design http://www.abookapart.com/products/responsive-web-design/
41. Responsive web design offers us a way
forward, finally allowing us to “design for
the ebb and flow of things.”
- Ethan Marcotte
42. Future-Friendly
One of the great things about responsive design is it allows us to plan for
what might be coming in the future. We can’t predict the future and make
our websites future-proof, but we can make our websites future-friendly.
43. Content Parity
An important user experience issue that we need to think about is content
parity, which is the idea that everybody should have access to the same
content, no matter what device they’ve using to access the website.
44. For example, on the Consumer Reports site, the Recalls & Safety section
is very important if you need information about recalled products.
45. But when I try to find that content on the mobile
Consumer Reports site, I don’t see it.
46. At the bottom of the page, there’s a helpful-sounding link, “Can’t
find what you’re looking for?” Perhaps it will lead me to a site
map or something else that will help me find what I need.
47. But when I click it, I get this. (read #2 above)
48. The beauty of the web is its openness.
Don’t arbitrarily lock people out because
of browser, device or configuration.
- Brad Frost
@brad_frost
Something to think about:17% of cell phone owners in the United States access the
internet mostly from their phones.You can’t assume that people only do basic tasks
on their phones, and do everything else from their desktop computers later.
49. Here’s another example. When I paid my car insurance bill recently, I found this
helpful link on the front page of the Geico website, “make a payment.”
51. I got to this page, where I discovered that I could access the payment
page by just entering my phone number and zip code. I didn’t need to
remember my username, password, or account number.
52. It makes sense. Why have unnecessary security on a page
where the only option is to give them your money? Who is
going to try to sneak in to pay someone else’s bill?
53. I thought I’d check whether I’d have the same option on Geico’s mobile site. First, I
got redirected to a page that tried to convince me to download an app to pay my
bill. It seemed a lot of effort to just pay a bill, so I clicked “No thanks,” and then...
54. I got this page, half of which is wasted on a photo of the night
sky. It seems like the only option for paying my bill is to log in.
55. I thought perhaps the “Explore GEICO” button would
give me some of the other options from the website.
56. But no, that just gives me links to their social media
pages. I’m not sure what that has to do with exploring.
57. So my only option, if I didn’t want to log in to pay my bill, was to click
this tiny “Desktop Site” link all the way at the bottom of the screen. It’s
clear that they don’t care if I can find my way to the rest of the content.
58. Context of Use
Another important user experience consideration is context of use.
This refers to the conditions under which the website is being used.
59. You’ll hear people talk about “mobile context,” but it’s more complicated than
that. Not all people using mobile devices are out running around somewhere,
and not all people using desktops/laptops are sitting behind a desk.
60. Some people actually are running around when they’re using their mobile device.
Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c
61. But others might be sitting on the sofa at home,
browsing the web or buying tickets to Disney World.
Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
62. I’m not sure what these kids are doing, especially the one
on the left, but they’re definitely not running around.
Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
63. It can be downright surprising where people are using their mobile devices.
Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ
64. Just as there isn’t only one context of use for people with mobile devices, there
also isn’t only one context of use for desktop and laptop computers.
65. For example, you can’t assume someone on a phone has a slow connection, and
someone on a laptop/desktop has a fast connection. Most of us have suffered
through slow hotel room wifi where it takes a couple minutes to load one page.
Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6
66. So then why not make it faster for everybody, not just mobile users?
67. You also can’t make assumptions about screen size.
An office worker may have a tiny screen...
Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6
68. While a home user may have a huge monitor.
Photo credit: Matt Hamm via Creative Commons http://flic.kr/p/EyrLG
69. Responsive Design
So you need a site that works for everyone.
That’s where responsive design comes in.
70. Mobile First
There are different ways to put together a responsive design. The best way
is to use a mobile-first perspective. Designing for the smallest screen first
forces you to focus on the content, and decide what’s really important.
71. Trying to fit everything from a desktop site into a
mobile site often just doesn’t make sense.
72. The Washington Post realized this. Their mobile website is much simpler,
cleaner, and straightforward. It only has the information you actually want.
73. But then who do they think is actually going to want the rest of it? This is
their front page. I counted 184 text links (that’s not including images or ads).
74. Too much visual information thrown at me all at once makes my head hurt.
75. 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
Why is it easier to do a transaction on a mobile phone
rather than on the bank’s regular website?
78. United Pixelworkers is an ecommerce site. Not all responsive sites are
content-based rather than functionality-based.You can scroll down to
see the various products that are featured on the front page.
79. When the screen gets wider, everything rearranges so you can see more at once.
80. At full width, you have a beautiful layout. But it’s the exact same
content that you saw at the narrowest width.You won’t be
missing anything if you go to this site from your mobile phone.
81. The WWF site has beautiful photography. They don’t want to
waste it by making the photos tiny on a small screen.
82. At desktop size, there’s space to make the main photo even bigger, but still room to
show additional photos below.You’ll get the same content whether you’re on a
mobile phone or a huge monitor, you’ll just be able to see more without scrolling.
83. This is a company that sells surfboards. Instead of making the picture change size...
84. They show more of the picture. Responsive design gives you a lot of options.
85. The University of Chicago has a lot of information on their website. By
designing from the smallest screen size first, they were able to make
sure the most important content appears at the top of the screen.
86. On a desktop screen, you see the same content, but there is room for some
additions, such as the sub-caption on the main photo. That text isn’t an integral part
of the content, so it was hidden at the narrower width to save space.
87. You’ve probably noticed from these examples that responsive designs
tend to be very clean and uncluttered. Compare that to the Washington
Post site we saw earlier. Which is a better user experience?
88. On responsive designs, since it’s the same website no matter what size
you’re viewing it at, the branding and the look & feel are consistent across
devices. This often isn’t the case when you have a separate mobile site.
89. There’s more content on the page at this width, and you see additional elements
such as the navigation. But it still looks and feels like the same website.
90. Emeril’s site does a great job of presenting menus so they’re
easily viewable on a small screen.You have to scroll down
quite a ways to see everything, but that’s okay.
91. At desktop width, the menu layout is different and they’ve added pictures for
the three menu types at the top, an enhancement. Mobile users don’t see the
pictures, but that’s okay because they aren’t an essential part of the message.
92. Responsive Web Design
1. Give everybody the same content
2. Displayed appropriately for their
device
3. No matter what device they have
Bottom line, it’s all about the user.
93. 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