Collective #565

Inspirational Website of the Week: Bruno Arizio An outstanding design with some very engaging and elegant interactions. Our pick this week. Get inspired This content is sponsored via Thought Leaders Clubhouse.io: PM tool that’s easy on the eyes Try the modern project management Read more

Collective #565

dreamt up by webguru in Uncategorized | Comments Off on Collective #565



C565_2019

The 2019 Web Almanac

The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive.

Check it out







C565_gauges

Gauges

Amelia Wattenberger coded up a gauge example from Fullstack D3’s Dashboard Design chapter as a React component.

Check it out









C565_innerwolf

My Inner Wolf

An eclectic visual composition of our inner worlds: a project on absence epilepsy seizures by Moniker in collaboration with Maartje Nevejan.

Check it out








Collective #565 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #565

Become An HTML Email Geek With These Videos From Rémi Parmentier

dreamt up by webguru in Uncategorized | Comments Off on Become An HTML Email Geek With These Videos From Rémi Parmentier

Become An HTML Email Geek With These Videos From Rémi Parmentier

Become An HTML Email Geek With These Videos From Rémi Parmentier

Rachel Andrew



Creating an HTML email can feel like stepping back a few years as a web developer. All of our new layout functionality is unavailable to us &mdasj; email clients render the same layout in completely different ways. Just when we think we have it all fixed, another email client shows up with a new set of bugs.

Not too long ago, Rémi Parmentier, an HTML Email developer, ran a session with practical front-end techniques for building modern, cross-client emails. A few weeks later, he gave a wonderful talk at SmashingConf Freiburg highlighting some of the common struggles and shared useful strategies for avoiding problems in email development.

There was so much useful information contained in these sessions that we wanted to release them more widely — including the webinar transcript and references to slides and resources. If you have ever struggled with email development, these will give you a great starting point to understand why an email isn’t rendered properly, and how to squash those nasty bugs quickly.

If you enjoy learning from these videos, check out Smashing Membership. Starting from this month, we will be showing some of the live sessions we run every month to a wider audience — absolutely free of charge to view. However, if you’d like to join the discussion live and perhaps have your work reviewed by an expert, join Smashing Membership. For the price of one coffee a month, you can support the creation of more content like this.

Now get ready to learn everything you need to know about HTML email!

Webinar: HTML Email with Rémi Parmentier

Resources And Transcript

Rémi Parmentier: Thanks, everyone, for coming to my presentation. My name is Rémi Parmentier. Some of you might know me from Twitter or from my blog under the nickname hteumeuleu. I’ve been doing HTML emails for as long as I’ve been working in this industry. For the past few years, I’ve started to give training in HTML emails as well I am spending a lot of time online on Slack, on Twitter, on forums to help people find solutions for their email problems. This gave me a pretty good view of most of the coding problems that people have and how to actually solve them. I started working on this email coding guidelines project this year. This was greatly inspired by some of the work that’s been done on the web about I think a decade ago.

Rémi Parmentier: About a decade ago, there was a lot of trends of web guidelines being shared by people from many different companies. First one was the most famous one was this code guide by Mark Otto, who was then working at Twitter. The point of the document was to share a lot of guidelines about how HTML and CSS should be coded within the company. There was a lot of good practices shared in this document, like which doctype you should use or to close your tag and such. I think this is really interesting to have.

Rémi Parmentier: In the email world, Ted Goas from Stack Overflow actually made a very similar document with a lot of content as well about how they’re building the emails at Stack Overflow. This really gave me the lust to make a similar document that everyone could share within their company or everyone could pick good practices for building HTML emails. We’re going to see a few of these best practices and you’ll be able to see the document afterwards online. Let’s start ahead.

Rémi Parmentier: The first thing that I usually share is to use the HTML5 doctype. Whenever I help people online of open HTML email, it makes me sad to see that a lot of people are still using HTML4 doctype or XHTML 1. The first reason to use the HTML5 doctype is that it’s really nice. Actually, it’s very short. You can type it by hand, you can remember it, and that’s already a good reason to use it.

Rémi Parmentier: The most important reason to use the HTML5 doctype is that when an email is displayed in webmail, our doctype is usually removed and we inherit from the webmail’s doctype. Most webmails use the HTML5 doctype, so even for you wish you could use HTML1 or HTML4 doctype, this won’t work because webmails will remove it.

Rémi Parmentier: I made this little illustration of how this actually works. On the left, you can see an email address coded. It’s got a style tag and it’s got a div and an H1 inside. What happens when a webmail like Gmail, for example, wants to display this content, it will pick the style tags and pick the content within the body, and it will prefix the styles, it will remove all the styles that it won’t support, and then it will include this inside the HTML of the actual webmail, because webmails are actually just HTML and CSS. This means that even if I use an HTML4 doctype, because Gmail uses HTML5 doctype, my code will be random thanks to that doctype. This is a good thing to have in mind.

Rémi Parmentier: I made this about this, about which doctype you should use in HTML emails, about three years ago already, but what I saw back then was that most of the email clients already were using an HTML5 doctype. A few of them didn’t have a doctype at all, like on mobile apps sometimes, but a lot of them were on HTML5.

Rémi Parmentier: It’s important to know that you can end up on different doctypes because there can be differences. The first one is that HTML5 actually have spaces between images. If you slice some big image inside your email, you will see something like this if you try it with an HTML5 doctype.

Rémi Parmentier: Let me actually show you this with a little demo. Here, I have this … Oops, it’s the wrong one. Here I have this little demo of a T-Rex. It’s actually three images. Here with an HTML1 doctype, everything is working fine, but if I use an HTML5 doctype instead, boom, you have white lines appearing between each images.

Rémi Parmentier: Now, I’m not exactly sure why this happens, but I think it’s because when HTML5 upgraded, they cannot change some of the way that images are supposed to behave according to the specification, so now it looks more like a paragraph with text, so there are lines in between images.

Rémi Parmentier: Email Geeks have found very good solutions to the service. One of the solutions is to actually add a display block style to every images. Once you do this, it will remove the white lines between the images. Another solution to avoid this if you can’t use display block is to add a vertical align middle style and then you will remove these white lines as well.

Rémi Parmentier: This is a first quirk that you can encounter with HTML5 doctype, but there is another interesting case is that you can’t display block a table cell in WebKit without a doctype. This one is really interesting as well. I’ve got a table for this as well, which would be right here.

Rémi Parmentier: Here I’ve got a table with three little dinosaurs next to each others. Usually when we’ve got tables like this and we want to make our emails optimized for mobiles, what we can do is apply the display block to our TDs and then they will stack on each others like this.

Rémi Parmentier: As we can see here, we have an HTML5 doctype. This is working fine, but if I would ever end up in an image client that will remove the doctype, then this won’t work anymore in WebKit. As you can see now, it’s back to the regular pattern display.

Rémi Parmentier: I think this has to do with legacy websites and quirk modes and all of these things, but one solution that was found by the email community is to actually use TH tags instead of TD. If I remove every TD here by TH, you can see that, here, even without a doctype, it’s working again. This is some kind of the quirks that you have to deal with in HTML emails because of not only email clients behave but also rendering engines like WebKit here.

Rémi Parmentier: The second best practice I’d want to share with you today is to use the lang attributes. The lang attribute in HTML is to define the language of your document. This is very important for accessibility, and mostly this is because accessibility tools like screen readers will be able to pick the right voice for it.

Rémi Parmentier: Once again, let me show you a demo of this live, and hopefully it won’t crash. Here I have this very nice email from Mailchimp. As it was said before, I am French, so my computer is set in French. My screen reader is in French as well, so every time we’ll see some new content, it will try to read it in French. I will stop my screen reader now. You try to see when we’ll get to this paragraph and see how it will read it.

Rémi Parmentier: I know that I don’t really have a good English accent, but this is even worse than mine. If you don’t set the lang attributes, your content will be read on whatever default language is for your users. The quick phase here is to add the lang attributes, and then I can restart my screen reader.

Screenreader:: Mailchimp Presents has a new collection of original content made with entrepreneurs in mind. In recent months, we’ve rolled out documentaries, short-form series and podcasts that live only on Mailchimp. Today, we officially launch a platform.

Rémi Parmentier: As you can hear, even for my screen reader, and my system is still set in French, once the screen reader is actually on HTML contents, it will use another voice, an English voice there, to read the content which makes the experience much, much better here.

Rémi Parmentier: One small difference that we have in HTML emails with the lang attribute is that, just like for the doctype, the doctype might not be picked up by webmails, because webmails will only take just styles and the content of the body. It’s usually a good practice to add the lang attribute as well on the wrapper that you have on your content inside your body, so you’ll make sure that this will get picked by webmails as well.

Rémi Parmentier: Now a third best practice that I like is to actually use styles over HTML attributes. This is really something that people hate about HTML emails because they feel that they have to use all the HTML attributes, they have to use all code, and this makes emails look very different from the web, but there is really no reason for this at all unless you need to support very old email clients like Lotus Notes 6 or similar.

Rémi Parmentier: In this example here, in the first example, you can see I’ve used valign, align and bgcolor attributes in HTML, but all of those can be very easily and robustly replaced by the corresponding styles. Here I only have one style attribute and inside I have the vertical align CSS property, text align and background color.

Rémi Parmentier: One reason I like to do this is because it makes go cleaner and more readable. All your presentational properties are grouped in a single style attribute instead of being all over the place with valign, align and all the stuff. This makes it, in my opinion, very, very better to read and to maintain.

Rémi Parmentier: There’s another reason I like to use styles over attributes is that it helps taking over email clients’ own styles. For example, on the French webmail of Orange, the webmail’s UI actually has a CSS that has a rule that sets every TD to vertical align top. Because of this rule, if you were to use only HTML attributes like valign=middle, the CSS role from the webmail would override with the HTML attributes because this is how the cascade works in HTML and CSS.

Rémi Parmentier: Instead, if we use an inline style with a vertical align property on the TD here, well, this style will take over the webmail style because inline styles are more important than external style sheets. Using styles over attributes is also a good way to fight other email clients’ and webmails’ default styles.

Rémi Parmentier: There are a few exceptions to the attributes that I still use. The first exceptions is to center a table in Outlook 2007 to 2019 on Windows, because as Scott said in the introduction, Outlook uses Word as a rendering engine in those versions and it’s not really good at understanding CSS, at least for some properties.

Rémi Parmentier: For example, here, it would understand the margin properties for pixel values, but it wouldn’t understand the margin zero auto value to center a table. We still need the align=center attribute to center elements and data, especially in Outlook, but we no longer need to use which attributes as in the first example here. This can be replaced by the width style instead.

Rémi Parmentier: Now other exception in Outlook as well is when you want to define a fluid image width. In the first example, I use a width attribute with 100% value. The thing is that Outlook actually doesn’t deal with percentage width for images the same way as it should be in CSS.

Rémi Parmentier: The percentage in Outlook is actually matching the physical image size and not the parent size in the HTML. If you’ve got an image that’s 600-pixel wide and you use a width=50%, then your image will actually be 300 pixels no matter what the size of your parent in HTML is.

Rémi Parmentier: Usually, to avoid any quirks with this is then I always define a fixed width in pixels for Outlook using the width attribute in HTML, and then using a style, I use a width with 100%. Outlook will only pick the attribute value here and not the style value.

Rémi Parmentier: Then, another exception I have when I use styles over attributes is to reset the default styles of the table. By default, the HTML tables have borders and padding inside and cells, et cetera. The proper way to do this in CSS is to set border zero, border spacing zero, our padding is zero, our border is zero, the first ones on the table, and expanding your border actually for each cell of your table.

Rémi Parmentier: This is pretty much why I don’t really like to do it the CSS way because you need to repeat the padding and border for every TD of your table, while if you use the attributes, you only need to use them on the table, and then you’re all set for any … no matter on any cells you have inside your table. This is probably something I will change my mind in a few years maybe, I hope, but for now, I’m still used and I prefer using the attribute way for resetting default styles on tables.

Rémi Parmentier: Now another best practice I’d like to share is, do not split the visuals. This was actually a very common practice maybe a decade ago. When we had large images, it was always better, at least it was always shared that you should split it to make download faster and things like that, but this is not true today.

Rémi Parmentier: Not splitting visual actually has a lot of benefits. The first one is that it’s easier to maintain. If you have a big visual in your email and it’s Friday night and your project manager comes at you and asks you to change it at the last minute, well, you don’t have to open Photoshop and slice your images again and where you’ve got everything. You can just replace that image and you’re done.

Rémi Parmentier: It’s also better for accessibility because you have a single image, you have a single element, so a single alt attribute. This is simpler and better for accessibility. One thing it’s also better for is for web performance, because downloading 100 kilobytes image is theoretically faster than downloading five image of 20 kilobytes.

Rémi Parmentier: That’s because for each image of 20 kilobytes, the request to the server needs to be made and we need to wait the answer five times. Even for the really small micro-transactions between the client and the server, this add up the more image you have, and it can slow down the download of your email image, so this is something to avoid.

Rémi Parmentier: Next, on the WebKit, there’s also a very weird behavior. Whenever you use a CSS transform on sliced images, WebKit will have very thin lines between split images. I would just show you a demo of this as well. Back to my first T-Rex image here, if I add a small transform here that will scale the image, here you can see that at this ratio, there are very small lines that appear within each slices of my image.

Rémi Parmentier: This is really due to WebKit not handling well the way they should scaled images like this. Maybe there’s a node size somewhere and it doesn’t compute properly, so you end up with small hair lines like this. Yes, the best practice here is to avoid to split your visuals.

Rémi Parmentier: This is actually something that will happen inside email clients because in Outlook.com, for example, if your email is bigger than the actual view of emails inside the clients, then your email will be resized using a CSS transform to feed the view port of the email client. This is something that you should be wary of.

Rémi Parmentier: Finally about splitting visual, I always try not to do it because this kind of things happens. This is something that was shared on Reddit almost 10 years ago. This is an email by LinkedIn and the face of this young lady, it was cut in half, maybe because some text was longer than expected or maybe because here the user chose to set up his email client with a bigger font than expected, so all kind of things can happen inside email clients, just like on the web. If you want to avoid these kind of strange situations, just don’t split visuals.

Rémi Parmentier: Next, this is a big one. This is tables for layouts. This surely is the most common thing that people think about when they think about HTML emails. It always annoys because we mostly don’t really need tables for layouts, except for one email client, and that is the Outlooks on Windows from 2007 to the latest 2019 version.

Rémi Parmentier: The reason of that, as we said before, is because all of those versions of Outlooks use Word as a rendering engine. Word is not really good in interpreting HTML and CSS. There is this documentation online about what it should be capable of, but it’s pretty hard to read and to make sense of, so I try to make this diagram to actually make sense of it.

Rémi Parmentier: From this documentation, what it says is that CSS supports in Outlook will actually vary from which elements you use CSS on. It will be different in body and span than in div and p and then all the other supported HTML tags.

Rémi Parmentier: First, if you have a body and span, you can only use what Microsoft calls Core CSS properties. That’s the color property, the font, text align and background color property. On the body element and the span element, you can only use those four CSS properties.

Rémi Parmentier: Then, on divs and paragraphs, you can use all those four properties from the Core level, but you can also use two new properties from what Microsoft calls the Coreextended level. In this level, you have two new properties, the text indent and margin properties.

Rémi Parmentier: Then, for all the other tags, you can use properties of the two previous levels, and you have what Microsoft calls the Full CSS support with many more CSS properties, but I think the most interesting are the width, height, padding, border and this kind of properties for defining elements.

Rémi Parmentier: This means here that if you want to use width and height properties and make it work in Outlook, you won’t be able to do this on a div because div only support Coreextended and Core CSS properties. You will need to use tables for those CSS properties, and the same thing for padding and border.

Rémi Parmentier: I usually narrow it down to the few following guidelines to use tables. I try to only use a table when I want to set a fixed width on an element. If I need an element to be a certain width, then I will use a table and define the width from that table.

Rémi Parmentier: Also, if I want to set two block elements side by side, because even Outlook doesn’t really support any advanced CSS layout property, so even float is not really well-supported, so if you need to have two elements side by side, then as you make a table with two cells, and those two elements will be next to each others then. Then I use tables whenever I need to set a padding, a background color or border style. This make it very reliant, very robust to use a table for those styles only.

Rémi Parmentier: Now a problem with tables is something we’ve learned in the way a long time ago is that tables are not made for presentation. They are made for actual data tables. This can be very problematic for screen readers especially. In order to improve accessibility here, we will use the role=presentation attribute whenever we will make a layout table.

Rémi Parmentier: Let me show you a quick example of how this will change the way your email is interpreted by a screen reader. I will take a new demo here. I’ve got this email from Jacadi, which is a French children clothing brand. They have this table here with different sizes of products. This is actually a table inside the code. I’ve pre-recorded a video here to show you how this is read by a screen reader.

Screenreader: Counting pairs, web content. Blank, blank, blank. Table 1 column. Nine rows. Blank. Column 1 of 1. Row 2. Nine Level 2 tables, seven columns. One row, Column 1 of 1. Blank. Column 3 of 7. Blank. Column 4 of 7. Blank. Column 5 of 7. Blank. Column 7 of 7. End of table. Row 3 of 9, blank. Column 1 of 1. Row 4 of 9, Row 2 table, seven columns, one blank. Column 1 of 7. Blank. Blank. End of table. Row 5 of 9, blank. Row 6 of 9, blank. Column, blank, blank, column end of table. Row 7 of 9, blank. Row 8 of 9 Row 2 table, blank. Column 1, blank. Column end of table. Row 9 of 9 blank. Column end of table.

Rémi Parmentier: This is terrible. This is so annoying. Now let’s see how we can fix these cells. The way we can fix this is by adding the role=presentation attributes. This is not something that it reads from tables to tables, so we need to add this attribute whenever we’ll have a new table. We have a few nested tables here, so we’ll add a few. Here is how the results sound.

Screenreader: Blank. Blank. Voice-over off.

Rémi Parmentier: This is so much better. This is so much smoother and it makes for much nicer experience. I hope this convinced you that you should always use as less tables as you can, but if you do, use role=presentation attributes on those tables.

Rémi Parmentier: Now, one step that we can take even further is that since tables are mostly for Outlook, we can use conditional comments to make those tables only visible on Outlook. Conditional comments are actually something that was available in Internet Explorer as well until I think I9. With these, if MSOs are in text, we can tell the borders that all the following contents within that conditional comment will be available only for MSO clients, so that’s mostly Outlook.

Rémi Parmentier: Then, between those opening and closing tables comments, we can have a div with a role or stuff that will come just like for a regular web border, although webmails will pick the div and Outlook will pick the table. This is video how I got most of my emails.

Rémi Parmentier: Now another small good practice to have is to use margin or padding for spacing. This is mostly to avoid empty containers, empty cells like this where we have a role within a cell with a height of 20 and then we have TDs with width of 20 to create margin all along with this content. I still see this done a lot, and this make your code really, really heavy. It’s less readable and it’s really bad in my opinion.

Rémi Parmentier: The proper way to do something like this would be to use a table as well if you want and have the padding style on the first TD, and then inside use margin to space tags between each others. This works again really well in every popular image client and in Outlook as well.

Rémi Parmentier: Now the small quirk that can happen in the Outlook and Windows is that there is the background color. If you use the background color on any of these elements with margin, it actually bleeds through the margin. Here’s an example where I should have a margin between the red background and blue background, but in Outlook, the margin is actually the same color of the background of that element. In those cases, then the solution is to maybe use another table and nest your content like this to space elements, but if you don’t use background, then margin is really safe even in Outlook.

Rémi Parmentier: Finally, this is perhaps my favorite recommendation. It’s to make it work without style tags. It’s not necessarily about having this raw HTML rendering, but thinking about progressive enhancements and graceful degradation and about how your emails will look without this guideline. This is something pretty unusual in cooperation of the web because it doesn’t happen on the web, but not having a style tag actually happens a lot on email clients.

Rémi Parmentier: First, not all email clients support style tags. Perhaps one of the most common example I see is Gmail on its mobile applications on iOS and Android lets you configure a third-party email address. You can use your Yahoo or Outlook.com address inside the Gmail app. If you do so, then every emails that you check won’t have support for style tags. This is what Email Geeks have nicknamed GANGA for Gmail apps with non-Gmail accounts. This is a very common occurrence that you can have.

Rémi Parmentier: Then you have a lot of cases for smaller or local or international email clients like SFR in France or Yandex and Mail.ru in Russia, et cetera. Even to this day, there are a lot of email clients that don’t support style tag, so if you want to make your code more robust, make sure that it can work without style tag.

Rémi Parmentier: Sometimes it’s also temporary. For example, in the past year or so, Gmail has had two days where style tags were completely removed from every email on every one of their email clients. We don’t know why this happened. There has been zero communication on that, but there’s a good chance that maybe they detected some kind of attacks that use certain styles, and so they needed to remove it very fastly and secure their users, so they removed style tag support for a few hours or almost a day. If you were to send a campaign that day, you were out of luck if your emails required style tags to work.

Rémi Parmentier: Sometimes also it’s contextual. For example, in Gmail, when you forward an email to someone, then you won’t have any style tags anymore, or when an email is viewed in its unclean version, you know when you have a view entire messaging at the bottom of your email because it was too long, if you view your email in that window, you won’t be able to have a style tag.

Rémi Parmentier: Then finally, sometimes it’s buggy. For example, in Yahoo Android in the app, the head is removed, so every style tag inside it are removed as well, but only the first head. We don’t really usually think as HTML documents are in multiple heads, but you can actually totally do this.

Rémi Parmentier: This has been pretty much a common practice now for a few years to deal with this bug in Yahoo. If you have a second head with your style with it, then it will work fine in Yahoo Android and in most email clients as well. We have just this empty head first so that Yahoo will strip it, and this will work.

Rémi Parmentier: Now, what I mean by making an email works is that the email should adjust its layer to any width without horizontal scroll and the email should reflect the branding of the sender. This can be colors often, this can be fonts or whatever, but make sure that it works without styles.

Rémi Parmentier: In order to do this, we can use inline styles. This is why most emails still use inline style, and I really recommend to do this for most of your styles. Make sure that the brand, the colors and everything can come up with just inline style.

Rémi Parmentier: Then, to tackle mobile emails to make sure that your emails can work fine from desktop to mobile, we have different solutions. The first one is to make your email fluid. I’ve got a little demo here as well, which I will show you right now.

Rémi Parmentier: This is an email that I’ve worked on almost four years ago for a French magazine, GEO. It’s got a lot of interesting things here. The first one is this grid here. If I try to resize it to make it responsive, you can see that it’s 100% fluid and it will scale accordingly to whatever the width for the image client is.

Rémi Parmentier: This works absolutely well without even a single style tag. This is just two tables on top, one for each lines, and we’ve got image inside it and the image are set with a fluid width, and so this works well enough even without style tags. This is good to have elements like this that can scale accordingly.

Rémi Parmentier: Now, this might not be the most optimal for every email, so another technique is to make your content hybrid. “Hee-breed,” or “hi-breed,” I’m not sure how you pronounce it, sorry for that, hybrid comes from the fact that you can still use media queries, but only as progressive enhancements, and then you need to make sure that your layout can fall back gracefully even without styles.

Rémi Parmentier: I would go back to this exact same email that I just showed you. A little bit lower here, we’ve got this gallery of user portraits. We can scale it as well. We have three columns here and then it will get on to two columns, and then only to one column.

Rémi Parmentier: The way this works here is using div width display in my block. We’ve got actually three divs like this next to each others and they all have a width of 33%. They will set so three can sit next to each others. They all have a minimum width of 140 pixels, so if there is no longer enough room to fit all those three elements because they’re in display inline block, they will naturally match even CSS flow down next to each others. This is a pretty good way to make it work like this.

Rémi Parmentier: I also use CSS and media queries here to make it a little bit more graceful when you have content here. If I disable the styles here, if I remove all of this, you can see that the layout has changed a little bit. We still have two columns, but they’re more stuck together. The layout still works appropriately where we can go from three to two to one layouts even without any styles, just with both div display and line blocks.

Rémi Parmentier: Then, perhaps the final, most popular way to make your emails work on mobiles is to make them mobile-first, to code them mobile-first. I will once again go back to that exact same email. You can see here that … Oops, it’s not fitting. I’ve got these two email columns next to each others. If I resize my window a little bit smaller, they will stack on each others.

Rémi Parmentier: Now because this is coded mobile-first, it means that this is actually the default layout for this zoom. On them, I use a min-width media query to change the layouts on desktop, on larger window sizes to make this work. If I remove all the styles here, just like I did before, you can see that now, our images are stacked on each others just like on mobile. This is what you’ll get when you code mobile-first. You get mostly your mobile view, but larger on desktop. This is really a lot of considerations to have when you’re coding emails for mobiles and for every email clients.

Rémi Parmentier: That’s pretty much it for me. All those recommendations, all those guidelines, you can find them online on GitHub, where I have these documents available. I really strongly encourage you really to share it within your colleagues and also to contribute to it.

Rémi Parmentier: If you think you have good recommendations that could apply to every emails you will code, feel free to share with me, feel free to contribute to this document as well. Hopefully you will have some questions. You can find me on Twitter or on my blog or you can send me an email as well if you have any questions after this session. Thank you.

Scott: Thank you very much, Rémi. “Re-my.” That was really very good. I’ve had a lot of questions about … Oh, hey, Vitaly.

Vitaly: Hello. Hello, Rémi. I’m so sorry about being late. Hello, everybody, dear Smashing members. I had a train delay and all. Scott, you wanted to say something? Sorry I interrupted you.

Scott: No. There was just two questions I was going to get out of the way. One was from Pawan, who’s a very, very active member of the Smashing membership. He is asking us, any thoughts on applying fonts consistently through HTML email?

Rémi Parmentier: Sorry, can you repeat?

Scott: Do you have any thoughts about applying fonts consistently through HTML email?

Rémi Parmentier: Yes. Well, for fonts, I usually encourage my clients to use web fonts in emails because it’s always better when you can have your own brand fonts. Now the thing to have in mind is that it won’t work everywhere. When using web fonts, especially, it almost works nowhere. It works in Apple Mail and in Thunderbird and maybe a few local email clients, but that’s really it. It doesn’t work in Gmail, it doesn’t work in Yahoo. If you can adapt to that, if that’s good for you, then go ahead and do it.

Rémi Parmentier: Now, the problem that you can have with web fonts like this is that if you try to use really funky fonts like Lobster or Pacifico on Google fonts, if it falls back to something like Arial or Helvetica, your email will definitely look very, very different. If you can use Montserrat and it falls back to Helvetica, that’s less a problem in my opinion. It really depends on the fonts you want to use and how much you are ready to not have this font in the cases where it won’t work.

Scott: That’s a really good point. There’s Zach Leatherman, who’s a very active member with Smashing and a presenter at SmashingConf, he’s done a lot of presentations about the fallback on fonts, so that’s interesting to make that correlation between email and web-based fonts.

Scott: Before I hand it over to Vitaly, my other question is, a lot of people are talking about interactive emails. There was actually, not this past SmashingConf, I believe the SmashingConf before, there was a presentation about interactive emails where you can actually complete an action just with one click of a button in an email, and mostly it’s based on AMP email. I was just curious, what do you know, what is AMP email and what’s the support for it currently?

Rémi Parmentier: AMP for Email is still something relatively new. It was announced by Google about a year ago, but it was only made available in Gmail desktop webmail about a few months ago, I think, in maybe April or something. AMP for Email is basically bringing the AMP Javascript framework to HTML email so that now inside Gmail, you can use interactive components like carousels or accordions, and you’ve got also, more interestingly, in my opinion, have live data.

Rémi Parmentier: If you’re selling clothes, for example, you can make sure that the clothes you’re presenting in your email are available in stock and are the ones in the best interest for your customer that’s viewing this email. This brings a lot of new customizations and possibilities for emails like that.

Rémi Parmentier: The thing is that it’s very still in its infancy and it mostly only works on Gmail desktops so far. It should come in on Gmail mobiles in the coming months, but then, there is also Yahoo and Outlook.com I think who said they were interested in implementing it.

Rémi Parmentier: Maybe this is something that will actually grab attention and go in the future. Yes, this is something I’m looking into and I’m really interested in. It’s still very hard to say if it will work and be successful, but there are a lot of interesting things in it.

Scott: Definitely. That falls back on what I was asking at the beginning before you started the presentation is, is there going to be some sort of standard that comes across for email clients? That’s my dream is that that will happen. On that note, Vitaly, I’m going to hand over to you for some questions.

Vitaly: Excellent. Thank you so much, Scott. Actually, Rémi, that was a brilliant presentation. Thank you so much. I learned-

Rémi Parmentier: Oh, thank you.

Vitaly: … a lot. I was a little bit not shocked, but in a way, I felt like it’s just wrong that we’re preaching these best practices for email which are not necessarily best practices full stop in 2019. It’s really about time that web standards have evolved.

Vitaly: We do have an open question from Pawan. Just before we do that, I have a couple, but one thing I wanted to know from somebody who’s so deeply motivated by the beauty and horror of email, I do have to find out, do you sleep well at night?

Rémi Parmentier: Oh, yes.

Vitaly: Excellent.

Rémi Parmentier: It depends because I have two small children, so not every night, but it’s not because of email.

Vitaly: Okay. The thing is, if you look back, let’s say, over the last, I don’t know, how many years have you been now in this madness?

Rémi Parmentier: Almost 15 years, but I really started digging into emails maybe five years ago, or maybe a little bit more, but yeah, about five years.

Vitaly: I’m curious, then, do you see that there has been a lot of progress in terms of email client supporting new features, broadening CSS support, Gmail, support of media queries and all? Do you see that the differences have been remarkable over the last five years or is it a very slow progress? Just so we can set expectations of what we should be expecting coming up next on the platform.

Rémi Parmentier: I would say both. It’s been both slow, but there has been progress. If you look back five years ago, five years ago, Gmail didn’t support media queries, and neither did Yahoo, I think, and neither did Outlook.com. Media queries are a huge tool to make email works well on mobile. The simple fact that those emails were able to adapt and add this to their list of CSS properties and features supported is actually a very good thing.

Rémi Parmentier: Now, it’s always a bit frustrating because it definitely doesn’t move as fast as the web is moving nowadays where you can see new features added in Chrome or Firefox every week and new articles about it. Things are moving slowly for really unknown reasons. That’s perhaps the biggest problem of emails is that everything is really opaque.

Rémi Parmentier: We don’t know how things work within Gmail or within Outlook and we have a lot of advantages for the web, people from the Chrome team, from the Firefox team sharing all the new advances in their browsers, but this is not the case in email clients, and this is really perhaps the most frustrating thing is that if you see a bug, if you have a problem, you pretty much have no one to talk to.

Vitaly: It’s a little bit loud here. I’m just in a park, I promise. Pawan is wondering, do you have any thoughts on embedding HTML forms in emails? Is it a good idea or not?

Rémi Parmentier: It can work. This is actually something that’s done a lot by us in the presentation you mentioned. Mark Robbins was the godfather of interactive emails. A lot of people actually use form in emails. Just like everything, you just need to realize that this won’t work everywhere. You need to think about, what happens if my form doesn’t work? Do I show something different? Do I have a link that sets to a form on my website? This is perhaps the hardest part, when you try to think of advances in emails like that. Every time, you need to think about what happens if this doesn’t work and what will I show to the people when it won’t work.

Vitaly: That makes sense. Well, I have so many questions. If you do have a few minutes, I just wanted-

Rémi Parmentier: Yeah, sure.

Vitaly: Because just today, I had to send out a wonderful email to our wonderful Smashing subscribers. One thing that stuck with me, and I wasn’t really sure how to deal with it. Not every client who understand media queries. Gmail does. You will have the media rule and then it will be all fine, but then, for some reason, when we’re sending out with Mailchimp and we do inline styles, actually inline styles in the attributes, what happens is you have the inline styles say font size 21 pixel, let’s say, on H2. Then you have a media that overrides it with font size 28 or something else.

Vitaly: Am I correct to assume that it’s probably a good idea to avoid bang importance one way or the other, because it will override whatever you have in the inline styles? If you have a media rule, and then that media rule, you actually have font size 30 pixels importance, will it override inline styles or not in most-

Rémi Parmentier: Yeah, definitely importance will override inline style.

Vitaly: But then it’s included in the media rule, right? If a client doesn’t understand media, they wouldn’t know-

Rémi Parmentier: Yes, exactly. Yes, which is why you once again need to think what happens if media is not supported. There, your inline style will be picked up. Maybe you will need to have the mobile-first approach and have the smaller font size inline and then use a min-width media query to have the different font size on desktop.

Vitaly: Makes sense. When you start building, do you actually build mobile-first or do you build desktop-first?

Rémi Parmentier: Well, it really depends. As I just show in my last three examples between-

Vitaly: Oh, sorry, I must have missed a few things.

Rémi Parmentier: Yeah. Between the three examples or if we do mobile-first, these are different approaches that you can have and that makes sense, depending on the contents you have. Most of the time, I usually go mobile-first, but it really depends on how you want your fallback to display. Sometimes it makes sense to have more desktop layouts and sometimes it makes more sense to have more mobile layouts.

Vitaly: For testing, we’re using Mailchimp just to see how it looks in different clients, but Doug Working is asking, do you have any recommendations for tools to test email code to see how it looks in different email clients?

Rémi Parmentier: Yes. There are two very good and very popular email tools that will allow you to take screenshots of how your email render across many, many email clients. Those are Litmus and Email on Acid. They work really similarly for email testing.

Rémi Parmentier: You just import your code and you will get screenshots very fast of how your email looks. This is really how I recommend to test emails because, of course, you need to do some ports manually as well, but it’s so much faster when you have a tool like this that it’s really more professional and you will win a lot of time by working with tools like this.

Vitaly: But then, it basically takes screenshots that you have to analyze. If you discover something like a major bug, how do you debug? Any tools for remote debugging, so to say?

Rémi Parmentier: Yeah. Debugging is the hardest part. In webmails, actually, it’s pretty easy because since the webmail is just a webpage, you can fire up your browser inspector tools and inspect the webmail’s code. This is really something interesting to do. I encourage everyone to do it at least once in a while because you will see how the webmail transforms your code in ways that you maybe have never imagined, like prefixing and renaming the classes you can have in your code.

Rémi Parmentier: This is a good way to see if maybe an image client has removed some of your styles or maybe if you did a mistake somewhere. For webmail, this is the best way to debug. For other email clients like Outlook, this is really a try-and-retry approach where you just send a code, change something, resend the email-

Vitaly: It sounds like fun.

Rémi Parmentier: Yeah, this can be a bit irritating. With the experience, you do less and less of this, but yes, unfortunately, there are no developer to see in Outlook.

Vitaly: That makes sense. One more thing that actually came up as well, is it safe to use SVG in emails? Or if you’re having the same image, would you prefer to use SVG or would you recommend to stay away from SVG and use PNG or JPEG instead, or God forbid GIF?

Rémi Parmentier: GIFs are actually still very popular in email-

Vitaly: I know. I noticed.

Rémi Parmentier: … but there are actually no reason because PNG is just as well-supported as GIFs for that matter. Regarding SVGs, just as my previous answers, I will say do it if you can manage to make it fall back to something I think for other email clients.

Rémi Parmentier: I think SVG works very well in Apple Mail, in Mac OS and iOS. It might work in a few more email clients, but I don’t think it works well in webmails. If you can have a distant SVGs that you call maybe in … For example, if you use a picture tag, you can have a source with your SVG, so this will be picked up by Apple Mail. Inside this picture, you can have an image tag as a fallback with a regular PNG or JPEG. This will work in other email clients.

Rémi Parmentier: There are different ways to tackle this kind of things, but SVG is definitely not the first format for images that you were shown when you built emails, but this is definitely something you can use, even though it won’t work everywhere. If you can have the proper fallback, then go ahead and use it.

Vitaly: Willow Cheng is asking, would you have recommendation on design tools which could let you design and export email in HTML?

Rémi Parmentier: No. Unfortunately, nothing that I can think of right now. Because most of the time, tools that will offer you to generate your HTML from design tool will be really rubbish because it will be either completely outdated and not work well in most modern versions of email clients, so I would actually recommend to stay away from those tools. From design point of view, I’m not sure there are any tools that will let you export clean, proper HTML for emails.

Vitaly: That’s actually an answer I was expecting, to be honest. Maybe just one final question. I’m sure I’ll have more later, but I know you do also have family and all and it’s quite late as well, and I get to meet you in Freiburg, so this is just a couple of weeks from now, so at SmashingConf Freiburg. This is going to be exciting.

Vitaly: I do have a question, though, still. I remember for a while, maybe a year ago, maybe two years ago, I found these two resources which were great. One of them was responsiveemailpatterns.com. The other is responsiveemailresources, or something like that, .com. One of them has gone away. It’s just down I think at this point, but I will also post the link later. Can you recommend some websites, resources where you can get copy-pastes almost email codes, snippets or something that you can reuse on a daily basis? I have heard that you might be working on something. Was I wrong?

Rémi Parmentier: I’m not sure, but I won’t talk about this for now, but it’s always [inaudible 01:04:56] snippets of codes that you can share because there are a lot of factors inside an email that can make your code behave differently. Every time there’s a tool that says it makes bulletproof backgrounds or bulletproof buttons, for example, you can always very easily, very shortly find email clients in which this doesn’t work properly. This is always a problem.

Rémi Parmentier: I remember the websites we were talking about, about responsive patterns, but I actually don’t know who were maintaining those. I don’t think they are ever really updated. As for websites, I can’t think of any right now. Maybe it will come later, that’s too bad, but the two things I will recommend is, if you’re into Twitter, follow the Email Geeks hashtag. That’s #emailgeeks, G-E-E-K-S. There are always a lot of people sharing good resources and the latest good articles that are always interesting.

Rémi Parmentier: The other thing I recommend is to join the Email Geeks at Slack channel. This is a really good community that’s growing a lot. There are all sorts of channels for marketing or for design or for code. People are really, really nice there and really always trying to help and almost available at any hours of the day, so this is incredible. If you look up for Email Geeks Slack on Google, you will see a subscription page that you can join. I hope you can join and just say “Hi” if you come.

Vitaly: Just one final, just the really, really last one, and then I’ll let you go. Sorry, excuse me if you mentioned it already in the session, but I’m wondering, as of today, as of 2019, looking at the best practices and the email clients, what are the baseline where you would say, let’s support this kind of client?

Vitaly: Because at this point, when we think about a 8, sometimes you obviously want to search something accessible to a 8, but you’re not going to optimize for a 8. We’re getting to the point where some companies can actually start dropping a 9 in the same way, but again, we’re quite far away yet.

Vitaly: When it comes to email clients, is Outlook 2013 still a thing? I remember the big update that Outlook brought in 2013 changed a lot of things in email, if I remember correctly. As of today, when we look into the landscape of email clients, what is the baseline we absolutely have to support at least?

Rémi Parmentier: I think the-

Vitaly: To support.

Rémi Parmentier: The others’ basis is Outlook 2007, because this is something actually pretty annoying is that this is used in a lot of big companies, and those big companies don’t pays new license for new versions of Outlook every year and they pay for a decade or so. There are still quite a lot of people I think using those older versions. This is still something that we have to account for.

Rémi Parmentier: Now, it’s not really that much a problem because between Outlook 2007 and Outlook 2019, unfortunately there weren’t that much of progress made because it’s still Word as a rendering engine. I think this is maybe the worst case we have to support mainly because, yes, we are not getting rid of those versions of Outlook anytime soon, I think.

Vitaly: That’s very optimistic, a bright outlook in life. I like that. I respect that. Thank you so much, Rémi, for being with us today and sharing all the wonderful insights.

Rémi Parmentier: Thank you for having me.

Vitaly: Of course. Will you be kind enough to share the slides of your presentation as well?

Rémi Parmentier: Yes, absolutely.

Vitaly: If you have any other resources that come to your mind, please send them over to us and we’ll publish them, too.

Rémi Parmentier: Sure.

Vitaly: All right? That’s been very exciting. It wasn’t actually as dirty as I thought it would be. Just humble in a way, even. I didn’t see anything that would screech and make me feel uncomfortable at night when I want to sleep. Thank you so much for that, Rémi.

Rémi Parmentier: Thank you.

Vitaly: On that note, Scott, any other updates we should keep in mind or anything we need to mention?

Scott: I was going to ask you, Vitaly. Tomorrow, we have another Smashing TV.

Vitaly: Yes. Friends, we’re trying something else and something new every time. Apparently, well, finally, today we got … I hope we received, because I didn’t get the confirmation yet, but we’re supposed to receive the first copies of the Smashing Print or our new printed magazine dedicated to topics that are often not covered well enough on the web, or maybe that just got lost in the myriad of workflows.

Vitaly: The first issue is dedicated to ethics and privacy. As a dedication to that, we’re going to have a live session, a live stream on Smashing TV tomorrow with five panelists, all contributors to this first issue of Smashing Print. It’s going to be broadcasted on YouTube. If you go on Smashing.TV, you’ll find the links, but we also will be publishing an article tomorrow featuring the links and everything.

Vitaly: The printed magazine, that by the way, Smashers, the ones with $9 plan are getting it for free, and the members with $5 plan are getting the ebook and the heavy discount on the ebook as well. Rémi is getting a printed magazine as well just because he’s so awesome.

Rémi Parmentier: Thank you.

Scott: Thanks, Rémi.

Vitaly: Beyond that, we also have a few more things coming up, I think.

Scott: On the 13th, Mr. Paul Boag, who has been a very prominent mentor in the Smashing community, many Smashing Conferences, many webinars, August 13th, Paul Boag is doing the customer journey mapping where UX and marketing meet.

Vitaly: Then we have Cassie Evans on August 20th exploring the interactive web animation with SVG. This is going to be fun as well. If you actually ever wanted to do a bit more or try to figure out a better workflow for SVG animation, that’s definitely a session not to miss, so looking forward to that.

Vitaly: All right, I think we’re good here. Any more announcements, major announcements, Scott, that we need to share with the world around us?

Scott: You’re making me feel like I’m forgetting something, but … SmashingConf Freiburg?

Vitaly: Yes, we do have a SmashingConf Freiburg, where Rémi is going to speak as well, but we also have the videos of Toronto conference which will be released today, or maybe tomorrow. Maybe they already released. See how well-prepared I am. Watch out for that and you’ll get them, you’ll find them also in your dashboard, so keep that in mind. All right. I think we’re good!

Scott: Okay. Thank you everybody for attending. Thank you-

Vitaly: Thanks, everyone, for attending.

Rémi Parmentier: Bye! Thank you and bye.

Vitaly: Thank you and see you next time. Thank you, Rémi. Bye-bye.

Rémi Parmentier: Thanks. Bye.

Vitaly: See you next time.

SmashingConf Freiburg Presentation “Think Like An Email Geek”

At the end of the Webinar, Vitaly mentions that Remi will be speaking at Freiburg. You don’t have to wait for that as we also have that video to share with you, along with the slides and resources.

We hope you enjoyed this look into HTML email. If you would like to enjoy more of this kind of content, plus the chance to interact with the presenters and other members while helping to support the creation of independent content for web designers and developers join us here.

Smashing Editorial
(ra, vf, il)

Source: Smashing Magazine, Become An HTML Email Geek With These Videos From Rémi Parmentier

Better Design With Deep Thinking

dreamt up by webguru in Uncategorized | Comments Off on Better Design With Deep Thinking

Better Design With Deep Thinking

Better Design With Deep Thinking

Eric Olive



Interruptions, administrative tasks, and too many meetings are among the common complaints voiced by today’s professionals. When was the last time someone complained about a canceled meeting? In other words, everyone understands what hinders productivity, right?

Not so fast, says computer scientist Cal Newport. While we all realize that interruptions and fragmented time are troublesome, we fail to recognize:

  • The frequency of interruptions: We convince ourselves that we are focusing on one task at a time, such as a complex interaction design problem. Yet, every ten minutes or so, we check email or answer a text. Yes, we’re performing one task at a time, but the duration of that task is brief.
  • The cost of these interruptions: As Newport explains on a recent episode of Hidden Brain: “Even those very brief checks that switch your context even briefly can have this massive negative impact on your cognitive performance. It’s the switch itself that hurts, not how long you actually switch.” (Emphasis mine)

This task switching was the focus of a study by business professor Sophie Leroy. She gave participants a cognitively demanding activity, such as solving a puzzle, and then briefly interrupted them before they completed it. When they returned to the original task, their performance dropped. As Leroy explains, these “results indicate it is difficult for people to transition their attention away from an unfinished task and their subsequent task performance suffers.”

Leroy calls this carryover from one activity to another “attention residue,” meaning that people are still thinking about the previous task even as they turn to the new one.

The most effective way to avoid attention residue is to structure your work in a way that reduces interruptions. Such structure requires understanding the difference between deep and shallow work.

Deep Work, Shallow Work, And Why They Matter

“Deep work is the ability to focus without distraction on a cognitively demanding task,” writes Newport in his book Deep Work. This work allows us to absorb, understand, and act on complicated information. Examples including coding, complex project plans, user research, and sophisticated design work.

Shallow work refers to tasks that do not require extensive thought and focus such as filling out expense reports and answering emails, texts, and Slack messages.

Shallow tasks are necessary. The question is how much time to devote to shallow and deep work and how to structure work in a way that facilitates reflection and concentration.

Left image: Design is deep work. Right image: Filling out a checklist is shallow work.

Left: Design is deep work. Right: Filling out a checklist is shallow work. (Image credits: FirmBee | raw pixel) (Large preview)

The Solution: Five Practical Tips For Pursuing Deep Work

Tip 1: Jump Into Design Work

Avoid the temptation to text or check email first thing. Put your phone on do not disturb. Get out your sketch pad or open your design tool and challenge yourself to solve one gnarly design problem by 10:00 am.

While this tip sounds like common sense, it’s not quite so straightforward because we are conditioned to respond to signals around us: “External triggers are cues from our environment that tell us what to do next. These are the dings and pings that prompt us to check our email, answer a text, or look at a news alert,” explains habit expert Nir Eyal in a post about distraction.

Eyal continues: “Competition for our attention can come from a person as well, such as an interruption from a coworker when we are in the middle of doing focused work.”

Computer scientist Cal Newport expands on this point by explaining the biology behind the itch to respond. When we don’t reply promptly to a text or email, we feel like we are ignoring someone from our tribe. Emotionally, it’s the modern-day equivalent of ignoring someone who is tapping on our shoulder as we sit around the fire. In short, it’s difficult to ignore messages and requests from co-workers.

Difficult but not impossible. Extend jumping into design work by blocking out untouchable time on your calendar. What about emergencies? “The short answer is that there really never are any,” writes podcaster and New York Times bestselling author, Neil Pasricha in Why You Need an Untouchable Day Every Week. These untouchable days involve deep, creative work.

While most professionals cannot set aside an entire day each week, they can mark two-hour blocks on their calendar a few times each week. Colleagues simply see “busy” when viewing your calendar. While not foolproof, this quiet signal shows that you know how to manage your time in order to engage in the deep work that your job requires.

Tip 2: Kickstart Your Brain With Useful Questions

By definition, deep work takes time and considerable brain resources. Sometimes we need a cognitive boost before tackling the problem head-on. When this is the case, ease into deep work by composing a list of questions to stimulate reflection. For example:

  • What is the organization trying to accomplish?
  • How does this site, product, or app align with that goal?
  • If revising an existing design: What would I do differently if I could recreate the design from scratch?
  • What would I do now if there were no legacy system constraints?

Note that these questions involve design but also encourage reflection beyond the immediate design challenge. The latter is important because the longer you work on a product or project, the easier it is to develop design blinders.

Kickstart your brain (Image credit: geralt) (Large preview)

Easing into deep work or jumping in with both feet are often useful as long as it’s possible to avoid those nettlesome distractions. Even so, everyone gets stuck and needs time to regroup and let the mind wander.

Tip 3: Schedule Unstructured Thinking Time

Just as designers and other professionals need time to think through complex problems, they also need time to let the mind wander. The reason is the science behind “shower moments,” when ideas seem to arrive out of the blue.

In fact, the brain needs time for incubation, the psychological term for the unconscious recombination of thought processes after they are stimulated by conscious mental effort such as working on a specific design problem. In other words, when you set aside a strenuous mental task and do something less demanding, the brain is able to process and organize your thoughts to form new ideas.

Effective leaders value unstructured thinking time as outlined in How to Regain the Art of Lost Reflection. Jeff Weiner, CEO at LinkedIn, blocks at least 90 minutes for reflection and describes these buffers as “the single most important productivity tool” he uses. Susan Hakkarainen, Chairman and co-CEO of Lutron Electronics, uses 40-minute walks to reflect explaining that “Thinking is the one thing you can’t outsource as a leader. Holding this time sacred in my schedule despite the deluge of calls, meetings, and emails is essential.”

In short, designers should take their cues from these business leaders. Give your brain a break.

Tip 4: Vote It Off The Island

This tip comes from the Harvard Business Review article Stop Doing Low-Value Work by Priscilla Claman. She cites the example of a controller who was producing monthly reports that nobody read. He sent a list to his colleagues asking them to identify the three or four most important reports. He simply stopped writing the reports that no one was reading.

Another approach is to request permission to not do something such as asking customers if they really want their receipts. The point, writes Claman, is to stop doing something that is not important but to ask first to avoid getting in trouble. It’s vital that we stop ourselves from doing unimportant work.

Designers can identify possibly unimportant work by asking if:

  • Every wireframe must include detailed annotations;
  • Every design deliverable must include a detailed design document;
  • It’s really necessary to produce many variations of a design when studies about choice and decision making show that too many options make it harder to reach a decision.

No one wants to feel as if their work is sitting on a virtual shelf. By asking clients and stakeholders what matters to them, you’ll cater to their needs and save time by discarding unnecessary tasks.

The next step is to assess the remaining important work to determine how much time you can, and should, devote to deep thinking.

Tip 5: Distinguish Deep And Shallow Work

Follow the steps below to make this assessment concrete, something you can point to and share with your boss.

  1. Identify the activities that you consider deep work such as planning a usability test, drawing wireframes, or mocking up a prototype.
  2. Identify shallow work activities like answering emails, attending administrative meetings or meetings tangentially related to your core responsibilities.
  3. Estimate the amount of time you spend on deep and shallow work each week.
  4. Meet with your boss for thirty minutes and ask her what she thinks the ratio of deep to shallow work should be. Ask for a specific number. If you disagree, politely ask if you may experiment with a different ratio for one month.
  5. Then, stick to the agreed-upon number for one month. Document any changes to your productivity, anything that contributes to a better product or service. After one month, report these findings to your boss.

This approach offers two advantages:

  • It’s usually wise to solicit the boss’s support.
  • A single proposal about deep work will not change an entire organization. Involving management, however, can serve as a catalyst for broader change just as the Google Ventures Design Sprint influenced the design process at Google and beyond.

Why Deep Work Makes Everything Better

Deep work allows designers and developers to thrive by leveraging their skills to solve complex problems and create better products and designs. Better products are likely to boost the bottom line while thriving and highly satisfied employees are more likely to stay (reducing turnover) and put their best selves forward.

Perhaps the best news for employers is that deep work does not require adding staff. The solution, explains computer scientist Cal Newport, is to re-configure work and communication. In other words, it’s not more people; it’s the same people managing work differently.

For example, agencies often answer to clients and need to be available at a moment’s notice. Rather than require every employee to be tethered to a phone or laptop, Newport suggests assigning a different employee each day to a dedicated email or a special “bat phone.” This shows the client their importance to the agency while also allowing designers to concentrate on designing, building, and solving problems.

Conclusion

Deep work is the ability to focus on challenging tasks like design and coding. Frequent interruptions make deep work nearly impossible and impose a high financial cost. In this piece, we’ve described five tips for maximizing the time you devote to deep work.

  1. Jump into design work.
    Draw fresh wireframes or work on a new design problem before checking emails and Slack messages. Block two-hour chunks on your calendar to allow time for deep thinking.
  2. Kickstart your brain with useful questions.
    Take a few minutes to ask what you are trying to accomplish and how it aligns with the company’s keep performance indicators (KPIs). Alignment with KPIs is especially important for user experience designers who are frequently asked to justify their budget
  3. Schedule unstructured thinking time.
    Take a walk, stare out the window, or whatever allows your mind to wander. This “downtime” allows the brain to form new connections.
  4. Vote it off the island.
    Are you writing reports that no one reads? Are you scheduling meetings that your co-workers find less than useful? Ask your colleagues if it’s okay to stop. They might respond with a gleeful “yes!”
  5. Distinguish deep and shallow work.
    Then, meet with your boss to arrive at the right balance between these two types of work.

Further Reading on SmashingMag:

Smashing Editorial
(ah, il)

Source: Smashing Magazine, Better Design With Deep Thinking

Adapting Agile For Part-Time Teams

dreamt up by webguru in Uncategorized | Comments Off on Adapting Agile For Part-Time Teams

Adapting Agile For Part-Time Teams

Adapting Agile For Part-Time Teams

Philip Kiely



<p>The formal notion of the Agile software development method is about as old as I am (the Agile Manifesto was published in February 2001). I point this out not to <a href="https://xkcd.com/1686/">make you feel old</a>, but instead to demonstrate that Agile has had a long time to infiltrate software development. While the methodology advocates for &ldquo;co-located, dedicated teams,&rdquo; in its ubiquity Agile is frequently applied to teams partially or fully composed of part-time workers. While there are lessons to be taken from the practice, Agile must be adapted to support, rather than hinder, part-time teams.</p>

<p>In this article, we’ll consider applying Agile to a team of 5-10 people each working 20 hours per week on a project. We’ll further consider the frequent intersection of remote work with part-time teams and discuss situations where contributors work as few as 5 hours per week on a project. We’ll also hear from professors Armando Fox at the University of California, Berkeley and Barbara Johnson at Grinnell College with their thoughts on part-time Agile teams.</p>

<h3 id="why-does-part-time-work-happen">Why Does Part-Time Work Happen?</h3>

<p>While the &ldquo;5 developers for 20 hours&rdquo; example may seem contrived, many situations lead to the scenario. You may have:</p>

<ul>
<li>Developers assigned to multiple clients, projects, or teams within a single company,</li>
<li>A team with contractors or co-op interns,</li>
<li>Volunteers working on an open-source or community project, or</li>
<li>An after-hours team working on a startup or product.</li>
</ul>

<p>While we will examine the many challenges involved in managing teams under these constraints, usually the alternative to working part-time with someone isn’t their full-time efforts, the alternative is not being able to work with them at all. While part-time workers and teams often require extensive compromises, with clear and effective management they can still be a huge net positive to a team and business.</p>

<h3 id="tenets-of-agile">Tenets Of Agile</h3>

<p>Given its prevalence in the software development industry, everyone understands Agile slightly differently. To get through adapting the framework together, we need a shared vocabulary to define &ldquo;regular&rdquo; Agile, you know, the kind that advocates for &ldquo;dedicated, co-located teams.&rdquo; Agile implements practices, rituals, and roles to promote effective work.</p>

<p>Agile, as implemented, involves certain practices:</p>

<ul>
<li>&ldquo;Sprints&rdquo; are discrete units of time, often 2 weeks, that determine the cycle of work for Agile teams.</li>
<li>&ldquo;Stories&rdquo; or &ldquo;user stories&rdquo; are well-scoped units of work that a single team member can complete in some fraction of the sprint.</li>
<li>Often, teams organize their stories on &ldquo;kanban boards&rdquo; or similar methods of tracking story state: to do, in progress, in review, and done in a given sprint.</li>
</ul>

<p>Agile revolves around four rituals:</p>

<ol>
<li><strong>Sprint Planning</strong><br />
This is a meeting that opens each sprint with writing, estimating, prioritizing, and assigning stories that the team intends to complete for the sprint.</li>
<li><strong>Daily Stand-Up</strong><br />
A chance for teams to meet every day to discuss the previous day’s progress, discuss the day’s work, and raise any roadblocks. Ideally, the meeting is very short (5-15 minutes) and is near the start of the workday to minimize the interruption of dedicated work time.</li>
<li><strong>Sprint Review</strong><br />
This is part of a meeting which ends each sprint with a review of work accomplished, new backlog items, missed estimates, and other quantifiers of team progress.</li>
<li><strong>Sprint Retrospective</strong><br />
A discrete meeting or block of time for discussing what went well and what to improve about how the team operates in qualitative terms.</li>
</ol>

<p>Agile teams usually have distinct, cross-functional roles. Common roles include:</p>

<ul>
<li>The &ldquo;project manager/team lead&rdquo; manages the team, assigns work, reports to management, assists team members, and performs other managerial duties.</li>
<li>The &ldquo;scrum master&rdquo; is responsible for leading Agile rituals.</li>
<li>A &ldquo;product owner/product manager&rdquo; represents the client or end-user to the team. They have an active hand in writing stories, reviewing product functionality, and communicating progress to clients and expectations to the team.</li>
<li>An &ldquo;individual contributor&rdquo; is any member of the team whose main responsibility is building the product. Developers, designers, QA specialists and writers are all examples of individual contributors.</li>
</ul>

<p>While these definitions are important for our shared understanding, the major theme of this article is that achieving your team’s goals is more important than implementing &ldquo;proper&rdquo; Agile. If this doesn’t exactly match your setup, common elements should help apply upcoming recommendations to your experience.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg"
sizes="70vw"
alt="'Scrum Board' by İrfan Simsar on Unsplash"
/>

</a>

<figcaption class="op-vertical-bottom">
(Image credit: ‘İrfan Simsar’ on <a href='https://unsplash.com/'>Unsplash</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg'>Large preview</a>)
</figcaption>

</figure>

<h3 id="constraints-of-part-time-work">Constraints Of Part-Time Work</h3>

<p>Immediately, we see how the constraints of part-time work cut into standard Agile. First off, in a given two-week sprint, each employee may spend 2 hours in sprint planning, 10 times 15 minutes in stand-up, 1 hour in sprint review, and 30 minutes in sprint retrospective, for a total of 6 hours in Agile meetings. For a full-time employee, that’s only 7.5% of their 80-hour fortnight, for a half-time employee it doubles to 15%. Add in other meetings and account for context switching and suddenly your individual contributors have very little time left each week to individually contribute.</p>

<p>Thus, part-time work exacerbates the need for good capacity estimation and up-front planning while reducing the time available for it. Fortunately, Agile’s notion of story points applies well. Story points estimate effort rather than time and thus stay constantly effective between full-time and part-time workers, though of course part-time workers will take longer to achieve the same amount of story points, which you can account for by measuring the team’s velocity.</p>

<p>Even if your development team is part-time, your clients may not be. Customer support, emergency bug fixes, outage repairs, and even regular communication can be more difficult with part-time work adding additional overhead.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg"
sizes="100vw"
alt="'Man in a watch typing' by Brad Neathery on Unsplash"
/>

</a>

<figcaption class="op-vertical-bottom">
(Image credit: ‘Brad Neathery’ on <a href='https://unsplash.com/'>Unsplash</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg'>Large preview</a>)
</figcaption>

</figure>

<h3 id="frequently-intersecting-constraints">Frequently Intersecting Constraints</h3>

<p>While not all part-time teams will experience these additional challenges, in my experience part-time work often overlaps with remote work, different time zones and availabilities, and classification of workers as temporary, contractors, or interns instead of employees. This is not an article about any of these things, but they bear mentioning.</p>

<p>Part-time work adds significant overhead to the already difficult task of finding a regular time when everyone is available to meet. If some team members work in the mornings and others in the evenings or are located across the world from each other, scheduling quickly becomes impossible. GitLab has published <a href="https://about.gitlab.com/handbook/communication/">extensive documentation on remote communication</a> that might be helpful.</p>

<p>Working with contractors, student interns, temporary hires, or other non-permanent teams or team members brings its own advantages and challenges. That said, however, someone got to the table, the Agile framework treats them as an equal member of the team and stakeholder in the project.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg"
sizes="100vw"
alt="'Untitled' (Meeting) by You X Ventures on Unsplash."
/>

</a>

<figcaption class="op-vertical-bottom">
(Image credit: ‘You X Ventures’ on <a href='https://unsplash.com/'>Unsplash</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg'>Large preview</a>)
</figcaption>

</figure>

<h3 id="redefining-rituals-for-part-time-teams">Redefining Rituals For Part-Time Teams</h3>

<p>Now that we’ve framed the challenges that part-time work creates, let’s focus on solutions. While I’ve seen a number of successful modifications to Agile rituals for part-time teams, I reached out to Professor Armando Fox, co-author of <em>Engineering Software as a Service: An Agile Approach Using Cloud Computing</em> with David Patterson. In an email interview, he emphasized two key goals of agile rituals to retain:</p>

<blockquote>“The reason Agile is a good fit [for part-time teams] is the idea of using user stories as the unit of work. The key to doing this successfully is up-front planning and continuous check-ins.”<br /><br />&mdash; Armando Fox</blockquote>

<p>Sprint planning condenses up-front planning to a single high-value meeting. For part-time teams, the product owner, scrum master, and team lead (who may be only one or two people, more on that later) should do as much pre-meeting work as possible to define well-scoped tickets for the individual contributors to estimate and take. Fox said &ldquo;if stories are tightly-circumscribed, branches are short-lived, stories require modest amounts of code that can be delivered with good test coverage, and code quality is maintained through continuous code review (pull requests) as well as the use of code quality measurement tools, the team can successfully divide-and-conquer even if they’re not always working at the same time.&rdquo; That’s definitely a lot of &ldquo;if&rdquo; statements, working in this manner will take dedicated effort from the entire team, but should result in a quality product.</p>

<p>The other half of the equation is continuous check-ins. Agile’s daily stand-ups work great for co-located full-time teams, if everyone’s in the office by 9 or 10 AM the meeting happens more or less naturally. It’s tempting to replace this with an asynchronous check, like status-report emails, but Fox advocates that teams stick to the ritual. &ldquo;The team needs to check-in frequently &mdash; we recommend daily 5-minute stand-ups &mdash; so that any red flags can be spotted early. Even part-time teams can find 5 minutes a day that the whole team is available. Email isn’t good for this; an interactive meeting, where people can also mention blocking items and others can immediately speak up with suggestions, is the best format,&rdquo; he wrote.</p>

<p>For a part-time team, it may also be tempting to do away with regular meetings entirely and rely solely on the start and end of sprint check-ins. Fox warns that &ldquo;every team [that he has] coached at Berkeley has said that they quickly realized that once-a-week team meetings were nowhere near enough to keep everyone on the same page.&rdquo;</p>

<p>Sprint reviews and retrospectives are important components of Agile. If teams do not regularly evaluate their working practices and performance, bad interactions will continue unchecked and discontent will grow. However, the velocity measurement and end-of-sprint re-assignment tasks can be handled by the scrum master outside of meeting times, and the team leader can use one-on-one meetings and their perception of team mood in stand-ups and sprint planning to reduce the need for sprint review and retrospective.</p>

<p>If you absolutely need to cut back on the number and duration of Agile meetings, cut review and retrospective first. That said, it is important to celebrate the team’s progress each sprint and give people space to air grievances. A decent compromise can be to extend the last stand-up of each sprint to accomplish this communication within the team.</p>

<h3 id="defining-roles-on-a-part-time-agile-team">Defining Roles On A Part-Time Agile Team</h3>

<p>This section depends entirely on the composition of the team. However, there are a few useful heuristics for assigning roles. Responsibilities assigned should minimize communication overhead (which scales worse-than-linearly with team size), fit individual contributors&rsquo; abilities, and account for team members&rsquo; schedules and availability.</p>

<p>For this section, I turned to Professor Barbara Johnson, who teaches a team software development course that I am currently enrolled in at Grinnell College. She wrote &ldquo;I have sometimes seen teams come to rely upon what might be called a &lsquo;chief organizer&rsquo; who combines the roles of not only a scrum master (who organizes the team) but also the product owner (who coordinates and documents the client’s needs and feedback). This lessens the cognitive overhead of the rest of the team, who then can focus more on moving the project’s code and testing suite forward with each iteration.&rdquo; This matches my experience with part-time teams.</p>

<p>If possible, condense the managerial positions (team lead, product manager, scrum master) into a single role and assign that role to the &ldquo;fullest-time&rdquo; team member. If you have a team of 10 where only 1 person is full-time or otherwise has greater availability, that person should have as many organizational and communication responsibilities as feasible. Part-time teams require just as much communication as full-time teams and an even greater logistical effort, so concentrating that work in one person massively reduces communication overhead.</p>

<p>However, frequently this isn’t possible, either because no one has extra availability or because those people are better suited to individual contributor roles. In that case, I still advocate for condensing managerial responsibilities as much as possible but breaking the product owner back out into its own role. In this case, it’s important to be realistic when estimating how much further work these people will be able to do on user stories considering their other work for the team and client.</p>

<p>Most of the members of the part-time team will be individual contributors. There are two competing philosophies for individual contributors: generalist teams and teams of specialists. Imagine that your team is developing a web application. A generalist team would be composed of entirely full-stack developers. These developers would never be blocked on others&rsquo; work as, in theory, they are equally comfortable on anything from design to deployment. Alternately, if a designer, front-end engineer, back-end engineer, and site reliability engineer comprise a team, they will be fast and effective at their own work because they only spend their time on the thing that they’re best at.</p>

<p>As a team organizer, you may find yourself with a team of generalists, a team of specialists, or a mix. Putting together a part-time team of solid performers is hard enough without restricting yourself to one type of individual contributor, so, fortunately, both types bring something useful to the table. If you can recognize which of your individual contributors are generalists and which are specialists, you can assign tasks more effectively to maximize the impact of their limited work time.</p>

<p>Finally, on teams where people are working ten or fewer hours per week, it is tempting to throw out roles entirely and just say &ldquo;do what you can.&rdquo; Per our theme, these super-part-time teams need even more structured communication but have even less time for it. If everyone has such limited, scattered availability that you cannot justify assigning roles at all, it’s probably worth re-examining the structure, goals, and feasibility of the project.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg"
sizes="100vw"
alt="'At the bustling Times Square' by Saulo Mohana on Unsplash"
/>

</a>

<figcaption class="op-vertical-bottom">
(Image credit: ‘Saulo Mohana’ on <a href='https://unsplash.com/'>Unsplash</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg'>Large preview</a>)
</figcaption>

</figure>

<h3 id="client-communication">Client Communication</h3>

<p>Software development is slow, complex work, and part-time teams only magnify that truth. Agile includes the client in the process by writing user stories, rapid prototyping, a quick release schedule, and consistent communication.</p>

<p>As a part-time team, communicate reasonable expectations to the client. For a half-time team, remember that development time is cut by more than half, build an extra buffer into doubled estimates. As development time is limited, it is critical to solicit complete, accurate specifications when meeting with the client or end-users to avoid wasting your efforts.</p>

<p>Don’t let part-time work make you fall behind on client communication. Even if there is very little progress to report, soliciting regular feedback and posting updates at a reasonable cadence should increase the client’s patience with the slow development pace.</p>

<h3 id="conclusion-goals-methods">Conclusion: Goals &gt; Methods</h3>

<p>You can get a lot done in a part-time schedule. Outside of coding, 10-20 hours per week is enough time to train for a first marathon. With a strong team and good working practices, it is enough time to bring a great product to the market. Using Agile to encourage up-front planning and continuous check-ins with user stories, regular stand-ups, and well-defined roles will allow even part-time teams to overcome communication barriers and work effectively towards a shared goal.</p>

<h4><span class="rh">Further Reading</span> on SmashingMag:</h4>

<ul>
<li><a title="Read 'Bringing A Healthy Code Review Mindset To Your Team'" href="https://www.smashingmagazine.com/2019/06/bringing-healthy-code-review-mindset/" rel="bookmark">Bringing A Healthy Code Review Mindset To Your Team</a></li>
<li><a title="Read 'Creating Authentic Human Connections Within A Remote Team'" href="https://www.smashingmagazine.com/2019/08/creating-authentic-human-connections-remote-team/" rel="bookmark">Creating Authentic Human Connections Within A Remote Team</a></li>
<li><a title="Read 'Building Diverse Design Teams To Drive Innovation'" href="https://www.smashingmagazine.com/2018/05/building-diverse-design-teams-innovation/" rel="bookmark">Building Diverse Design Teams To Drive Innovation</a></li>
<li><a title="Read 'The Case For Brand Systems: Aligning Teams Around A Common Story'" href="https://www.smashingmagazine.com/2019/06/case-brand-systems-align-teams/" rel="bookmark">The Case For Brand Systems: Aligning Teams Around A Common Story</a></li>
</ul>

Smashing Editorial
(dm, yk, il)

Source: Smashing Magazine, Adapting Agile For Part-Time Teams

SmashingConf New York 2019: Videos And Photos

dreamt up by webguru in Uncategorized | Comments Off on SmashingConf New York 2019: Videos And Photos

SmashingConf New York 2019: Videos And Photos

SmashingConf New York 2019: Videos And Photos

Rachel Andrew



<p>We love running our event in New York, and given that it sold out a long way in advance we think that you do too. If you didn&rsquo;t manage to get a ticket, this post should give you a feel for what happened. We also have the video of the presentations to share with you.</p>

<p>Enjoy this roundup, and if you want to be there in person for one of our events next year, tickets are on sale right now!</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg"
sizes="100vw"
alt="A set of mock show posters feature the Smashing cat"
/>

</a>

<figcaption class="op-vertical-bottom">
Topple the Cat greeted attendees by way of our Broadway posters (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<ul>
<li><a href="#the-presentations">The Presentations</a></li>
<ul>
<li><a href="#day-1">Day 1</a></li>
<li><a href="#day-2">Day 2</a></li>
</ul>
<li><a href="#workshops">Workshops</a></li>
<li><a href="#side-activities">Side Activities</a></li>
<ul>
<li><a href="#morning-run">Morning Run</a></li>
<li><a href="#evening-events">Evening Events</a></li>
</ul>
</ul>

<h3 id="the-presentations">The Presentations</h3>

<p>The main focus of the conference is the speakers and the presentations they bring. As with all of our 2019 events, some speakers opted to present without slides.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg"
sizes="100vw"
alt="One person in the middle of the stage, two behind a desk"
/>

</a>

<figcaption class="op-vertical-bottom">
Brad Frost, Dan Mall, and Ian Frost co-presenting (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<p>In the tables below, I’ve linked to slides for those talks which had them, plus the video of each presentation. Enjoy two days worth of learning from the comfort of your own couch!</p>

<h4 id="day-1">Day One</h4>

<p>The <a href="http://smashed.by/midtown">Day One Collaborative Doc</a> created by attendees is full of takeaways from the first day of the conference.</p>

<table class="tablesaw break-out" data-tablesaw-mode="stack" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Speaker Name</th>
<th>Talk Title</th>
<th>Video &amp; Slides</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dan Mall and Brad Frost</td>
<td>Designer vs. Developer</td>
<td><a href="https://vimeo.com/367846576">Video</a>, <a href="https://smashingconf.com/pdf/smashingConfNYC2019-designerVsDeveloper.pdf">Slides</a></td>
</tr>
<tr>
<td>Marcy Sutton</td>
<td>Garbage Pail Components</td>
<td><a href="https://vimeo.com/367853694">Video</a>, <a href="https://marcysutton.github.io/garbage-pail-components/">Slides</a>
</td>
</tr>
<tr>
<td>Trine Falbe</td>
<td>Designing For Kids Is Not A Game</td>
<td><a href="https://vimeo.com/367858039">Video</a>, <a href="https://smashingconf.com/pdf/2019-smashing-design-for-kids.pdf">Slides</a></td>
</tr>
<tr>
<td>Denys Mishunov</td>
<td>I Built A Frankenstein Monster:
3 Stories Of Migration</td>
<td><a href="https://vimeo.com/367865086">Video</a>, <a href="https://noti.st/mishunov/SfkHLg/i-built-frankenstein-monster-3-stories-of-migration">Slides</a></td>
</tr>
<tr>
<td>Maggie Wachs</td>
<td>Lessons Learned From A Decade Of Building Pattern Libraries</td>
<td><a href="https://vimeo.com/367869445">Video</a>, <a href="https://github.com/maggiewachs/SmashingConf2019NYC">Slides</a></td>
</tr>
<tr>
<td>Wes Bos</td>
<td>Slam Dunk Your JavaScript Fundamentals</td>
<td><a href="https://vimeo.com/367872808">Video</a>, <a href="https://wesbos.github.io/Slam-Dunk-JavaScript/#1">Slides</a></td>
</tr>
</tbody>
</table>

<h4 id="day-2">Day Two</h4>

<p>Check out the <a href="http://smashed.by/broadway">Day Two Collaborative Doc</a> for more resources and thoughts from our attendees and speakers.</p>

<p>Our mystery speaker was dina Amin. The Smashing Team love her <a href="https://www.instagram.com/dina.a.amin/">Instagram</a>!</p>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Mystery speaker was soooo good! Dina’s talk about the stop motion animation and her videos blew the minds away of the audience! Enjoyed every bit of it <a href="https://twitter.com/hashtag/smashingconf?src=hash&amp;ref_src=twsrc%5Etfw">#smashingconf</a> 🗽<a href="https://twitter.com/hashtag/animation?src=hash&amp;ref_src=twsrc%5Etfw">#animation</a> <a href="https://twitter.com/hashtag/productdesign?src=hash&amp;ref_src=twsrc%5Etfw">#productdesign</a> <a href="https://t.co/YRS41ou9LZ">pic.twitter.com/YRS41ou9LZ</a></p>&mdash; Naresh Baleswaran (@nareshbabub) <a href="https://twitter.com/nareshbabub/status/1184478978440126466?ref_src=twsrc%5Etfw">October 16, 2019</a></blockquote>

<p>We then enjoyed talks covering a wide range of topics from our day two speakers.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg"
sizes="100vw"
alt="A woman presenting on stage"
/>

</a>

<figcaption class="op-vertical-bottom">
dina Amin (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<table class="tablesaw break-out" data-tablesaw-mode="stack" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Speaker Name</th>
<th>Talk Title</th>
<th>Video &amp; Slides</th>
</tr>
</thead>
<tbody>
<tr>
<td>dina Amin</td>
<td>Mystery Speaker</td>
<td><a href="https://vimeo.com/367875942">Video</a></td>
</tr>
<tr>
<td>Harry Roberts</td>
<td>Demystifying Vim, Live!</td>
<td><a href="https://vimeo.com/367879587">Video</a></td>
</tr>
<tr>
<td>Sara Soueidan</td>
<td>Applied Accessibility: Practical Tips For Building More Accessible Front-Ends</td>
<td><a href="https://vimeo.com/367882926">Video</a>, <a href="https://www.dropbox.com/s/g344gdjlijyuqj1/applied-accessibility-talk.pdf?dl=0">Slides</a></td>
</tr>
<tr>
<td>Remy Sharp</td>
<td>Using A Modern Web To Create 1980s Horrible Slow and Loud Loading Screens</td>
<td><a href="https://vimeo.com/367885607">Video</a></td>
</tr>
<tr>
<td>Scott Jehl</td>
<td>Move Fast And Don't Break Things</td>
<td><a href="https://vimeo.com/367887672">Video</a></td>
</tr>
<tr>
<td>Miriam Suzanne</td>
<td>CSS is Rad</td>
<td><a href="https://vimeo.com/367890815">Video</a>, <a href="https://sliiides.netlify.com/css-is-rad/">Slides</a></td>
</tr>
</tbody>
</table>

<h3 id="workshops">Workshops</h3>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg"
sizes="100vw"
alt="People behind desks working with stickers and paper"
/>

</a>

<figcaption class="op-vertical-bottom">
Workshop attendees working together (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<p>Our workshops are a big part of each of our Smashing conferences. We held busy workshops the day before and day after SmashingConf New York, at the Microsoft Technology Center. Here is what attendees could choose from.</p>

<table class="tablesaw break-out" data-tablesaw-mode="stack" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Name</th>
<th>Workshop Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dan Mall and Brad Frost</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/dan-mall-brad-frost/">Designer / Developer Collaborative Workflow</a></td>
</tr>
<tr>
<td>Scott Jehl</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/scott-jehl/">Lightning Fast Web Performance</a></td>
</tr>
<tr>
<td>Marcy Sutton</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/marcy-sutton/">Building Accessible Sites With Gatsby</a></td>
</tr>
<tr>
<td>Vitaly Friedman</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/vitaly-friedman-ux/">Smart Responsive UX Design Patterns</a></td>
</tr>
<tr>
<td>The Deque Team</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/deque/">How To Translate Wireframes Into Accessible HTML/CSS</a></td>
</tr>
<tr>
<td>Rachel Andrew</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/rachel-andrew/">Next Steps With CSS Layout</a></td>
</tr>
<tr>
<td>Remy Sharp</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/remy-sharp/">Modern Universal React Dev With Next.js</a></td>
</tr>
<tr>
<td>Harry Roberts</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/harry-roberts/">Front-End Performance: Building Faster Websites</a></td>
</tr>
<tr>
<td>Vitaly Friedman</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/vitaly-friedman/">New Front-End Adventures</a></td>
</tr>
</tbody>
</table>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Spending the next few days disgesting all of the front-end nuggets from today's workshop. Thanks <a href="https://twitter.com/hashtag/smashingconf?src=hash&amp;ref_src=twsrc%5Etfw">#smashingconf</a>! <a href="https://t.co/c8oBcWa0Fw">pic.twitter.com/c8oBcWa0Fw</a></p>&mdash; Misha Trombley (@mishhmich) <a href="https://twitter.com/mishhmich/status/1184951201332375552?ref_src=twsrc%5Etfw">October 17, 2019</a></blockquote>

<h3 id="side-activities">Side Activities</h3>

<p>A conference isn’t just about the talks and speakers. We want to make spaces where attendees and speakers can learn from each other and share experiences in a more informal setting. We want to offer something for everyone &mdash; from the party-goers to the fitness enthusiasts, and everyone in-between! So at lunchtime, we had lunch sessions: On Day 1, we saw the &ldquo;Web We Want&rdquo; panel discussion from Microsoft, and on Day 2, Deque ran a session for those who wanted to learn more about accessibility over a plate of lunch.</p>

<p>We also invited people who organize community meetups in the local area onstage to tell the audience about their group.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg"
sizes="100vw"
alt="A woman onstage under a slide saying Local Community"
/>

</a>

<figcaption class="op-vertical-bottom">
Community Groups talk to the Smashing audience (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<h4 id="morning-run">Morning Run</h4>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">What a smashing way to start a day of <a href="https://twitter.com/smashingconf?ref_src=twsrc%5Etfw">@smashingconf</a> 🏃‍♂️☀️ <a href="https://twitter.com/hashtag/grouprun?src=hash&amp;ref_src=twsrc%5Etfw">#grouprun</a> <a href="https://twitter.com/hashtag/morningrun?src=hash&amp;ref_src=twsrc%5Etfw">#morningrun</a> <a href="https://twitter.com/hashtag/5k?src=hash&amp;ref_src=twsrc%5Etfw">#5k</a> <a href="https://twitter.com/hashtag/centralpark?src=hash&amp;ref_src=twsrc%5Etfw">#centralpark</a> <a href="https://twitter.com/KajBergkvist?ref_src=twsrc%5Etfw">@kajbergkvist</a> <a href="https://t.co/1lo19y12Ed">https://t.co/1lo19y12Ed</a> <a href="https://t.co/elCmYwAePo">pic.twitter.com/elCmYwAePo</a></p>&mdash; Tobias Löfstrand (@tobeleaf) <a href="https://twitter.com/tobeleaf/status/1184081029595832321?ref_src=twsrc%5Etfw">October 15, 2019</a></blockquote>

<p>The SmashingConf run is becoming a fixture, and in New York we had Central Park to run around. We started just as it was getting light and joined the runners of New York for a lap of the park.</p>

<h4 id="evening-events">Evening Events</h4>

<p>The <a href="https://smashingconf.com/ny-2019/jam-session">Jam Session</a> this time round was hosted by Shopify. Attendees spent time socializing and hearing some lightning talks from <a href="https://twitter.com/tiffany_tse">Tiffany Tse</a>, <a href="https://www.twitter.com/partytimeHXLNT">Rachel Weil</a>, <a href="https://www.linkedin.com/in/aprilellsey/">April Ellsey</a>, <a href="https://twitter.com/TimirahJ">Timirah James</a>, <a href="https://twitter.com/jtjpatterson">Jordan Patterson</a>, and <a href="https://twp.io/">Taylor Poulos</a>.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg"
sizes="100vw"
alt="People watching a talk and raising their hands"
/>

</a>

<figcaption class="op-vertical-bottom">
The Jam Session (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<p>We also had a party after day one which was held at The Waylon, where there were some nice craft beers and a lovely outdoor space to enjoy. Luckily the torrential rain didn&rsquo;t arrive until day 2!</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg"
sizes="100vw"
alt="People in an outdoor space at a pub"
/>

</a>

<figcaption class="op-vertical-bottom">
Enjoyng good conversations with new friends (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<h3 id="want-to-join-us-in-2020">Want To Join Us in 2020?</h3>

<p>We packed a lot into those few days! If you were there, we hope that you enjoyed it as much as we did. It was great to meet so many of you.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg"
sizes="100vw"
alt="An audience throwing colored balloons into the air, taken from the stage"
/>

</a>

<figcaption class="op-vertical-bottom">
Balloons! (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<p>In 2020 we&rsquo;re back with many more cats, mysteries and 4 friendly and inclusive conferences. Join us in:</p>

<ul>
<li><a href="https://smashingconf.com/sf-2020/">San Francisco</a> — April 21–22, 2020.</li>
<li><a href="https://smashingconf.com/austin-2020/">Austin</a> — June 9–10, 2020.</li>
<li><a href="https://smashingconf.com/freiburg-2020/">Freiburg</a> — September 7–8, 2020.</li>
<li><a href="https://smashingconf.com/ny-2020/">New York</a> — October 20–21, 2020.</li>
</ul>

<p>The team are already hard at work making these events as amazing as those we have enjoyed running for you this year. Grab an Early Bird ticket and we&rsquo;ll see you there!</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg"
sizes="100vw"
alt="A large group of people on stage under a slide that says Thank You."
/>

</a>

<figcaption class="op-vertical-bottom">
The Smashing Team on stage at the end of the conference (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

https://platform.twitter.com/widgets.js

Smashing Editorial
(il)

Source: Smashing Magazine, SmashingConf New York 2019: Videos And Photos

Collective #564

dreamt up by webguru in Uncategorized | Comments Off on Collective #564










C564_pagesjs

Paged.js

A blog which advocates for innovative approaches to making books in browsers.

Check it out










C564_frontend

Rethinking the Front-end

Shane Yu provides perspectives around the problems and goals of front-end development and discusses how to think about Component Composition.

Read it


Collective #564 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #564

How To Stop Analysis Paralysis With Design

dreamt up by webguru in Uncategorized | Comments Off on How To Stop Analysis Paralysis With Design

How To Stop Analysis Paralysis With Design

How To Stop Analysis Paralysis With Design

Suzanne Scacca



<p>As a web designer, you do your best to remove friction from the decision-making process. You place only one CTA above the fold. You keep interactive elements to a minimum. You make the menu only as large as it needs to be.</p>

<p><strong>But what happens when the content itself causes analysis paralysis?</strong></p>

<p>There’s an overabundance of choice all around the web, from e-commerce stores with thousands of products to content generation machines pushing out new posts every day. While you can’t do anything to stop the flood of information or items going out to your visitors, you can design your interfaces in a way that makes the decision-making process easier to bear. What’s more, you can help them walk away feeling more confident with their choice, too.</p>

<p>Let’s look at what it is about the psychology of choice that can be detrimental for conversions and what you can do to keep your PWA visitors from succumbing to it.</p>

<h3>Why Analysis Paralysis Is Hurting Your Conversion Rate</h3>

<p>Paralysis by analysis is what happens when someone finds a situation or decision too overwhelming or difficult. Despite thinking over the circumstances or options, they’re unable to make a clear choice, often leading to no action at all.</p>

<p>It’s the exact opposite of what we want to happen with our visitors and customers. And, yet, we see it all the time.</p>

<p>Take <a href="https://www.amazon.com/">Amazon</a>, with its hundreds of millions of products. Let’s say a shopper is looking for socks for an upcoming snowboarding trip. So, they search for “snowboard socks”:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg"
sizes="100vw"
alt="Amazon search snowboard socks"
/>

</a>

<figcaption class="op-vertical-bottom">
A search for “snowboard socks” on Amazon yields 728 results. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg'>Large preview</a>)
</figcaption>

</figure>

<p>There are 728 matching results for snowboard socks. While that’s nothing compared to the size of Amazon’s marketplace, it’s still way too many results to sift through on one’s own.</p>

<p>So, the shopper decides to narrow their search down to “knee-high snowboard socks antimicrobial compression”, which hits all of the key features they’re looking for:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg"
sizes="100vw"
alt="Amazon search knee high snowboard socks antimicrobial compression"
/>

</a>

<figcaption class="op-vertical-bottom">
A search for “knee high snowboard socks antimicrobial compression” on Amazon yields 8 results. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg'>Large preview</a>)
</figcaption>

</figure>

<p>That takes the list of 728 products down to a more manageable 8. However, there are a number of problems with this.</p>

<p>For starters, Amazon doesn’t actually present only eight options. The first thing it shows is a banner with sponsored results:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg"
sizes="100vw"
alt="Amazon search – sponsored products banner"
/>

</a>

<figcaption class="op-vertical-bottom">
Amazon displays sponsored products on a search results page before organic products. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg'>Large preview</a>)
</figcaption>

</figure>

<p>The next two rows <em>do</em> contain organic search results. However, the products either don’t have any reviews or high enough ratings to rave about.</p>

<p>To make matters worse, Amazon adds <strong>three more rows of sponsored products</strong> to the end of this page:</strong></p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg"
sizes="100vw"
alt="Amazon search results overrun with sponsored products"
/>

</a>

<figcaption class="op-vertical-bottom">
An Amazon search results page promising 8 results is full of sponsored products. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg'>Large preview</a>)
</figcaption>

</figure>

<p>Essentially, Amazon has tripled the number of products the shopper has to look at now. Not only that, but one could argue that it’s polluted the search process with so many paid products.</p>

<p><strong>It’s just a poor experience all around.</strong></p>

<p>It’s a similar story on mobile. The main difference is that, when the narrow search is applied, only five results remain. That said, Amazon continues to muddle search results by prioritizing sponsored posts. This is what the shopper sees above the fold:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png"
sizes="100vw"
alt="Amazon mobile search results with sponsored products"
/>

</a>

<figcaption class="op-vertical-bottom">
Amazon search results display only sponsored products above the fold on mobile. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png'>Large preview</a>)
</figcaption>

</figure>

<p>Once the shopper scrolls, they’ll see two organic products (with no ratings, much less) before being shown yet another sponsored product:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png"
sizes="100vw"
alt="Amazon mobile search with organic and paid products"
/>

</a>

<figcaption class="op-vertical-bottom">
Amazon fills mobile search results with paid product listings. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png'>Large preview</a>)
</figcaption>

</figure>

<p>What should have been a succinct product search page ends up running on and on with sponsored listings and Amazon recommendations. As you can imagine, this is an even bigger problem for mobile shoppers who don’t have the patience or time to waste.</p>

<h3>How To Simplify Decision-making With Design</h3>

<p><a href="https://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice?language=en#t-574423">Psychologist Barry Schwartz gave a TED talk</a> on this exact problem and explained how it doesn’t just lead to abandoned purchases, but to less satisfying purchases.</p>

<p>Essentially, Schwartz argues that too many choices cause consumers to:</p>

<ul>
<li>Have too-high expectations whereby no option ever seems perfect or satisfying.</li>
<li>Focus on minute details or features they missed out on by not making a different choice.</li>
<li>Regret the option they settled on even if it proved to be the best.</li>
<li>Blame themselves for spending too much time analyzing a decision and still making the “wrong” choice.</li>
</ul>

<p>In other words, an abundance of choice puts your audience in the wrong state of mind. And if your site or PWA can’t afford to process returns or watch visitors walk away at a rate that a company like Amazon can, then you can’t let paralysis analysis become part of the decision-making process to begin with.</p>

<p>Here are some things you can do to make decision-making more bearable, even with too many options available.</p>

<h4>Prioritize Your “Big Rock”</h4>

<p>There’s a productivity hack called the “Big Rocks” method. Essentially, it says that if you want to get more stuff done, you have to take on your biggest challenge or priority first thing. All of the smaller tasks and requests nagging at you get slotted in once you’ve tackled the most critical ones.</p>

<p>And now I’m suggesting you do something similar with your design.</p>

<p>Basically, what you want to do is this:</p>

<ul>
<li>Look at all of the “stuff” you’re trying to put in front of your visitors.</li>
<li>Ask yourself (or your client): “Which one takes top priority right now?”</li>
<li>Then, stick it to the top of your home page.</li>
</ul>

<p>Why do this? Well, for starters, it’s much less overwhelming to show one thing than to throw everything you have at your visitors right away &mdash; or to force them to dig around and figure out where to start. Plus, chances are good that there’s something especially pressing you want every visitor to see.</p>

<p><a href="https://barkshop.com/">BarkShop</a> shows us one way you might do this:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png"
sizes="100vw"
alt="BarkShop Halloween sale banner"
/>

</a>

<figcaption class="op-vertical-bottom">
The home page of the BarkShop website displays a Halloween sale banner. (Source: <a href='https://barkshop.com/'>BarkShop</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png'>Large preview</a>)
</figcaption>

</figure>

<p>Notice how the top of the page isn’t littered with an inventory. Instead, the primary focus is on the Halloween sale.</p>

<p>This is clearly BarkShop’s big rock right now. If they don’t get their Halloween items out the door by October 31, they run the risk of losing money on the seasonal inventory. And while they could leave it up to their visitors to <em>assume</em> there are Halloween toys and treats available, why do that?</p>

<p>It’s hard enough showing up on a site like this and deciding what you’re going to buy for your dog this month. So, let your big rock become their guide.</p>

<p>You can see that it’s not just about the Halloween line either. Just below the banner, BarkShop has prioritized its top-trending toys. This is another trick you can use when designing product inventories and news sites. Display the most popular or top-rated/shared items first. There’s a greater likelihood <a href="https://www.smashingmagazine.com/2019/09/too-much-social-proof/">they’re going to click on something that others have shown interest</a> in than a bunch of random items they have to explore on their own.</p>

<p>Another way you might tackle big rocks in design is to go the way of <a href="https://www.apple.com/">Apple</a>:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png"
sizes="100vw"
alt="Apple home page promo for iPhone 11 Pro"
/>

</a>

<figcaption class="op-vertical-bottom">
The Apple home page banner advertises only its iPhone 11 Pro. (Source: <a href='https://www.apple.com/'>Apple</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png'>Large preview</a>)
</figcaption>

</figure>

<p>Again, Apple could’ve shown a bunch of its iPhones and iPads here or pointed visitors to different categories of products and accessories to explore. Instead, it’s put its big rock right up front: the iPhone 11 Pro.</p>

<p>Sure, there are probably plenty of Apple customers who come here looking for older models. But what makes more sense?</p>

<ul>
<li>Showing a bunch of similar-looking smartphone graphics that visitors are immediately put into analysis paralysis mode with?</li>
<li>Or showing them the latest model that everyone wants?</li>
</ul>

<p>You can do this with other kinds of websites, too. Blogs, for instance, will use the sticky post feature to show off their “big rocks” to every visitor who stops by. This might be the most popular post of all time or it could be something relevant to something happening at the moment.</p>

<p>Whatever it is, there’s a conscious decision made to stop visitors in their tracks and give them a moment of calm before they have to enter decision-making mode.</p>

<h4>Gate Off the Choices</h4>

<p>While you want your visitors to know that there’s a plenitude of things available, you don’t need to tell them how much there is. It’s only going to add to the pressure of the decision-making process.</p>

<p>So, whenever you can, gate off the choices.</p>

<p><a href="https://www.ehealthinsurance.com/">eHealth Insurance</a> is a website where Americans can purchase health insurance for themselves or their companies. With a wide variety of healthcare providers and dozens of plans available for each, a service like this is necessary for insurance-wielding U.S. citizens.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png"
sizes="100vw"
alt="eHealth Insurance home page"
/>

</a>

<figcaption class="op-vertical-bottom">
The eHealth Insurance website gates off its insurance provider options and plans. (Source: <a href='https://www.ehealthinsurance.com/'>eHealth Insurance</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png'>Large preview</a>)
</figcaption>

</figure>

<p>The only decision it asks visitors to make is what kind of insurance they’re looking for. It then asks them to fill out a simple enough form. It’s what eHealth Insurance uses to pare down the options:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png"
sizes="100vw"
alt="eHealth Insurance qualification form"
/>

</a>

<figcaption class="op-vertical-bottom">
The eHealth Insurance form asks qualification questions of visitors to help list the right options. (Source: <a href='https://www.ehealthinsurance.com/'>eHealth Insurance</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png'>Large preview</a>)
</figcaption>

</figure>

<p>Once filled out, eHealth Insurance shows the user a list of providers and plans that are available in their area. This keeps the consumer from having to:</p>

<ol>
<li>Visit individual health insurance websites to do their own research.</li>
<li>Sift through hundreds of options all at once (some of which they’d probably be ineligible for and others that would just be a bad fit).</li>
</ol>

<p>Websites like these typically allow you to compare up to three items at once, making the decision-making process even simpler.</p>

<p>Another way to gate off your choices is by asking visitors to start narrowing their choices from the moment they arrive as <a href="https://www.sothebysrealty.com/eng">Sotheby’s International Realty</a> does:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png"
sizes="100vw"
alt="Sotheby’s home page rental search"
/>

</a>

<figcaption class="op-vertical-bottom">
The first thing the Sotheby’s International Realty PWA asks visitors to do is narrow down their search results. (Source: <a href='https://www.sothebysrealty.com/eng'>Sotheby’s International Realty</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png'>Large preview</a>)
</figcaption>

</figure>

<p>This way, consumers aren’t distracted by all the great-looking properties or even the attractive prices. They’re still focused on taking action (e.g. finding a rental), but it’s more about taking baby steps towards the desired result which makes it much less intimidating. It’s also going to lead to a more satisfying result in the end as they won’t spend time looking at rentals they can’t afford, that don’t allow cats or that are too far away from their kids’ schools.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png"
sizes="100vw"
alt="Sotheby’s location search results"
/>

</a>

<figcaption class="op-vertical-bottom">
Sotheby’s helps visitors narrow their searches by location. (Source: <a href='https://www.sothebysrealty.com/eng'>Sotheby’s International Realty</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png'>Large preview</a>)
</figcaption>

</figure>

<p>The next page of the Sotheby’s search process starts to show matching results, but not before letting them know that there are “55 Luxury Homes for Rent in London”. And if that number is just too much to handle, that’s fine. Directly to the right of that note is a filters widget.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png"
sizes="100vw"
alt="Sotheby’s rental filters"
/>

</a>

<figcaption class="op-vertical-bottom">
Sotheby’s helps visitors narrow down their choices even further with comprehensive filters. (Source: <a href='https://www.sothebysrealty.com/eng'>Sotheby’s International Realty</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png'>Large preview</a>)
</figcaption>

</figure>

<p>Sotheby’s filters are great. Not only are all the essentials covered, but it’s even divided up the filters by category.</p>

<p>Let’s recap how smooth this experience is going to be for already-anxious home-buyers or renters:</p>

<ul>
<li>The first thing they see on the Sotheby’s home page is a search bar.</li>
<li>If they do the search, the next thing they see is the number of properties in the area.</li>
<li>If that number is too intimidating, the filters widget is there to help them narrow the list even more.</li>
</ul>

<p>By keeping the rentals off of the home page and even away from the top of the fold of the internal page, Sotheby’s can control how calmly visitors go through the decision-making process.</p>

<h4>Enable Side-by-side Comparison</h4>

<p>Internally, there’s not a lot you can do about choice overload except giving your visitors a really great set of sorting and filtering tools. Even then, once they start to see lists of related products, recommendations on previous purchases and so on, the analysis paralysis is going to creep back in.</p>

<p>One thing you can do to make this less stressful is by including side-by-side comparisons.</p>

<p>It’s similar to laying out pricing plans side-by-side. Rather than make prospective customers review their options one-by-one, stack up the top few choices. Then, align the specifications so it’s as easy as looking across a row to weed something out because it doesn’t fit the budget or the product is too large.</p>

<p>Although Amazon doesn’t handle analysis paralysis flawlessly, I do like what it does with its side-by-side product comparisons:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png"
sizes="100vw"
alt="Amazon comparison table"
/>

</a>

<figcaption class="op-vertical-bottom">
Amazon shows a table of similar products to customers for easy comparison. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png'>Large preview</a>)
</figcaption>

</figure>

<p>I can’t tell you how many times I’ve struggled to make a decision on Amazon, only to discover one of these comparison tables and immediately been able to make up my mind. It’s just so much easier to see a bunch of lookalike products all at once and to say “This one definitely won’t fit in my kitchen” or “That’s the exact color I’m looking for”.</p>

<p>You can do this with other kinds of websites, too. <a href="https://www.verizonwireless.com/">Verizon Wireless</a>, for example, uses a side-by-side comparison to make choosing between its plans easier.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png"
sizes="100vw"
alt="Verizon Wireless 2GB wireless plan details"
/>

</a>

<figcaption class="op-vertical-bottom">
Verizon Wireless displays the details for its 2GB wireless plan. (Source: <a href='https://www.verizonwireless.com/'>Verizon Wireless</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png'>Large preview</a>)
</figcaption>

</figure>

<p>There are scroller dots below this block that indicate to customers that there’s more to be found. All they have to do is scroll to reveal more plan options. And because <a href="https://www.smashingmagazine.com/2019/10/breadcrumbs-pwa/">the scroller breadcrumbs</a> are kept to a reasonable amount, this doesn’t seem like that burdensome of a task.</p>

<p>The next block over, for instance, contains the information for the 4GB plan:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png"
sizes="100vw"
alt="Verizon Wireless 4GB wireless plan details"
/>

</a>

<figcaption class="op-vertical-bottom">
Verizon Wireless displays the details for its 4GB wireless plan. (Source: <a href='https://www.verizonwireless.com/'>Verizon Wireless</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png'>Large preview</a>)
</figcaption>

</figure>

<p>Even though the specs can’t be seen see side-by-side, the details are simply broken down and are consistently laid out. So, when someone moves from plan to plan, the same details are in the same place which makes flipping back and forth quite easy.</p>

<p>Another thing I really like about this is the summary provided at the top of each card. The 2GB one tells customers right away that it’s the best plan if you mostly talk and text whereas 4GB is better if you stream a lot of content and surf the web. This way, if all the technical details don’t mean much to customers, the layman’s summary will help them more confidently decide.</p>

<p>While I realize side-by-side comparisons might be something you’d normally try to avoid on mobile screens, these two examples show that it is possible to do so without introducing too much friction to the experience.</p>

<h3>Wrapping Up</h3>

<p> As I said before, you can’t do anything about scaling back the multitude of options your clients want to present their audiences with. If they want to sell thousands of products to customers that are demanding them, then good for them.</p>

<p>That said, the way you design around these options can have an impact on how well or poorly they’re received. Just remember what Barry Schwartz teaches us about the psychology of choice. If your visitors, users or customers walk away feeling overwhelmed, drained or disappointed with the experience, it’s going to cost you. So, be mindful of how much you present the options to them.</p>

Smashing Editorial
(ra, yk, il)

Source: Smashing Magazine, How To Stop Analysis Paralysis With Design

What Newspapers Can Teach Us About Web Design

dreamt up by webguru in Uncategorized | Comments Off on What Newspapers Can Teach Us About Web Design

What Newspapers Can Teach Us About Web Design

What Newspapers Can Teach Us About Web Design

Frederick O'Brien



It’s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space — as it should — but also one at risk of being unrooted. Every art has its ancient masters. In the case of websites, it’s newspapers.

When you dig into the basic principles of news design, overlaps with the web are frequent and oftentimes indistinguishable. Many web design best practices can be traced directly back to news design. When it comes down to it, websites are made for users to engage with, and hopefully return to. Newspapers have been playing that game for centuries, and winning.

Anyone with even a passing interest in web design stands to benefit from knowing how news design works, and why it works. This piece will examine several tenets of newspaper design and show their connection to best practice online. At the core of that connection is a principle childlike in its simplicity, one newspaper and web designers alike would do well to remember.

Hold The Home Page

Newspapers have been around since the 17th century. They’ve worked hard for their rules, and because their content changes daily the rules have to be abstract. Ninety-five percent of what we see in any given newspaper will not be there the next day. It is what don’t see that is essential for wrangling the contents of newspapers into shape.

This framework is what we’ll be looking at; some of the invisible rules that hold newspapers together. They are concerned mainly with form, and how readers process information. The parallels with web design will soon become clear, and hopefully the lessons too. Let’s start with an obvious one — above the fold.

Above The Fold

If you’ve worked on the web you’ve likely heard the phrase ‘above the fold,’ meaning the content you’re met with when you land on a web page. It is a newspaper term, and it dates back centuries. Due to their size newspapers are often stacked folded in half, so above the fold literally means the content visible above where they’re folded in half. It is the first thing potential readers see. It is often the one and only chance to make an impression, to get people to buy a copy because they just have to know more. If the newspaper isn’t worth picking up for the front page, what reason is there to think it’s worth picking up at all?

Cover of The New York Times, 21 July, 1969

I’d buy that for a dollar! Credit: The New York Times. (Large preview)

The space above the fold is the domain of the lead story, the most important piece of information in the entire paper. It has to hook the reader. This usually equates to big headlines, key pieces of information, and striking imagery. That said, there is not a rigid format. Whatever grabs people’s attention without distorting the truth is on to a winner.

Above the fold is a newspaper’s first and most important answer to ‘the pub test’ — what you’d blurt out if you were telling someone the crux of the story in the boozer. If you had the chance to tell your friends men walked on the moon yesterday, you probably wouldn’t open with the brand of shoes involved. You’d sprint in and yell, “Men have walked on the moon!” That’s above the fold. It’s where newspapers condense the most important story (or stories) of the day to the key points.

The same applies to websites, which no doubt is why the terminology has carried over. ‘Above the fold’ in web design (which online means what you see before scrolling) is the website’s answer to the pub test. What’s the single most important thing people should know? Though this is particularly relevant to home pages, it applies everywhere.

Apple website homepage

Three guesses what Apple wants you to know about right now. (Large preview)

According to a study of 25 million browsers last year, ‘above the fold’ is comfortably the most viewed part of a web page, with engagement peaking just below. From news to ecommerce to social media, the same principle applies: get to the point.

If you’d like to read more above the fold and front pages generally, Newseum’s Front Page poster is a good place to start.

The Gutenberg Principle

So you’ve grabbed someone’s attention. Congratulations. You’ll need to know about the Gutenberg Principle — or Z-pattern. Championed by ‘the father of newspaper design’ Edmund C. Arnold (more on him later), the Gutenberg Principle is a good rule of thumb to follow when thinking about how people engage with a page of content, be it paper or pixels.

The Gutenberg Principle states that when faced with homogenous content, we start at the top left hand corner and finish at the bottom right hand corner, flicking from right to left as we go. This stems from an idea called reading gravity. We in the western world spend our lives reading from left to right, flicking down and to the left to get to the start of the next line. Newspaper design tends to ape that flow.

Gutenberg diagram

The Gutenberg diagram, courtesy of Steven Bradley. (Read his Smashing Magazine article here) (Large preview)

Take the New York Times front page shown earlier for example. Your eyes zig-zag with each line. Where does your eye flick after ‘PLANT FLAG’? Almost certainly to ‘Voice from Moon.’ Breaking this flow tends to be jarring for readers because it’s at odds with a lifetime of reading habits. How often do you see the lead story hugging the right hand side of the page rather than the left? Not often.

The same flow applies to web design. Steven Bradley’s Smashing Magazine article on compositional flow and rhythm explores the principle in an online context, and certainly deserves a read, but I would add that there’s huge value in looking at its application in print. This is a principle that was being applied for decades before the world wide web came along, after all. Any given shortlist of Society for News Design finalists will be a masterclass in content flow. Here are some recent winners to whet your appetite.

Now to be clear, reading gravity isn’t quite as binding as, say, gravity. The eagle eyed among you may have noticed the qualifier that this applies mostly to ‘homogenous’ content. What’s more, it isn’t based on something innate in human nature — it’s guided by language. In languages that read right to left (Arabic for example) the same principle applies, but it is flipped.

Cover of Al Ghad newspaper

Right-to-left languages provide a mirror image of western newspaper layouts. Credit: Tarek Atrissi Design. (Large preview)

This mattered less in the day of print. Papers were generally limited to a geographical region and could reflect the primary language of that region’s audience. In the online realm anyone, anywhere could be visiting your website, so it’s not only valuable to understand the Gutenberg Principle, but to design websites that change shape depending on the language they’re being read in.

Al Jazeera website homepage - English

(Large preview)

Al Jazeera website homepage - Arabic

Al Jazeera flips its content based on the language it’s viewed in. (Large preview)

The Gutenberg Principle is not the only way people engage with content. Eye tracking studies have shown F-shaped patterns are also common online, for example, with more and more ‘hopping’ the further down the page readers go.

These patterns are all useful to know. They are not rules, just trends. Strong news design does not blindly adhere to the Z-pattern come what may; it uses it as a foundation. The same is true for web design. If in doubt, remember it, but don’t worship it. The human eye has an ingrained reading gravity, but great design leads rather than follows.

The adaptability of the web opens up amazing new possibilities for content presentation. The lessons of the Gutenberg Principle are starting points which can and should be played around with. The best rule breakers usually know exactly what the rules are.

For more information on the Gutenberg Principle follow the links below:

Nameplates

Every newspaper has a nameplate. It’s just about the only thing you can guarantee won’t change from edition to edition. It’s the bit at the top (or very occasionally, along the side) of the front page, and comprises of the publication’s name and logo.

A lot of these are iconic in their own right. The nameplates of publications like The Washington Post and The Sun are seared into the public consciousness. Nameplates are the branding, the bit that says, ‘We’re not that other newspaper. We’re this newspaper.’ It communicates who you are and what you’re about.

It also serves as a kind of directory. Newspapers often have teasers in their nameplates, pointing readers to stories that don’t quite warrant a spot on the front page, but are still worth knowing about. It’s a key player in the above the fold game. Stick around. Keep reading. There’s something here for you. Keeping in mind the Gutenberg Principle, the nameplate is likely the very first thing readers will see.

Nameplate collage

Newspapers and websites alike understand the value of nameplates for both branding and navigation. (Large preview)

Practically every website has a nameplate, only on websites we call it the header. Smashing Magazine has one, Amazon has one, Facebook has one. It’s weird for a website not to have one, and for it not to appear on every page. On the web every page has to have a bit of the front page about it. A lot of users arrive at a site via the root domain, but a lot don’t.

This is one reason why nameplates online tend to be busier than their print elders. They are able to do more, which is just as well given more is asked of them. But in news and web design the underlying purpose of the nameplate is the same: get the brand front and centre and guide users to something they’ll care about.

Grid Systems And Content Blocks

Newspapers are pure content. From cover to cover, they are packed with information, information which needs to be well organised and well presented. The grid system is foundational to newspaper design. As water shapes itself to a bowl, news content shapes itself to grid systems.

Columns are the most important element of this. Depending on a newspaper’s format (tabloid, broadsheet, etc.) it might have anywhere from four to fourteen columns. It is rare for the content of newspapers not to shape themselves to these columns one way or another. Text flows down a column then resumes in the next one. Images can span multiple columns, especially if they’re eye-catching.

Front page of Dagbladet newspaper

Early publications, like this 1905 edition of Norwegian newspaper Dagbladet, often stuck very closely to their grid systems. (Large preview)

Newspapers have evolved beyond the strangely rigid stream of consciousness affairs you’ll find in earlier efforts like those above. Now it is generally accepted that newspaper content should be organised in blocks, with each story forming its own box. This is called modular layout, and there are several reasons why it is the standard.

First, it is easier to organise. If every story fits in a clean, tidy space, they can be rearranged with relative ease. When you’re trying to fit dozens (or hundreds) of stories into a finite space with the clock ticking, this is a godsend.

Second, it is clearer. Good information is only worth so much when it’s presented badly. Blocks create pages within pages, where each piece of information is distinct and easy to follow.

Modular layout in The Guardian newspaper

Modular layout in action in The Guardian. (Large preview)

These standards have always played a role in web design, but they are particularly useful to understand now we have CSS Grid at our disposal. Not only do newspaper grid systems offer guidance for arranging content neatly and clearly, they show how content blocks interact with each other, and with advertising. The wrong alignment can look very silly indeed, while the right arrangement is a joy to read.

As ever, there are differences. For example, online there are rarely jumps (when you reach the bottom of a column and continue reading at the top of the next one) because web pages can go down indefinitely. This kind of layout generally makes less sense online because it leads to readers scrolling up as well as down to get through a single piece of content, which is pretty counterintuitive. As Rachel Andrew demonstrates, jumps can be just the thing for listings and small amounts of content, but the practice is generally a product of print’s physical limitations. The main value of jumps in web design may well be for stacking blocks of content, rather than organising copy.

What’s more, both in print and online abandoning the grid system can be striking in its own right. Just as Dada art recoiled from aesthetic norms of the early 20th century, so do brutalist websites invert the grid system to offer something more… unconventional.

Dada print by Theo van Doesburg

A Dada print by Dutch artist Theo van Doesburg. (Large preview)

Homepage of the Yale School of Art

Yale School of Art sticking it to the man, man. (Large preview)

As noted already, to break the rules first you need to know them. For this and everything else, Tim Harrower’s The Newspaper Designer’s Handbook is a superb place to start. For a more sweeping introduction, Carrie Cousins’ Utilising Grids in Print Design over at Design Shack is excellent.

And how much does this all matter when you move over to the web? Well, more and more. CSS properties like Grid, Shapes, and Flexbox makes it easier than ever to both follow and break the rules of the grid system. Just as newspapers routinely venture outside the invisible lines of their wireframes, so too can websites push the boundaries of their own medium.

In his book Art Direction for the Web, Andy Clarke dives head first into the lessons of print media (and others), showing how advances in CSS can add whole new dimensions to the grid system. As Clarke himself puts it:

For years we’ve told each other the web isn’t print. We’ve told ourselves the things we admire in other design media cannot — and sometimes should not — be used online. We needn’t think that anymore.

Hear, hear.

For more inspiration, watch Jen Simmons live code a print layout in CSS Grid at Smashing Conference 2019. Beautiful. And for a more in-depth history of the grid system and its usage, check out this ‘Grids Are Good’ presentation by Khoi Vinh and Mark Boulton.

Look Forward… But Look Backward First

The conventions above were forged by decades — in some cases centuries — of experience, and there’s plenty more where they came from. What they all essentially boil down to is understanding content, and how people are likely to engage with that content.

Newspapers at their best follow a cartoonishly simple principle: present information in ways that are as clear, as attractive, and as accessible as possible. That’s a worthy goal for any website. And don’t take my word for it. These ideas were championed by Edmund C. Arnold, the aforementioned father of modern newspaper design.’ Arnold designed or redesigned hundreds of newspapers during his career, including The Chicago Tribune, The Boston Globe, The National Observer, and Newsday.

Portrait of Edmund C. Arnold

Edmund C. Arnold, ‘the father of modern newspaper design.’ Credit: Josh Meltzer/The Roanoke Times. (Large preview)

He pushed for designers to have more influence, for newspapers to have flair as well as substance. He was also a journalist, and an academic, and wrote numerous books about newspaper design and typography. He knew his stuff. It is no coincidence that the Society for News Design (SND), of which he was a founding member in 1992, now holds two awards each year — one for news design, the other for digital.

Anyone keen to learn more about Arnold and his work could do a lot worse than starting with the resources below:

Newspaper designers are students of the web — so too should web designers be students of newspapers. As improvements in web technology open up new frontiers, it pays to know whether someone else has been here before. We are all looking for the same thing, after all. It’s all, fundamentally, the same language.

You can see this playing out in real time as newspapers adapt to the web. The gold standard of news design online at the moment is probably The New York Times, which was a finalist in the print and digital SND awards this year. What’s interesting about the Times online is the blend between classicism and innovation. The homepage still essentially looks like the front page of a print edition, while individual stories, like ‘The Plot to Subvert Democracy’, immerse themselves in the new possibilities of the web.

Homepage of The New York Times’ website

The New York Times blends best practice of news and web design to make something entirely new. (Large preview)

Or take a newspaper designer like Mario García — part of the generation after Edmund — who’s most recent book, The Story, was designed to be read on mobile phones. The best news designers relish change. The proof is in the pudding. (For those interested, García blogs daily about the overlap of news and web design.)

This, in a lot of ways, is the main takeaway of news design. Its top practitioners are not dogmatists — they are students. When asked at the twilight of his career what his advice was to the next generation of designers, Edmunc C. Arnold’s answer was not a series of rules. It was far simpler than that: know where you came from.

My message to young designers is this: look, kids, you can do better, but the only way to achieve your potential is to go back to — and understand — the basics. That sounds boring, but it’s reality.

Newspapers don’t hold all the keys to great web design, but understanding the principles that guide them can only benefit web designers. There are plenty of kindred spirits in those two worlds. I’m no web designer, but I recognise good web design when I see it in part because of what I know about newspapers. Purpose and style has a way of looking, well, stylish.

Web design guru Jeffrey Zeldman hit the nail on the head when he tweeted this more than a decade ago:

https://platform.twitter.com/widgets.js

Vitaly Friedman was bowing to the same altar when he said, “Good design is about effective communication, not decoration at the expense of legibility.” Both he and Zeldman would find plenty of allies in the news design space. Few, if any, mediums have a richer history wedding content and design than newspapers do. That struggle is all they have.

To The As Yet Unimagined

It’s worth reiterating here that there are clear and undeniable differences between news design and web design. In newspapers the dimensions of the space are always the same, while websites must adapt to radically different screen sizes and devices. In newspapers what you see is what you get, while websites can hide all sorts of useful features out of sight until they’re prompted to appear. The aim of this piece is not to convince you that news and web design are the same. They are, however, often very similar. To be master of one does not make you master of the other, but it helps.

Perhaps this is why Friedman collated a selection of award-winning newspaper designs all the way back in 2008. Back then he rued the fact that print techniques weren’t applicable online. Back then CSS wasn’t sophisticated enough. Well, its is now, and that’s really exciting.

The process never ends. It can’t end. No newspaper or website worth its salt is ever truly ‘done.’ It is always evolving. Look at the first ever newspaper and the first ever website and it’s fair to say a lot has changed in both worlds since then:

The first newspaper

1609 edition of Relation aller Fürnemmen und gedenckwürdigen Historien, widely considered the first newspaper. (Large preview)

The first website

The first ever website. (Large preview)

Both formats have improved massively since those humble beginnings, and there’s an awful lot left to achieve. As C. Y. Gopinath traced out beautifully in 2016, the parameters are always changing; web technology, screen sizes, devices, internet speeds, you name it. In the mobile age maybe the nameplate belongs at the bottom. Who knows? It all lies ahead.

In many respects a torch has been passed from news design to web design. If developers can push forward with the knowledge of their elders on hand, they’ll achieve things previous generations couldn’t even have imagined. What an incredible opportunity. I can’t wait to see what they come up with.

Smashing Editorial
(ra, yk, il)

Source: Smashing Magazine, What Newspapers Can Teach Us About Web Design

Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

dreamt up by webguru in Uncategorized | Comments Off on Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Vitaly Friedman



The web is full of interfaces that leave people out. Of course, it’s not designers’ malicious intent or developers’ lack of empathy that bring us there. It’s just really difficult to foresee a wide range of situations in which our users might find themselves in. We need to build robust and reliable solutions in a world that’s inherently chaotic and unpredictable. Where do we even start?

Because we often build and deploy under tough deadlines, we tend to break accessibility without even noticing it. Our products become slower, clunkier and more painful to use — often simply unbearable for keyboard- and screen reader users, and as such fragile and vulnerable for legal disputes. Let’s fix it.

Meet Inclusive Components, our new handbook for building fully accessible websites and apps.


<img style="border-radius:11px;" srcset="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png" sizes="100vw" alt="Meet Inclusive Components, our new book for building accessible, inclusive interfaces. Written by one-and-only
Heydon Pickering.”>
Because accessibility matters. We’ve teamed up with one-and-only Heydon Pickering to create a handbook for building accessible, inclusive interfaces. The eBook is finished, and it’s being printed this very moment.

About The Book

At its heart, Inclusive Components is a detailed, practical handbook for building fully accessible interfaces. The book examines 12 common interface patterns — accordions, tables, modals, notifications, tabs, toggles, and everything in-between — through the lens of inclusion. The result is accessible and robust components we author, plug in, and use daily.

For years, Heydon Pickering, a seasoned front-end developer with a focus on accessibility, has been writing about accessible solutions. We’ve teamed up with Heydon to produce a book with common challenges and solutions that he’s been refining over all these years.

For each component, the in-depth explorations are meticulously illustrated and all solutions are available as bulletproof code snippets, applicable to your work right away. Bonus: you’ll learn how to build your own accessible components with inclusive design in mind — all in a single book. Jump to table of contents.

332 pages. eBook already available as PDF, ePUB, Amazon Kindle. Printed book will be shipped early December. Written and designed by Heydon. Download a sample PDF (1.1 MB).


The cover of Inclusive Components, a new book by Heydon Pickering.


The inner spreads of Inclusive Components.

Print + eBook

{
“sku”: “inclusive-components”,
“type”: “Book”,
“price”: “39.00”,
“sales_price”: “29.00”,
“prices”: [{
“amount”: “39.00”,
“currency”: “USD”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “39.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “29.00”,
“currency”: “USD”,
“items”: [
{“amount”: “22.00”, “type”: “Book”},
{“amount”: “7.00”, “type”: “E-Book”}
]
}, {
“amount”: “29.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “22.00”, “type”: “Book”},
{“amount”: “7.00”, “type”: “E-Book”}
]
}
]
}

$
29.00

$
39.00

Quality hardcover. Free shipping worldwide, starting from early December.

eBook

{
“sku”: “inclusive-components”,
“type”: “E-Book”,
“price”: “18.00”,
“sales_price”: “15.00”,
“prices”: [{
“amount”: “18.00”,
“currency”: “USD”
}, {
“amount”: “18.00”,
“currency”: “EUR”
}, {
“amount”: “15.00”,
“currency”: “USD”
}, {
“amount”: “15.00”,
“currency”: “EUR”
}
]
}

$
15.00

$
18.00

DRM-free, of course.

ePUB, Kindle, PDF.
Included with Smashing Membership.

Table Of Contents

Each chapter tackles a single component, addressing how different and vulnerable people might read and interact with it, and how they can be better accommodated. Download a sample PDF (1.1 MB).

1. Toggle Buttons
+
2. A Todo List
+
3. Menus & Menu Buttons
+
4. Tooltips & Toggletips
+
5. A Theme Switcher
+
6. Tabbed Interfaces
+
7. Collapsible Sections
+
8. A Content Slider
+
9. Notifications
+
10. Data Tables
+
11. Modal Dialogs
+
12. Cards
+
A preview of the book, with examples ranging from accordions to toggles, tables, notifications, dialogs etc. Download a sample PDF (1.1 MB). Large preview.

About The Author

Heydon Pickering

Heydon Pickering (@heydonworks) has worked with The Paciello Group, The BBC, Smashing Magazine, and Bulb Energy as a designer, engineer, writer, editor, and illustrator. He was shortlisted for Designer Of The Year in The Net Awards.

Heydon previously wrote Inclusive Design Patterns which sold over 10,000 copies. Proceeds from this title were donated to the ACLU and The Democratic Socialists Of America, to help these organizations fight fascism and create a more inclusive society.

Testimonials

Artem Sapegin“Inclusive Components is a very deep and thorough explanation of development of accessible components with real world examples. Heydon Pickering shows several alternative approaches and explains pros and cons of each. It’s also a pleasure to read!”

Artem Sapegin, front-end developer, Wayfair

Sarah Federman“Inclusive Components is chock-full of practical and comprehensive advice on building accessible UI. It’s my go-to resource after the official WCAG and ARIA documentation. I’ve found it extremely helpful when building our design system!”

Sarah Federman, senior front-end developer, Adobe

Andy Bell“What Heydon achieves with his work on Inclusive Components is a pragmatic, friendly and approachable set of guides that help you to generate not just accessible components, but also resilient and progressive starting-points that will help you to build better websites and web apps in general. I often describe this work as crucial learning material for this exact reason.”

Andy Bell, independent designer & developer

Why This Book Might Be For You

The devil is in the detail and often the things you do with good intentions can impose accessibility barriers unknowingly. Inclusive Components is for every front-end developer who wants to learn how to detect and address potential accessibility issues in their work. The book will teach you:

  1. How to use <button> elements, how to apply styles to your toggle buttons, and how to label them.
  2. How to create managed lists that allow users to create and delete content — in an inclusive way.
  3. How to address and resolve accessibility issues with navigation menus and submenus (aka “dropdowns”).
  4. How to create accessible and keyboard-friendly tooltips and toggletips.
  5. How to create a “dark mode” theme that’s both accessible and maintainable long-term.
  6. How to build an accessible content slider to prevent harm for motion-sensitive people.
  7. How to create inclusive notifications with live regions to communicate with your users through visual and aural channels simultaneously.
  8. How to create data tables that are semantically correct, responsive, and sortable.
  9. How to build accessible dialogs and modal dialogs with performance and inclusive design in mind.
  10. How to create and group inclusive cards (e.g. for teasers).

Technical Details

Community Matters ❤️

With Inclusive Components, we’ve tried to create a very focused handbook with applicable, long-living solutions and strategies to create accessible and inclusive interfaces.

Our hope is that with Heydon’s book, you will be able to make better design and coding decisions as you build your interfaces. Perhaps it will even become one of those reference books you’ll reach to every time you need to build one of those common UI components.

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their ongoing support in our adventures. As a result, the eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy.

Stay smashing, and thank you for your ongoing support, everyone!


The cover of Inclusive Components, a new book by Heydon Pickering.

Print + eBook

{
“sku”: “inclusive-components”,
“type”: “Book”,
“price”: “39.00”,
“sales_price”: “29.00”,
“prices”: [{
“amount”: “39.00”,
“currency”: “USD”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “39.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “29.00”,
“currency”: “USD”,
“items”: [
{“amount”: “22.00”, “type”: “Book”},
{“amount”: “7.00”, “type”: “E-Book”}
]
}, {
“amount”: “29.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “22.00”, “type”: “Book”},
{“amount”: “7.00”, “type”: “E-Book”}
]
}
]
}

$
29.00

$
39.00

Quality hardcover. Free shipping worldwide, starting from early December.

eBook

{
“sku”: “inclusive-components”,
“type”: “E-Book”,
“price”: “18.00”,
“sales_price”: “15.00”,
“prices”: [{
“amount”: “18.00”,
“currency”: “USD”
}, {
“amount”: “18.00”,
“currency”: “EUR”
}, {
“amount”: “15.00”,
“currency”: “USD”
}, {
“amount”: “15.00”,
“currency”: “EUR”
}
]
}

$
15.00

$
18.00

DRM-free, of course.

ePUB, Kindle, PDF.
Included with Smashing Membership.

Source: Smashing Magazine, Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Inclusive Design And Accessibility: Live Stream With Heydon Pickering

dreamt up by webguru in Uncategorized | Comments Off on Inclusive Design And Accessibility: Live Stream With Heydon Pickering

Inclusive Design And Accessibility: Live Stream With Heydon Pickering

Inclusive Design And Accessibility: Live Stream With Heydon Pickering

Vitaly Friedman



Accessibility can sometimes become an unfortunate afterthought as we race to meet deadlines and search for tips and tricks to meet client demands. We can cause problems for keyboard or screenreader users, and leave our products fragile and potentially vulnerable to legal action from people who find themselves locked out due to their accessibility needs. How can we get better?

One way to find out would be by joining our live stream with Heydon Pickering who will be sharing insights about the relationship between accessibility and design systems, and exploring how to build accessible components, and why he decided to write a book on accessible interface design patterns.

Live Stream On Inclusive Design: Nov 7, 5:00 PM GMT

The session will start today, November 7, at 6:00 PM Berlin time (1:00 PM New York time) — broadcasted live below!

For a few years now, we’ve been running live sessions with respected professionals on Smashing TV — our video channel for our dear Smashing Members, who support our little team and our little adventures every month.

Starting from November, we’d like to try out something new. As the webinars have always been about sharing lessons learned with the community, we’d like to open them up to everybody, with Members having a chance to ask questions about the projects and their work right after the session.


From Smashing With Love

To help you stay on top of things, you can subscribe to our bi-weekly newsletter in which we announce what’s happening in the Smashing universe. Each and every newsletter issue is written and edited with love and care. No third-party mailings or hidden advertising — promise!

You can also follow us on Twitter, Facebook, LinkedIn and even stay updated with our bi-weekly Smashing Podcast. Please do always feel free to reach out and share your thoughts with us — we love hearing from you!

Smashing Editorial
(ra, il)

Source: Smashing Magazine, Inclusive Design And Accessibility: Live Stream With Heydon Pickering

1 2 3 4 5 6 7 8 9 10 ... 78 79   Next Page »