Collective #583

Inspirational Website of the Week: basement.studio Everything on basement is bold: from its striking typography to the brilliant effects and playful interactivity. Fantastic work. Get inspired This content is sponsored via Thought Leaders Clubhouse: Make 2020 your most productive year Clubhouse is a Read more

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

Collective #563

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







C563_gameoff

Game Off 2019

Game Off is an annual game jam, where participants spend the month of November creating games based on a specific theme.

Check it out



C563_spleeter

Spleeter

Spleeter is the source separation library by Deezer. With pre-trained models written in Python and using Tensorflow it allows you to extract vocals, drums, bass and piano from a music track.

Check it out








C563_sidebearings

Sidebearings

A collection of typography and lettering resources designed to focus on beginners as well as advanced type designers, graphic designers and enthusiasts.

Check it out







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


Source: Codrops, Collective #563

Exploring New Ways To Manage Content In WordPress

dreamt up by webguru in Uncategorized | Comments Off on Exploring New Ways To Manage Content In WordPress

Exploring New Ways To Manage Content In WordPress

Exploring New Ways To Manage Content In WordPress

Leonardo Losoviz



The combination of WordPress’ versatility for managing data (since its database model supports the creation of different content models, easily extensible through meta attributes) and Gutenberg’s rich user interactions provide a powerful mechanism to create, edit and manage content.

In this article, I want to shine some light on these upgraded capabilities, exploring the new tools at our disposition and presenting several new ones to be released sometime in the future.

Existing Features

The following features are already part of Gutenberg-powered WordPress.

Create Once, Publish Everywhere

As I have described in my recent article “Create Once, Publish Everywhere” with WordPress, the block-based nature of Gutenberg enables it to enhance how content is organized/architected on the database, making it available on a granular basis (block by block) to any application running on any medium or platform (web, email, iOS/Android apps, VR/AR, home assistants, and so on). Content managed through Gutenberg can then become the single source of truth for all of our applications, allowing us to reduce the cost associated with re-formatting content to make it suitable for each required platform.

Copy/paste from Google Docs with (almost) perfect formatting

Whenever we need to collaborate with other people to create content, we will quite likely use online tools such as Google Docs, Dropbox Paper, Coda or others. These tools make it easy for different people to edit the content in a document concurrently and provide and incorporate feedback. If we are going to choose a Content Management System to store our content, we need to make sure that it works well with these tools.

Gutenberg does the job fairly well: When copying the content from a Google Doc and then pasting it into a Gutenberg blog post, the formatting is preserved, bullet lists are properly transformed to the list block, and images are inserted where they should. There may be a few inconsistencies (for instance different spacing across blocks and in the original document) however, for the most part, the process is fit for use.

Copy/pasting from GDoc to Gutenberg
Copy/pasting from GDoc preserves the format of the document. (Large preview)

Crafting art direction

Several Gutenberg blocks support creating distinctive and engaging layouts and assisting the art direction of the site, to give it more personality and emphasize its identity. This way, even though we may base the site on a standard, plain-looking WordPress theme, we can customize the content’s appearance to make it stick out from the sea of sameness out there on the web. Let’s explore some of these blocks.

The Shape divider block allows to insert dividers in between two blocks. We can choose one among several basic shapes and customize its width, proportions and colors and then, with a bit of resourcefulness, create more intrinsic patterns from it. For instance, the divider below was created by first creating and customizing a divider, then flipping it both vertically and horizontally to mirror itself, then grouping these 2 halves so we can use it as a single unit (the grouping functionality will be available in core through the release of WordPress 5.3 next week, and is currently available through the Gutenberg plugin), and finally saving the grouped block as a reusable block so it can be used everywhere across the whole site:

Shape divider block

The shape divider block connects, or breaks apart, components. (Large preview)

The Advanced columns and Row layout blocks allow to create row-based layouts, inside of which we can place nested blocks (i.e. any other Gutenberg block). They are highly configurable: They offer to define how many columns the row must have, with what padding, margin and proportion of width for each column, setting an image or custom color in the background, and several other attributes.

Row layout block

The row layout block allows to easily configure the proportion of width among columns. (Large preview)

We can also create grid-based layouts with predefined content. For instance, through the Post grid, Post carousel and Post masonry blocks we can display a list of posts in different ways, defining what attributes from each post to show (title, date, excerpt, author, and so on), and through the Advanced gallery block we can create beautiful image galleries.

Advanced gallery block

Masonry gallery created with Advanced gallery block. (Large preview)

Some other blocks, such as Feature grid, allow to create grid layouts with predefined templates filled with custom content.

Feature grid block

The feature grid block enables to add custom content inside of a grid layout. (Large preview)

These are just a sample of those blocks which can help us fill the content with visually attractive layouts and craft the art direction of our sites. To keep exploring possibilities, we can head to the directory of plugins offering blocks and check these out.

Assisting the user while editing content

Gutenberg assists the user when creating content through the following features:

Real-Time Preview

The Gutenberg editor gives a relatively accurate preview of how the content will look like in the website.

Error Warnings

Gutenberg makes the content creator be aware of accessibility concerns. For instance, if our content structure jumps from an <h2> header to an <h4> one without adding an <h3> tag in between, Gutenberg provides a warning message about this potential error. Similarly, when setting up the color of some text against its background color, if the contrast between the two colors is not clear enough then Gutenberg provides a warning message and helps fix the problem.

Suggesting/Executing Improvements

Blocks can connect to third-party services to analyze content and enhance it. For instance, a service could suggest how to improve the grammar of the content, provide alternative titles and tags for a better SEO, and even automatically translate the content to another language, as done by this plugin which automatically translates from English to Hindi as the user types.

New Features Under Implementation

The following features will hopefully/eventually be coming to Gutenberg in the future.

Snap to grid when resizing images

Contributors are already working on adding a grid system to Gutenberg which will, among other things, enable to resize images in an assisted manner by snapping it to the grid:

Installing a block from within Gutenberg
Snapping an image to grid (image from the GitHub issue). (Large preview)

Inline installation of blocks

Sometimes, while we are writing a blog post, we find out that we need some functionality that we don’t have yet installed. Hence, we need to switch to the Plugins screen, search and install the corresponding plugin, and then go back to the blog post. This process adds friction to our content-writing workflow.

Wouldn’t it be nicer if we could install the required functionality right from within the editor itself, whenever we need to use it? Well, this proposal is already being implemented through this pull request (it first depends on blocks being installed on their own, i.e. without depending on being shipped through a plugin). Once merged, our content-writing workflow will not be impaired anymore, as visible in the mockup below.

Installing a block from within Gutenberg
Installing a block from within Gutenberg (image from the GitHub pull request). (Large preview)

Installing blocks directly from the editor could lead to unintended bloat, from making it too easy for the user to install blocks. To address this issue, after installing and using it, the block could be removed! This was not possible before Gutenberg, because if the plugin providing a shortcode (which was the way to render dynamic content inside the blog post before Gutenberg) was disabled, then the invocation of the shortcode would be rendered in the blog post (instead of the shortcode’s output), messing up our content. However, Gutenberg works differently: Blocks only save HTML content inside of the blog post (including HTML comments to store configuration attributes), so, if the block is disabled, its intended HTML output is still part of the blog post’s content. (Even though there may be problems if the block needs to load CSS assets which are not loaded anymore once the block is disabled. I am not aware how this issue will be handled.)

Page/Site builder

Currently Gutenberg can only be used for the creation of content inside a blog post or a page, however it will soon support the creation of any part of the website: Content-block areas can define the header, sidebars, footer or any section needed for our layouts. Automattic (the company behind WordPress.com) is already working on a plugin to add full site editing capabilities to its WordPress.com product, which should eventually be extensible to the open source WordPress software too.

Creating a new page with full site editing enabled

Creating a new page with full site editing allows to select a page template. (Large preview)

Real-time collaboration

Google Docs is incredibly useful to teams because it enables their members to work on the same document at the same time. Sometime in the future, Gutenberg will also incorporate a mechanism for real-time collaboration, allowing different people to work on the same blog post at the same time. This mechanism will (at least initially) be based on giving editing-locks to users on a block-by-block basis, as shown in the mockup image below.

Real-time collaboration through Gutenberg

Real-time collaboration through Gutenberg (image from the GitHub issue). (Large preview)

This feature will be particularly useful to online magazines (such as the New York Times and the like) since they may already have teams collaborating on a story (for instance, designers dealing with images, journalists, proofreaders and editors dealing with content, and others). Having real-time collaboration tools will enable these magazines to speed up their content-creation workflows and publish their articles faster.

Translation

WordPress core has never added support to translate content (it only supports translation of strings inside of core, plugin and theme files), but instead left this responsibility to plugins. Through Gutenberg, WordPress will finally add native support for this feature.

Translation is not a priority yet, so it has been targeted for Gutenberg phase 4, expected in the year 2020+. Since it is a long way off, there are yet no technical considerations of its implementation or mockups of its intended user experience. So we can only guess how it will be. Since it will be implemented after the real-time collaboration feature (described above), I would expect it will enable different people to translate the same blog post to different languages at the same time, block by block.

Inline media editing

Through the Media Library, WordPress already provides some image editing capabilities: resizing, cropping, rotating and flipping. These capabilities are very basic, and they are applied on to the image on a different screen, which creates some friction to the process of fitting the image into the blog post.

Through Gutenberg, the media-editing experience could be greatly enhanced: One one side, it could support editing the image in more advanced ways, such as applying effects or filters, altering the contrast, replacing colors, adding text as watermark, adding transparent regions, converting it to different formats, and others (for instance, Cloudinary provides an API to apply many transformations to an image, which could be perfectly accessed by a block). On the other side, the editing could happen inline, right where the image is placed inside the blog post. Then, for instance, if the image was added as an overlay against some background, and we add transparent regions to the image, we can visualize in real-time how the composite result looks like.

(I haven’t found any proposal to tackle this issue in Gutenberg’s GitHub repo, but I learned about this idea talking to some core contributors, who expected to be able to work on it some time in the future.)

Conclusion

Already being the most popular CMS (close to 35% of the web), WordPress has also the chance to offer the most compelling tools to manipulate content. This is because Gutenberg offers an appealing mechanism to create, edit and manage content: A single interface, simple to use, fairly powerful and versatile. With its new content management capabilities, WordPress can become the single source of truth of all our content, to power all our applications (websites, newsletters, apps, and so on) through APIs. Kudos to that!

Smashing Editorial
(yk, il)

Source: Smashing Magazine, Exploring New Ways To Manage Content In WordPress

Writing A Multiplayer Text Adventure Engine In Node.js: Adding Chat Into Our Game (Part 4)

dreamt up by webguru in Uncategorized | Comments Off on Writing A Multiplayer Text Adventure Engine In Node.js: Adding Chat Into Our Game (Part 4)

Writing A Multiplayer Text Adventure Engine In Node.js: Adding Chat Into Our Game (Part 4)

Writing A Multiplayer Text Adventure Engine In Node.js: Adding Chat Into Our Game (Part 4)

Fernando Doglio



Any platform that allows for collaborative play between people will be required to have one very particular characteristic: the ability for players to (somehow) talk to each other. That is exactly why our text-adventure engine built in Node.js would not be complete without a way for the party members to be able to communicate with each other. And because this is indeed a text adventure, that form of communication will be presented in the form of a chat window.

So in this article, I’m going to explain how I added chat support for the text client as well as how I designed a quick chat server using Node.js.

Previous Parts Of This Series

  • Part 1: The Introduction
  • Part 2: Game Engine Server Design
  • Part 3: Creating The Terminal Client

Back To The Original Plan

Lack of design skills aside, this has been the original wireframe/mock-up for the text-based client we built in the previous part of the series:

(Large preview)

The right side of that image is meant for inter-player communications, and it’s been planned as a chat since the beginning. Then, during the development of this particular module (the text client), I managed to simplify it into the following:

(Large preview)

Yes, we already covered this image in the previous installment but our focus was the left half. Today, however, our focus will be on the right half of what you’re seeing there. In other words:

  • Adding the ability to reactively pull data from a third-party service and update a content window.
  • Adding support to the command interface for chat commands. Essentially changing the way commands work out of the box and adding support for things, such as “sending a message to the rest of the team”.
  • Create a basic chat server on the back-end that can facilitate team communication.

Let me start with the last one before moving on to how to modify our existing code.

Creating The Chat Server

Before even looking at any code, one of the first things one should do is to quickly define the scope of any new project. Particularly with this one, we need to make sure we don’t spend a lot of time working on features we might not need for our particular use case.

You see, all we need is for the party members to be able to send messages with each others, but when one thinks of a “chat server”, other features often come in mind (such as chat rooms, private messages, emojis and so on).

So in order to keep our work manageable and get something out that works, here is what the chat server module will actually do:

  • Allow for a single room per party. Meaning, the actual room for a party will be auto-created when the game itself is created and the first player starts playing. All subsequent party members will join the same room, automatically and without a choice.
  • There will not be support for private messages. There is no need to be secretive in your party. At least not in this first version.
    Users will only be able to send messages through the chat, nothing else.
  • And to make sure everyone is aware, the only notification sent to the entire party, will be when new players join the game. That’s all.

The following diagram shows the communication between servers and clients. As I mentioned, the mechanics are quite simple, so the most important bit to highlight here is the fact that we’re keeping conversations contained within the same party members:

(Large preview)

The Tools For The Job

Given the above restrictions and the fact that all we need is a direct connection between the clients and the chat server, we’ll solve this problem with an old fashion socket. Or in other words, the main tool we’ll be using is socket.io (note that there are 3rd party services providing managed chat servers, for instance, but for the purposes of this, going there would the equivalent of killing a mosquito with a shotgun).

With socket.io we can establish a bidirectional, real-time, event-based communication between the server and the clients. Unlike what we did with the game engine, where we published a REST API, the socket connection provides a faster way of communication.

Which is exactly what we need, a quick way to connect clients and server, exchanging messages and sending broadcasts between them.

Designing A Chat Server

Although socket.io is quite magical when it comes to socket management, it’s not a full chat server, we still need to define some logic to use it.

For our particularly small list of features, the design of our server’s internal logic should look something like this:

  • The server will need to support at least two different event types:
    1. New message
      This one is obvious, we need to know when a new message from a client is received, so we’ll need support for this type of event.
    2. New user joined
      We’ll need this one just to make sure we can notify the entire party when a new user joins the chat room.
  • Internally, we’ll handle chat rooms, even though that concept will not be something public to clients. Instead, all they will send is the game ID (the ID players use to join the game). With this ID we’ll use socket.io’s rooms feature which handles individual rooms for us.
  • Because of how socket.io works, it keeps an in-memory session open that is automatically assigned to the socket created for each client. In other words, we have a variable automatically assigned to each individual client where we can store information, such as player names, and room assigned. We’ll be using this socket-session to handle some internal client-room associations.
A Note About In-Memory Sessions

In-memory storage is not always the best solution. For this particular example, I’m going with it because it simplifies the job. That being said, a good and easy improvement you could implement if you wanted to take this into a production-ready product would be to substitute it with a Redis instance. That way you keep the in-memory performance but add an extra layer of reliability in case something goes wrong and your process dies.

With all of that being said, let me show you the actual implementation.

The Implementation

Although the full project can be seen on GitHub, the most relevant code lies in the main file (index.js):

// Setup basic express server
let express = require('express');
let config = require("config")
let app = express();
let server = require('http').createServer(app);
let io = require('socket.io')(server);
let port = process.env.PORT || config.get('app.port');

server.listen(port, () => {
  console.log('Server listening at port %d', port);
});

let numUsers = 0;


io.on('connection', (socket) => {
  let addedUser = false;

  // when the client emits 'new message', this listens and executes
  socket.on(config.get('chat.events.NEWMSG'), (data, done) => {
    let room = socket.roomname
    if(!socket.roomname) {
        socket.emit(config.get('chat.events.NEWMSG'), "You're not part of a room yet")
        return done()
    }

    // we tell the client to execute 'new message'
    socket.to(socket.roomname).emit(config.get('chat.events.NEWMSG'), {
      room: room,
      username: socket.username,
      message: data
    });
    done()
  });

  socket.on(config.get('chat.events.JOINROOM'), (data, done) => {
      console.log("Requesting to join a room: ", data)

      socket.roomname = data.roomname
      socket.username = data.username
      socket.join(data.roomname, _ => {
          socket.to(data.roomname).emit(config.get('chat.events.NEWMSG'), {
            username: 'Game server',
            message: socket.username + ' has joined the party!'
          })
          done(null, {joined: true})
      })
  })

  // when the user disconnects.. perform this
  socket.on('disconnect', () => {
    if (addedUser) {
      --numUsers;

      // echo globally that this client has left
      socket.to(socket.roomname).emit('user left', {
        username: socket.username,
        numUsers: numUsers
      });
    }
  });
});

That is all there is for this particular server. Simple right? A couple of notes:

  1. I’m using the config module to handle all my constants. I personally love this module, it simplifies my life every time I need to keep “magic numbers” out of my code. So everything from the list of accepted messages to the port the server will listen to are stored and accessed through it.
  2. There are two main events to pay attention to, just like I said before.
    • When a new message is received, which can be seen when we listen for config.get('chat.events.NEWMSG'). This code also makes sure you don’t accidentally try to send a message before joining a room. This shouldn’t happen if you implement the chat client correctly, but just in case these type of checks are always helpful when others are writing the clients for your services.
    • When a new user joins a room. You can see that event on the config.get('chat.events.JOINROOM') listener. In that case, all we do is add the user to the room (again, this is handled by socket.io, so all it takes is a single line of code) and then we broadcast to the room a message notifying who just joined. The key here is that by using the socket instance of the player joining, the broadcast will be sent to everyone in the room except the player. Again, behavior provided by socket.io, so we don’t have to add this in.

That is all there is to the server code, let’s now review how I integrated the client-side code into the text-client project.

Updating The Client Code

In order to integrate both, chat commands and game commands, the input box at the bottom of the screen will have to parse the player’s input and decide on what they’re trying to do.

The rule is simple: If the player is trying to send a message to the party, they’ll start the command with the word “chat”, otherwise, they won’t.

What Happens When Sending A Chat Message?

The following list of actions takes place when the user hits the ENTER key:

  1. Once a chat command is found, the code will trigger a new branch, where a chat client library will be used and a new message will be sent (emitted through the active socket connection) to the server.
  2. The server will emit the same message to all other players in the room.
  3. A callback (setup during boot-time) listening for new events from the server will be triggered. Depending on the event type (either a player sent a message, or a player just joined), we’ll display a message on the chat box (i.e the text box on the right).

The following diagram presents a graphic representation of the above steps; ideally, it should help visualize which components are involved in this process:

(Large preview)

Reviewing The Code Changes

For a full list of changes and the entire code working, you should check the full repository on Github. Here, I’m quickly going to glance over some of the most relevant bits of code.

For example, setting up the main screen is where we now trigger the connection with the chat server and where we configure the callback for updating the chat box (red box on the top from the diagram above).

setUpChatBox: function() {
        let handler = require(this.elements["chatbox"].meta.handlerPath)
        handler.handle(this.UI.gamestate, (err, evt) => {
            if(err) {
                this.UI.setUpAlert(err)    
                return this.UI.renderScreen()
            }

            if(evt.event == config.get('chatserver.commands.JOINROOM')) {
                this.elements["chatbox"].obj.insertBottom(["::You've joined the party chat room::"])
                this.elements["chatbox"].obj.scroll((config.get("screens.main-ui.elements.gamebox.autoscrollspeed") ) + 1)
            }
            if(evt.event == config.get('chatserver.commands.SENDMSG')) {
                this.elements["chatbox"].obj.insertBottom([evt.msg.username + ' said :> ' + evt.msg.message])
                this.elements["chatbox"].obj.scroll((config.get("screens.main-ui.elements.gamebox.autoscrollspeed") ) + 1)
            }
            this.UI.renderScreen()
        })

    },

This method gets called from the init method, just like everything else. The main function for this code is to use the assigned handler (the chatbox handler) and call it’s handle method, which will connect to the chat server, and afterwards, setup the callback (which is also defined here) to be triggered when something happens (one of the two events we support).

The interesting logic from the above snippet is inside the callback, because it’s the logic used to update the chat box.

For completeness sake, the code that connects to the server and configures the callback shown above is the following:

const io = require('socket.io-client'),
    config = require("config"),
    logger = require("../utils/logger")


// Use https or wss in production.
let url = config.get("chatserver.url") 
let socket = io(url)


module.exports = {

    connect2Room: function(gamestate, done) {
        socket.on(config.get('chatserver.commands.SENDMSG'), msg => {
            done(null, {
                event: config.get('chatserver.commands.SENDMSG'),
                msg: msg
            })     
        })
        socket.emit(config.get("chatserver.commands.JOINROOM") , {
            roomname: gamestate.gameID,
            username: gamestate.playername
        }, _ => {
            logger.info("Room joined!")
            gamestate.inroom = true
            done(null, {
                event: config.get('chatserver.commands.JOINROOM')
            })
        })
        
    },

   handleCommand: function(command, gamestate, done) {
        logger.info("Sending command to chatserver!")
        
        let message = command.split(" ").splice(1).join(" ")

        logger.info("Message to send: ", message)

        if(!gamestate.inroom) { //first time sending the message, so join the room first
            logger.info("Joining a room")
            let gameId = gamestate.game
            
    socket.emit(config.get("chatserver.commands.JOINROOM") , {
                roomname: gamestate.gameID,
                username: gamestate.playername
            }, _ => {
                logger.info("Room joined!")
                gamestate.inroom = true
                updateGameState = true

                logger.info("Updating game state ...")
                socket.emit(config.get("chatserver.commands.SENDMSG"), message, done)
            })
        } else {
            logger.info("Sending message to chat server: ", message  )
            socket.emit(config.get("chatserver.commands.SENDMSG"), message, done)
        }
            
    }
}

The connect2room method is the one called during setup of the main screen as I mentioned, you can see how we set up the handler for new messages and emit the event related to joining a room (which then triggers the same event being broadcasted to other players on the server-side).

The other method, handleCommand is the one that takes care of sending the chat message to the server (and it does so with a simple socket.emit). This one is executed when the commandHandler realizes a chat message is being sent. Here is the code for that logic:

module.exports = {
    handle: function(gamestate, text, done) {
        let command = text.trim()
        if(command.indexOf("chat") === 0) { //chat command
            chatServerClient.handleCommand(command, gamestate, done)
        } else {
            sendGameCommand(gamestate, text, done)
        }     
    }
}

That is the new code for the commandHandler, the sendGameCommand function is where the old code now is encapsulated (nothing changed there).

And that is it for the integration, again, fully working code can be downloaded and tested from the full repository.

Final Thoughts

This marks the end of the road for this project. If you stuck to it until the end, thanks for reading! The code is ready to be tested and played with, and if you happen to do so, please reach out and let me know what you thought about it.

Hopefully with this project, many old-time fans of the genre can get back to it and experience it in a way they never did.

Have fun playing (and coding)!

Further Reading on SmashingMag:

Smashing Editorial
(dm, yk, il)

Source: Smashing Magazine, Writing A Multiplayer Text Adventure Engine In Node.js: Adding Chat Into Our Game (Part 4)

Smashing Podcast Episode 2 With Liz Elcoate: What’s So Great About Freelancing?

dreamt up by webguru in Uncategorized | Comments Off on Smashing Podcast Episode 2 With Liz Elcoate: What’s So Great About Freelancing?

Smashing Podcast Episode 2 With Liz Elcoate: What’s So Great About Freelancing?

Smashing Podcast Episode 2 With Liz Elcoate: What’s So Great About Freelancing?

Drew McLellan



Liz Elcoate In this episode of the Smashing Podcast we take a look a freelancing. What does it mean to be a freelance designer or developer? How do you structure your day? What are the ups and downs? Drew McLellan talks to experienced freelance brand designer Liz Elcoate to find out more.

Show Notes

Transcript

Drew: She’s a UK based designer who specializes in building digital brands. She’s worked on campaigns with the likes of Great Ormond Street Hospital, the NSPCC, and the Brits. She’s also the host of The Elastic Brand podcast, all about digital brand design, and co-host of The Freelance Web, a podcast for freelancers working on the web.

Drew: We know she loves design and she loves podcasts, but did you know she once felled a tree using nothing but a mango? My smashing friends, please welcome Liz Elcoate.

Liz Elcoate: Hello, hi.

Drew: How are you?

Liz Elcoate: Do you know what, Drew? I’m smashing.

Drew: Of course you are.

Liz Elcoate: Nailed it.

Drew: I wanted to chat about freelancing with you today.

Liz Elcoate: Great.

Drew: You’re a freelance digital brand designer. Is that how you’d describe yourself?

Liz Elcoate: I think I was trying to start the term digital brand designer, but I realize now they’re just brand designers. I probably now just go by the term brand designer. Everyone was like, “What, a digital what?” I do brands that work both online and off now.

Drew: You don’t pigeonhole yourself exclusively to online stuff?

Liz Elcoate: No. I tend to work with a lot of agencies that are maybe tech agencies, digital agencies. Most of their branding would appear online. They’re not going to have huge offline print, billboards, and things like that. A good brand should work everywhere.

Drew: What does the day of a digital brand designer look like?

Liz Elcoate: Oh God, the truth or the …

Drew: If was to pack up my bags, move to a remote part of Scotland … I’m thinking maybe an island in Scotland. I’ll take my cat. I say I’m going to be a digital brand designer. I’d wait typically six to eight weeks for my broadband to get installed.

Liz Elcoate: Then it’d be rubbish, wouldn’t it?

Drew: Then it would be absolutely terrible. What would my day look like as a freelancer doing the sort of work that you do?

Liz Elcoate: Well, I guess I always start my day off with a dog walk, so you might start yours off with a cat walk possibly. A good dog walk out in the open air always gets me set up for the day. Then back to my desk, check emails, answer emails.

Liz Elcoate: I tend to do the creative work in the morning, because I just find that’s when I work best. I’ll do a couple of hours of really focused creative work. I’ll turn off my phone, turn off my email, and just really get my head down. I can achieve so much in that period of time, probably more than I would do later on in the day for a longer period of time.

Liz Elcoate: I do that, and then maybe check emails again, lunch, get away from my desk for a little while, and then the afternoon will be tidying up whatever has come in the morning, maybe writing for a magazine, maybe Smashing Magazine, or writing proposals, or planning workshops, stuff like that.

Liz Elcoate: The really creative stuff happens in the morning, and the writing and stuff happens in the afternoon, and also do a bit of admin in the afternoon as well. I’m one of those weird people who love admin. I’m so weird. I do tend to quite enjoy that.

Liz Elcoate: It’s just because it’s like math, there’s an answer, whereas I find the creative, it can be draining because it’s so open-ended.

Drew: I guess that’s one of the differences between doing freelance creative work and freelance technical work.

Liz Elcoate: Absolutely. Also, on the very rare occasions I actually code anything these days … and that’s never for clients. That’s only for personal work … is a joyous time, because there’s a right and a wrong way to do. I’m sure there’s lots of people out there who’d say, “Well, there’s many right ways to do these things.” With my knowledge, you do something and you have an answer. It’s so nice. It’s a real break from the creative.

Liz Elcoate: I did a workshop a couple of weeks ago in Ireland. It was a new workshop that I’ve not done before. It was five hours. It was a brand workshop, and I needed to really make sure that I answered all the questions that I needed answering, as well as making it engaging for the nine or 10 people who are involved in it, and relevant for them and fun as well.

Liz Elcoate: I loved writing it, but it wasn’t until that moment that I actually delivered it to them, and we got to the 2:00 PM mark and it was all over. I thought, “Actually, that worked out.” It was, again, that kind of like, “I’m not sure how this is going to go.”

Liz Elcoate: I think that’s the same with the design side of what I do. It’s, “Well, we’ll find out how successful this has been when we hear back from them.” It can be really draining. I think that’s why I really enjoy the admin side of things, and also writing as well seems to be more formulaic, and I have a little bit more confidence, I guess, doing that. I’m confident in what I do for a living, but you don’t know until that moment the client comes back to you.

Drew: You mentioned spending time writing proposals as one of the things you do in your afternoons. How much of your time is taken up in responding to proposals, and calling clients, and finding new work?

Liz Elcoate: Well, at the moment, a lot more than it used to be. I try to be a lot more proactive around those things now. I think it’s a challenge as a brand designer. It’s not quite as straight forward, I think, as with other parts of our industry, because branding is often a really big project for a company, and they don’t do it regularly.

Liz Elcoate: It’s not like, “We need updates to our site,” or “We want to change this part of our site,” or whatever. It’s sort of like, “We’ve had the same brand for four years, five years. We need an overhaul,” or “We’re a startup …” It’s a big decision for people.

Liz Elcoate: I’m not constantly bombarded with inquiries, but when people do inquire, it often means that they’re very serious about it and it’s a big financial commitment for them as well. It can be quite a traumatic experience for them, because they think they’re one thing, and they’re now discovering that they’re maybe something else.

Liz Elcoate: The proposals, to me, I probably write one or two every week or fortnight, but I really take time with them. They take me a couple of days, a couple of afternoons to write. I used to just bang out a quick proposal, just outlining what they need and what I can do for them, but I think a lot of people do that. It doesn’t set you apart.

Liz Elcoate: I was going to work with Christopher Murphy on a project, and he, in the end, didn’t end up coming in on the project, but we wrote a proposal together, and he just completely changed the way I wrote proposals. He changed them so professionally, really engaged the client and their needs. From that moment onwards, I was writing them like that.

Liz Elcoate: Anyone else who’s seen my proposals, if I bring in other people into projects, they’ll be like, “Wow, your proposal is a game changer.” I’m like, “Well, I can’t take any credit for that.” It really has made a difference. When I write them, I really make a concerted effort to make sure that they are very, very pertinent to that particular client.

Drew: Then do you send them off and hope for the best, or do you talk through on a call?

Liz Elcoate: If we’ve got to a proposal stage (because they’re a time-consuming commitment), I feel that I’ve got to a point where they’re very committed to me and maybe one or two other people. I know they’re not just fishing around a whole group of people, and we’ve probably had a video call by then as well.

Liz Elcoate: I’ll send the proposal over and I’ll say we can schedule a call to have a chat through. Sometimes they want to do that, and sometimes they’re like, “No, it’s fine. Don’t worry.” Then they just come back to me like a week later like, “Yes, great.”

Liz Elcoate: I tend to find that if I haven’t heard from them within a week, they’re not probably going to go with me. That’s always quite a red flag. If they come back three weeks later or a month later and say, “We want to work with you,” I think, “Okay, that’s taken a very long time. What’s this project going to pan out like if that’s how long it takes you to make that kind of decision?”

Liz Elcoate: Generally we have a chat through on a video call once that’s gone over.

Drew: I know from stuff I’ve done in the past, the turnaround time can really vary, can’t it, between you can have people who take a couple of hours to read through what you’ve sent and respond straight away, and sometimes you think a project is completely gone away, and then three months later-

Liz Elcoate: Yeah, I had one of those recently, actually. I had a really quite serious inquiry. Basically, they were like, “Yes, we want to go with you. Can you just put a proposal together?” I put the proposal together, sent it over, didn’t hear from them, chased them up, didn’t hear from them again, chased them up again.

Liz Elcoate: It was a good five weeks, and I thought, “Well I’ve not heard from them. This is definitely not going to happen. It’s a shame.” My email’s always very polite, but it said, “Just let me know if you don’t want to go with me, just so I know. Any feedback would be great.” Didn’t hear anything. They came back out of the blue not long ago and said, “Sorry, just being really busy.” You’re like, “Wow, oh my God.”

Liz Elcoate: I think as a freelancer, when you’re on your own, stuff comes in, you react to it, so you expect other people to work like that. I find when I work with maybe a company of one or a small agency, they do react really quickly. They don’t need to take time to think of stuff, but when I work with big agencies, they often take a good week.

Liz Elcoate: You have the person in charge of the project, but then they need to then go off to their stakeholders and have a chat with them about everything. They’re already busy, so they need to schedule a meeting, and it tends to be a bit longer. There’s no hard and fast rules, unfortunately.

Drew: Other than the more stakeholders there are involved, the longer everything is going to take.

Liz Elcoate: If there’s more than maybe two or three stakeholders involved, I’m always slightly dubious about the whole situation. I had one not long ago, and there was a board of 10 people involved in deciding about the direction the brand was going to go. It was just a long, painful, drawn-out process.

Liz Elcoate: They were a very mixed age group as well, and very different backgrounds, and it was as expected when that kind of thing happens.

Drew: I once did a project for a law firm partnership, where everyone in the law firm, there were about a dozen people who were all equal partners, obviously very bright, switched on people with their own opinions about how everything should go.

Drew: We managed to get the site developed, and it failed at the final hurdle of signing it off because they couldn’t get all 12 people to sign off, and it just never launched. Completely-finished website, and it just never launched.

Liz Elcoate: That is so sad. I always do try and say to clients that you need to have someone take the lead on it, and someone who can say to even the stakeholders, “Look, we’ve got to have a decision on this,” because it is impossible.

Liz Elcoate: I think when I used to work for the agency that I used to work for, we worked with a lot of schools. We’d sometimes have a board of governors involved, as well as the head-teacher, as well as three or four teachers who wanted to be involved as well.

Liz Elcoate: They were hugely different age ranges and experience. Those projects were the same as yours. It’s almost impossible to sign off in the end.

Drew: You’ve got a good number of years experience doing this, like me.

Liz Elcoate: I’m old. I’m old.

Drew: It’s a euphemistic way of, “Yes, we have a lot of experience in our respective fields.”

Liz Elcoate: Definitely.

Drew: Have you always been freelance, or did something come before that?

Liz Elcoate: Gosh, if we go back to the dawn of time, which is when I began my career, I worked for an Australian bank way back then, just in processing pensions and stuff like that, because I was having a crisis like, “I don’t know I want to do with my life.”

Liz Elcoate: Then I moved to working for a Danish company in marketing, which I really enjoyed. I enjoyed the creative side of that as well. I did art and fine art after school, and I hadn’t really done anything with that. I felt that within that role, I was starting to do a little bit more with that.

Liz Elcoate: Then this thing called web design started popping up. My sister said to me, “You really need to get in on this at the start.” I was like, “We’ll give it a go, maybe.” She’s like, “No, I really think it’s going to be big.”

Liz Elcoate: I did a little night course, and of course, the night course was terrible because they tried to teach everything in tables. By that point, we were getting to the HTML and CSS. I then went on the Adobe tutorial forum, or site, or whatever it was back then, and basically learned coding from there, and blindly just got some clients.

Liz Elcoate: It terrifies me now. I think I literally knew nothing. Did some quite hefty websites for people. I think this is quite common… I think a lot of people started off just going, “Yeah, I’ll do your website. Don’t know what I’m doing, but okay.” That’s kind of how I started it.

Liz Elcoate: Then the more I learned, the more I thought, “I don’t know anything at all.” I thought, “I need to get an actual job, an agency.” The first job I went for, a guy called Sean Johnson, who everybody might know now as my cohost of The Freelance Web, he was interviewing me for it. He loves to say, “I hired Liz into her first design job.” Miraculously, I got the job. That was just an amazing experience.

Liz Elcoate: After that, I worked with just a brilliant team of guys, who I’m still really good friends with all of them now, loved every minute. When I say guys, I mean men. There were no women in the kind of design … We worked with the development team, so we had to design, and then we would code up our CSS, HTML, code up the site, and then we’d pass that over to the developers who would build into their CMS.

Liz Elcoate: I worked with some amazing clients then as well. Stayed there for a few years, worked up to senior design executive, I think that was my title, which I never to this day really understood what that meant. It just was pay grades.

Liz Elcoate: Then because of my daughter, who was that time starting secondary school, and she was at a different part, away from where I worked, I was like, “I’m really struggling to do all the mum things, and do a full-time job and stuff.” I was raising her on my own and didn’t really have any kind of support network.

Liz Elcoate: I then was like, “I’m just going to go freelance, sounds easy.” Luckily, I went to my boss and said, “Look John,” who I’d really, really got on well with, “I can’t really do this full time anymore.”

Liz Elcoate: It was a very high-pressure job, because I was managing products from start to finish, and traveling all over the country, and then also doing designs. We had huge, crazy targets to hit every week, like a lot of these agencies, I think, at the time. The pressure was getting crazy. I’m trying to be a mum as well. I said, “Look, I’ve got to go freelance.” He said, “Will you freelance for us?” It was a brilliant start to my freelance career. I’m very lucky.

Liz Elcoate: We did that for a while, ended up parting ways, but by that point, I’d built a client base. Most of my clients then were, it was what we called web design then, which was UX now and UI. I’d done branding within that role at the agency, so it was something I was really confident with.

Liz Elcoate: That was part of the projects. They were full-service projects. They were branding, website, everything, print, design, the whole lot. I felt that I had a lot of strings to my bow, and then I went freelance. That was probably eight years ago, I think. I can’t believe I’ve been putting myself through this for eight years, but that time’s flown. That’s more from UX design to focusing more in on branding, I think.

Drew: Was it a good decision? Have you had a good eight years? Have you ever regretted it?

Liz Elcoate: That’s a really tough … I’ve regretted it a hundred times, at least. I can’t deny that and say … It’s been necessary because of just how my life is structured and stuff, how I’ve had to be there for my daughter. It’s been necessary, but it’s been tough. There’s times when I’ve been so tempted to go back to a full-time role, just to take that financial worry away. It’s tough being worried about money all the time.

Drew: That brings us on to a recent article you wrote for Smashing Magazine called Making Peace with the Feast or Famine of Freelancing. In that you’re talking about the stresses that the irregular nature of work can put on an individual freelancer, particularly when that work isn’t coming, and new inquiries aren’t coming in.

Drew: Was this something that you were aware of right from the start, or was it something that you discovered as time went on?

Liz Elcoate: What’s bizarre is that I think you’re always told to specialize, specialize, specialize. I did specialize. I went into specializing, into branding. As I said before, there’s not a huge amount of work constantly.

Liz Elcoate: If you’re a logo designer, and you’re doing 200 pounds a pop logos, there’s a lot of work out there for you, but I really wanted to do full branding. I guess I made the decision about a year ago. Before, I was doing design, which I guess was UX design, graphic design, print design. There’s always a lot more work coming in. The projects were probably not … Now when the products come in, they’re really good value projects. I think then it was a lot more regular small work.

Liz Elcoate: Everyone seems to dismiss that saying, “No, no, you need the big projects with all the money.” Actually, those small projects as well, do keep you ticking over. I think that I’ve found that I had really dropped the ball at the beginning of this year. I’d had a couple of really big projects, and then I’d had a last-minute project come in in February, and dropped everything to do it.

Liz Elcoate: It was a three-week turnaround, and it was doing some print design for company that I’ve worked with for years and years. They’re absolutely amazing, but they always have insane deadlines. They’re like, “We need to do all of this in three weeks’ time.”

Liz Elcoate: They pay amazingly, so it was one of those like, “Well I’m just going to drop everything.” For those three weeks, I was also house-sitting for my parents because they were in Australia. They have a massive farm, so I was looking after the farm and doing … so my whole days were just mad.

Liz Elcoate: At the end of that time, I also got ill. I went to Copenhagen, and I got quite ill with a bit of quite a serious health scare. For a month, I literally was laid on the sofa. Then at the end of that month, I was like, “I’m getting better,” and I had the results come back, and everything was okay.

Liz Elcoate: I was like, “Oh God, I need to get some work in right this second. Someone give me some work now.” It hasn’t been a problem I’ve had the whole time. I’ve definitely had times when it’s been quiet, and I’ve had a week or two and I’m like, “Ugh,” but this was a long period of time of real dawning on me that things were not great.

Drew: It seems to be one of those things, not just the financial pressure that a freelancer can feel if they haven’t got new inquiries coming in. There seems to be a lot of stress, and anxiety, and things, so that even if things are okay financially, even if you’ve got a bit of a buffer, it seems like there’s a disproportionate amount of stress that it puts on an individual, just with the worry. What did you learn about that in your research for the article?

Liz Elcoate: That was probably my biggest revelation during that time. I think that’s what I really wanted to write the article about, was that I had a buffer luckily, because I had done these three big projects. A bit like everybody, you have loads of work come in and you’re crazy. You invoice it all and you’re like, “Oh, I’m rich.” Then you forget that it has to last you for however long it is until the next project comes in.

Liz Elcoate: I had a buffer, but it was that slow dawning realization that nobody I was contacting wanted to work with me. Immediately, I think, as quite a sensitive person, a creative person, I assumed that was because my work wasn’t up to scratch, and I was really losing my touch, and maybe I was in the wrong industry.

Liz Elcoate: That was really painful, to start to realize that. I thought, “Well, this is all I do. This is all I can do. I’m terrible at what I do for a living.” Unfortunately, I’m not secretly a qualified doctor or lawyer. I can’t just fall back on those things. It takes a long time to become a lawyer, even if I wanted to be one.

Liz Elcoate: It was all that kind of thing. It was a day when I thought, “I think I need to write about this mental health side of this.” Money worry is definitely debilitating, but thinking, “Well, I’m never going to get any more work because everybody’s realized that I’m actually really bad at what I do,” was worse.

Liz Elcoate: I tweeted out about this, and it was just an overwhelming group of tweets that came in just saying, “Oh yeah, I feel exactly the same way,” from really the best designers we have in the industry saying it as well. From the outside, you assume that they’re doing really well, and they never have these problems, but they have times when it’s quiet, and it really affects their mental health as well.

Liz Elcoate: I was like, “I think other people need to realize that other people feel … everyone needs to know that other people feel like this as well, and that it’s perfectly normal to feel like that.”

Drew: In talking to people, did you discover any strategies that people had for coping with that situation?

Liz Elcoate: Yeah. It was great to talk to people about this. I find when I become that worried, I almost become catatonic with worry, whereas I can’t do anything else, because my whole mind is weighed down with this with worry. It would be a case of sitting at my desk all day, sending out emails.

Liz Elcoate: You’re reeking of desperation when you send out these kind of emails. People can tell it a mile off, and you’re not getting anything back. I’d do that for eight solid hours, and then I’d go and watch Netflix or whatever. I’d be like, “Oh my God.”

Liz Elcoate: So many people came up with so many great ideas, like side projects, creative projects, running, walking outside. Walking’s a big part of my life anyway. Up your gyming. If you like fitness, start going to the gym more, because that is only going to be beneficial. It gets you out of it. It gets you out of your head when you’re doing stuff like that.

Liz Elcoate: There’s a wonderful chap … let me just find his name … he got in contact. He lives in New York, Jesse Gardner. He created this wonderful project called Troy Stories, because he lived in Troy, in New York. He basically got desperate in the depths of worry about work and stuff.

Liz Elcoate: He’d started going out onto his surrounding area, and just talking to people, and photographing them, and just finding out their story. It’s just a beautiful project, it really is. His work’s gorgeous. I think it just saved his sanity, going out there, and connecting people, and hearing other people’s story.

Liz Elcoate: Then it’s not all about you then, is it? It’s about other people and their lives as well. There are some really, really good recommendations there, a lot of do some art, cook some food, do something creative.

Liz Elcoate: We’re creative people, generally, who are in this industry. I think when you’re telling yourself that, “Well, I’m rubbish at creativity. I can’t even get paid for it anymore,” to do something else creative is really helpful.

Drew: Underlying messaging in lots of those is just be productive. Find something that you can be doing that will keep you engaged and to keep the juices flowing.

Liz Elcoate: Yeah, and stop you worrying about this huge thing in your life as well. I think I was just spending eight hours a day just applying for jobs, applying for jobs that had nothing to do with what I did for a living, just applying for anything.

Liz Elcoate: It was crazy. I think I went a little bit crazy at the time. Then contacting people, “Have you got any work? Have you got any work?”, just all day. I think if I probably had done that an hour a day, or two hours a day … because you do still have to do that. You still have to look for work … and then spent the other time, I could have done my portfolio.

Liz Elcoate: There’s a million jobs I could have done at the time, that I just couldn’t get my head around. Now after having those conversations, really starting to put some of those into practice, they begin to really help.

Drew: In the article, you’ve put together a toolkit, a feast or famine toolkit, which is kind of like a nine-step program of things you can do that touch some of these. I think it’s a really great read, lots of good ideas in there, things like getting out into nature as you say, running, and walking, and those sorts of things. That’s certainly something I find really helps, even when I’m busy with lots of work.

Liz Elcoate: Absolutely. I think as well, these are all things we should be doing when we’re really busy. I think when you’re very, very busy, it’s very easy to just completely focus on that work and think, “I can’t do anything else. I just have to focus on this work.”

Liz Elcoate: That might drop off suddenly and you’re like, “I’m completely at a loss.” I think if you have these things in your life all the time, then it’s much less terrifying when suddenly, you’re like, “Well, I must start a hobby now, because things have gone quiet, or I must suddenly start running.”

Liz Elcoate: There’s a lot to be said for releasing endorphins through exercise. It can make you feel a hundred thousand times better. My daughter’s at uni now, and she’s under a lot of pressure doing her degree and stuff. I keep saying to her, “Just go to the gym.” She’s like, “I can’t. I’ve got so much reading to do.”

Liz Elcoate: “I went to the gym last night. Mum, I feel really great after going to the gym.” I’m like, “I’m not going to say I told you so.” She said, “I just feel so much happier.” I’m like, “Yeah, I think we’ve all proven that endorphins are good for you.” I really do think there’s some benefit in that.

Drew: I think as well there’s a lot of benefit. You talk about doing side projects, and taking up creative hobbies, and things. Of course, there’s value in not only fueling your creative mind, but also that some of those might turn into work in themselves.

Liz Elcoate: I totally agree, but I think there’s also, don’t start a side project with that in mind, because then it just becomes another chore. I think I’m definitely guilty of that. The minute that I come up with something I quite like to do, I think, “Well, how can I make money out of this?”

Liz Elcoate: I made marmalade the other weekend. I’ve never made marmalade in my life before. I thought, “Maybe this could be a sideline. This marmalade is really good.” I think, “No, you made it because you’re …” It’s one of those particular processes that you go through. Don’t start thinking this could be a business. I’m very bad at that.

Liz Elcoate: I think it’s great to have side projects, but I think the ones that do end up being successful and maybe becoming part of your career aren’t necessarily started with that goal in sight. I think the ones that are started with that goal in sight often don’t work, because they just become a real chore.

Liz Elcoate: Jessica Hische with her Drop Caps, I think she did that for pleasure and fun, and that’s become something she’s so well known for. I think if you set out going, “Well, I’m going to create these amazing things and hopefully it’ll turn into …” I think that sometimes then adds that further pressure.

Liz Elcoate: When I said pursue creative, they can be … I’m a real sad geek, and I really like doing even a puzzle or something, something that really is just mind numbingly, there’s no end, there’s no … well, there is, because you’ve completed the puzzle, but there’s no obvious creative like, “I can show everyone how great my puzzle is.” it’s like making marmalade. It’s just my numbing process, basically.

Drew: I guess there’s a happy medium with those as well for a creative person maybe doing some personal work, just something that where the inspiration takes them and something that they feel like doing. Sharing it on Dribbble might attract some attention that brings in some regular work.

Liz Elcoate: Yeah, absolutely. That really worked for me at the beginning of my career. Wow, this is really taxing the old memory. When I first went freelance I thought, “Okay, I’m going to create an amazing CV.” This is not such a thing these days. I think people are a bit snobby around CVs, but there used to be some really creative, amazing CVs.

Liz Elcoate: I was like, “Oh, I’m going to do that. I’ve got a bit of quiet time. I’m going to do that.” I just went to town and shared it on … I can’t remember, maybe it was Dribbble. That was probably around then. I actually did get quite a bit of work from that, just because it was really creative and I’d gone crazy.

Liz Elcoate: Now I feel like I’m more nervous about sharing those things. I think the more I’ve learned and the more embedded into the industry I’ve got, I’m now less keen to share those things. I think it’s because maybe the tone has changed a little bit on Twitter and things like that. People can really be very critical.

Liz Elcoate: I think back then … she sounds very old … back then it was more of a supportive like, “This is amazing,” kind of thing, rather than, “Well, I think you should do this. I personally wouldn’t have done that.”

Liz Elcoate: I think that has definitely worked for me in the past, going back to your point, just letting loose, and also maybe even do things without thinking. “Well, nobody’s ever going to see this, so let’s just go crazy.” It doesn’t matter. It can be all the worst things you’ve ever been taught not to do, but just go crazy, because they can reap amazing rewards.

Drew: We mentioned briefly about being too busy and when all the work then comes in. The stress is pretty much the same when the work’s piling up?

Liz Elcoate: Yeah. I got really poorly at the beginning of the year because of that. It had been a very quiet Christmas and being very worried, and then it exploded with work. As I said, I had agreed to do this stupid house sitting, which is always incredibly stressful.

Liz Elcoate: I actually made myself, I got quite poorly. It’s exactly the same. It’s just so familiar to a lot of freelancers, I think, this, “I’m too busy for anything else,” kind of thing when it gets to that. Then, “I must do it. I can’t possibly turn it down, or say that I can’t do it for a couple of weeks, because they might go somewhere else.”

Liz Elcoate: There’s this pressure to take it all on if it comes in. Then you could be managing four or five, £5,000 projects at once. That is extremely stressful in itself, because that isn’t something you’d really find in a workplace necessarily. You’d have a support team around you.

Liz Elcoate: I think as a freelancer, there’s also all the admin side of stuff, and all that kind of thing, and life that you have to do outside of work. That can be increasingly stressful, I think. Really, you should be managing your time better. I’m the last person to comment on this.

Liz Elcoate: I’m saying this to myself, “You should be managing your time better.” If clients are coming to you and saying, “We’ve got this deadline,” you’re in charge. You can say to them, “Actually no, if you really want me to do this, I can’t do this for a couple of weeks.”

Liz Elcoate: I think you do have to manage your time well. As a freelancer, you have to be very good at those kinds of things, a lot of things. You can’t just be a great designer. You have to be really good at managing your time and being motivated.

Liz Elcoate: You have to be a good boss to yourself, I think, and not an abusive boss, which I think a lot of us are quite abusive. We are like, “Stay at your desk all day. Have lunch at your desk.” There is no boss in the real world would ever be allowed to treat you like that at all.

Liz Elcoate: I think we have to be really good bosses to ourselves and have time outside of work. It’s so easy for it to be just work and then die in front of the TV in the evening, or X-Box, or whatever, or whatever the kids are playing on these days.

Drew: Liz, freelancing sounds awful.

Liz Elcoate: I know. It does, doesn’t it? Wow, how do I do it?

Drew: Is there anything good about it?

Liz Elcoate: There is so much good about it, like amazing people that I’ve met, amazing community that I’m part of online, having time to go and have really long walks with the dogs, or go and take a day off, or go to London, go and do that. The traveling that I get to do more and more as I get bigger projects is so exciting as well.

Liz Elcoate: Being able to write and get paid to write is a dream of mine. It’s amazing. I wouldn’t necessarily have that opportunity if I worked somewhere else. There’s so many good things about it. Seeing a project from start to finish through and it being successful is so satisfying.

Liz Elcoate: The workshop I mentioned earlier, writing that from scratch and then delivering it, and it being successful was such a high, it really was. Knowing I could engage nine people, 10 people for five hours and keep them interested in what we were doing was really, really exciting for me.

Liz Elcoate: There’s so many good things about it. You’re in charge of your own time. You’re in charge of what you do. It’s worth remembering that, because I think it’s really easy to just … you go freelancing because you want more control or autonomy, and then you just work exactly like you did in a job, exactly the same.

Liz Elcoate: You might as well have stayed in job and had a regular income if you’re going to do that. You need to be flexible and work which way works best for you.

Drew: I guess it’s that that flexibility that enables you to work around whatever family circumstances that-

Liz Elcoate: Yeah, absolutely. I’ve been lucky in that over the years, I’ve had great bosses and stuff, and they’ve always been really understanding about that I was a lone parent. I’ve been a lone parent since she was tiny.

Liz Elcoate: As she got older, weirdly, that became more of a challenge because she needed me to be there more often, particularly those teenage years when I think it’s painful and hard being a teenager, and you need your mum there and your dad there. To have that flexibility, to be able to spend that time with my daughter now is back on that. It’s just so lovely.

Liz Elcoate: The other thing we mustn’t underestimate is, we can go on holiday outside of school holiday times. That’s absolutely great. You can be really flexible with when you go on holiday, what you do with that kind of thing. I found with work, I was always pressured to go during the summer when it was a bit quieter, but it was always hideously expensive because everybody else was on holiday now.

Liz Elcoate: You can take Friday off and you can go to somewhere for the weekend. There’s so much good about it. I would not be doing it if I deep down didn’t prefer it to being employed. I think as well, it’s a long time since I was employed. It’s easy sometimes to look back with rose-tinted spectacles, but there’s a reason I went freelance.

Liz Elcoate: It was highly pressurized, and I really at times couldn’t see a way through the stress and pressure of it. There’s pressure with freelancing, but you can manage it yourself. You’ve not got somebody above telling you what to do.

Drew: Here at Smashing, we’re all about learning. With Smashing Magazine, and the books, and conferences, I think it’s an industry where we’ve got to be learning new stuff all the time. One of the things I like to ask the guests on the podcast is, what have you been learning in your work lately?

Liz Elcoate: Well, I’m really lucky. It’s very pertinent to what we’ve been discussing today, is that I’m learning to run a business. I’m learning to be a businesswoman, and not just a designer now, and doing that through reading and also through working with coaches.

Liz Elcoate: I’ve worked with a couple of coaches. I’ve worked with Paul Boag. I’m also working with Christopher Murphy as well, who’s helping me. It’s great saying I’m a brand designer and I like doing branding, but how do you turn that into a business which regularly pays the bills and regularly has work come in? I’m working through that in the moment, and it’s very exciting. I really love learning that side.

Liz Elcoate: It makes you feel so much more empowered and controlled, to be able to learn proper marketing, and proper networking, and how to target the people I want to work with, and identifying who I want to work with and stuff. It’s very empowering. I’ve been learning that.

Liz Elcoate: I’m also learning, really getting back into UX design and stuff because I love that. I love what I do. I love branding, but I really of enjoy the UX side of stuff as well. I’m brushing up on that and learning a bit more about that again. It’s something that I still had always done, but I’m like, “No, I need to really actively learn more about this now.”

Liz Elcoate: It’s exciting. Lots of learning going on here at the moment.

Drew: You’ve got a couple of podcasts.

Liz Elcoate: Yes, I have, thank you. I have The Elastic Brand, which is a podcast. It began about digital brand design, but I think through the course of doing it, I’ve realized talking to people that it’s brand design, as I said before. That’s really exciting for me.

Liz Elcoate: I get to talk to brilliant designers, not necessarily brand designers, but all kinds of different designers and marketing people, just discussing what all the aspects of a brand, like the storytelling, the brand values, and how your customers feel, and also things like accessibility, and inclusivity, and stuff, which aren’t things that have necessarily really come up in branding particularly.

Liz Elcoate: Then I have another podcast called The Freelance Web that’s been going on for a fair old time now, and we had a big hiatus for a while, but we’re doing again. We never get a chance to actually record, so when we do see each other, we record about eight back to back.

Liz Elcoate: That’s basically just talking about freelancing, which is ironic, looking at the article I wrote from the Smashing Mag about how rubbish I’d been at freelancing. We talk about what to do and what not to do. It’s basically just a conversation about what we’ve done.

Liz Elcoate: That’s with Sean, who is the guy responsible for hiring me into my first digital role, as he likes to tell people.

Drew: We have a lot to thank him for.

Liz Elcoate: So much. Do I? Do I really have a lot to … no, I do. I do, definitely. I’ve got those two.

Drew: Fantastic.

Liz Elcoate: Thank you.

Drew: If you, dear listener, would like to find out more about Liz or hire her to work on your digital brand, you can find her website at elizabethelcoate.com, and she’s @liz_e on Twitter. Her excellent Elastic Brand podcast and The Freelance Web are both available to find wherever you listen to your podcasts.

Drew: Liz, thank you for taking the time to talk to us. Do you have any parting words?

Liz Elcoate: Don’t let me put you off freelancing. It really is wonderful and rewarding, and everything that people say it is, as long as you’re proactive and you take time to look after yourself.

Smashing Editorial
(dm, ra, il)

Source: Smashing Magazine, Smashing Podcast Episode 2 With Liz Elcoate: What’s So Great About Freelancing?