Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #167

This newsletter issue was sent out to 198,353 newsletter subscribers on Tuesday, October 4th 2016. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

How do we avoid getting trapped in today’s Javascript frameworks2 madness? How do we make websites more resilient? How do we break out of the predictable, generic, boxy layout? And how in the world do we solve complex problems more efficiently?

SmashingConf Freiburg 20163

With SmashingConf Barcelona 20164 coming up on October 25–26th 2016, we’ve got Peter Sunde, Sara Soueidan, Jen Simmons, Stephen Hay, Jeremy Keith, Maciej Ceglowski and Jonathan Snook joining our fantastic speaker line-up5, who’ll be answering those questions, and more! We’d love to see you in magnificent Barcelona, so go grab your ticket6 if you still haven’t!

Barca, here we come!
– The SmashingMag Team

 

Table of Contents

  1. E-Commerce Design Inspiration7
  2. Mastering The Onboarding Challenge8
  3. A Collaborative Interface Design Tool9
  4. A Color Palette Built With Accessibility In Mind10
  5. Tab Panels, The Right Way11
  6. Strong Examples Of Art Direction12
  7. Upcoming Smashing Workshops13
  8. New On Smashing Job Board14
  9. Smashing Highlights (From Our Archives)15
  10. Recent Articles On Smashing Magazine16

171. E-Commerce Design Inspiration

When Thomas Chrétien was working on a pricing page for a client, he looked at his favorite products for inspiration and how they communicate their pricing options. Fascinated by the matter, Thomas soon started to collect his findings; in a Sketch file at first, and as that grew larger, he decided to share his collection with fellow designers and developers. The result is Pricing Pages18, a curated collection of, well, pricing pages.

Pricing Pages19

If you’re working on an e-commerce project yourself, the directory is a rich source of fresh ideas. And in case you’re looking for even more e-commerce inspiration, the sister projects Checkout Pages20, Product Pages21, and Store Pages22 have you covered as well. (cm)

232. Mastering The Onboarding Challenge

Getting users to sign up for your product is quite easy. The real challenge is to get them to come back and turn them into happy customers. The team behind the customer community platform Intercom knows how hard this can be from their own experience. So to help you optimize your product’s onboarding process, they boiled their most valuable lessons learned from onboarding tens of thousands new users down into one, free eBook: Intercom on Onboarding24.

Intercom On Onboarding eBook25

The eBook consists of nine chapters jam-packed with strategies and advice to master the crucial first impression. You’ll learn to activate new signups, customize their ensuing journey, and, thus, lay the foundation for a long-lasting product-customer-relationship. The eBook is free to download, however, in order to do so, you’ll need to enter your email address and share the book with a friend, or you can donate $5 to charity instead. A good read. (cm)

263. A Collaborative Interface Design Tool

When you’re working on an interface design together with your team, it can be a pain to keep track of the most up-to-date assets. To spare you the drill of constantly syncing and versioning changes, you might want to give Figma27 a try. The interface design tool is not only intuitive to use but also comes with a handy multiplayer editing feature, so you and your team can work together on the same file, in real time. A built-in commenting feature even lets you communicate on the design.

Figma28

Collaboration is one aspect where Figma shines, another strength lies in crafting responsive layouts: Designs automatically adapt to different screen sizes and a feature called “Live Design Preview” mirrors your changes to your mobile devices in real time. If you want to give it a try, Figma is free to use through the end of 2016. It doesn’t require any installation and works on any operating system. A powerful tool. (cm)

294. A Color Palette Built With Accessibility In Mind

Choosing the right colors for a project is a challenging task, especially with accessibility in mind. That’s where Open Color30 comes in. The project attempts to simplify your color decisions by providing a color scheme for UI design that is tested in deuteranopia and protanopia (variations of red-green color blindness) mode. The scheme contains gray plus twelve colors with ten tints and shades each that you can use for fonts, backgrounds, borders, etc.

Open Color31

To use the palette, just import the given CSS, SCSS, or LESS file to your project, and you don’t need to fumble with hex values or the like anymore. All you need to make use of a color are the Open Color variables. For designers, the scheme is also available as an Adobe library, Photoshop/Illustrator swatches, and a Sketch palette. Convenient! (cm)

325. Tab Panels, The Right Way

Tab panels are a double-edged sword. They might be useful to save screen real estate, however, from an accessibility point of view, they are a real bottleneck. Thierry Koblentz now published an extensive article about the issues that come with them33 (and their companion jump links in particular) and how we could do better.

Tab Panels, The Right Way34

The heart of the article is an 11-step guide that helps improve tab panels and, thus, cater for a better user experience. The base is a simple set of heading / div pairs — plain old semantic markup free of any jump links — to which you add ARIA attributes. The best approach, argues Thierry, would be to rely on arrow keys to cycle through the tab items while at the same time allowing users to tab through the items and select a tab to move focus to its associated panel. An interesting concept. To see it in action, check out the demo by Pankaj Parashar35. (cm)

366. Strong Examples Of Art Direction

It’s always nice to see websites that have a strong focus on art direction. We stumbled across a few inspiring examples recently and, well, we don’t want you to miss out on them. The article “Devils, Deals and the DEA37“, a co-publishing project of ProPublica and The Atlantic about Chapo Guzman and why he was the biggest winner in the DEA’s longest running drug cartel case, is one of them. A straightforward design without any frills, perfectly matching this piece of in-depth journalism.

Epicurrence38

Another example is the website of Epicurrence39. The event for creatives describes itself as a “non-conference”, and well, this uniqueness is also reflected in the design. There is no strict separation between textual and image content, elements overlay each other, yet there is a lot of whitespace, a lot of room. Perfect for an event that will take place mostly outdoors, in a National Park.

Other conferences rely on strong art direction to promote their events, too. Circles Conference40, for example, presented itself as bold and colorful this year. Geometrical patterns and unusual shapes inspired by the 80’s aesthetics are the characteristic elements of its design. Webstock41’s 2016 website comes with an eyecatching, interactive opener graphic and a color changing background, the rest of the page is held rather subtle. Valio Con42 on the other hand, has an unusual approach to put its speakers into the center of attention — with subtly tinted speaker photos placed in colorful boxes that are arranged differently depending on your viewport. Not enough, yet? Then also be sure to check out the websites of Squares Conference43, Forge Conference44, and From the Front45. Their little, art-directed finesses certainly don’t rank behind. Keep your eyes open! (cm)

467. Upcoming Smashing Workshops

With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

SmashingConf Barcelona47

Workshops at SmashingConf Barcelona

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com54 and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy!

558. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board56:

  • Full-Stack Developer57 at FINE (Portland, OR)
    “We’re looking for an experienced full-stack developer to join our crew of eccentric geniuses in Portland! This is a mid- to senior-level position using Ruby on Rails, SCSS and Javascript to build new websites for our clients, along with occasional feature additions to existing sites and ongoing work to improve and maintain our open-source CMS, the basis for most of our builds.”
  • Junior Software Engineer58 at AccuPoint (Jersey City, NJ)
    “AccuPoint is currently seeking a dynamic Software Engineer to join its team. The developer we are looking for is hungry and excited to thrive in a fast paced environment. We want you to focus on refactoring, improving, extending, and scaling the product.”
  • Art Director, Key Art59 at Crown Media Family Networks (Studio City, CA)
    “Under the direction of the Vice President, Video, Print and Web Design, the Art Director, Key Art works to conceptualize and manage key art solutions consistent with the Crown Media Family Networks, Hallmark Channel and Hallmark Movies & Mysteries brand criteria.”

609. Smashing Highlights (From Our Archives)

  • Takeaways From Mobile Web Behavior61
    According to Ian Carrington, Google’s mobile and social advertising sales director, speaking at Mobile Marketing Live back in 2012, more people in the world have access to a smartphone than a toothbrush.
  • Size Matters: Balancing Line Length And Font Size In Responsive Web Design62
    As we refine our methods of responsive web design, we’ve increasingly focused on measure (another word for “line length”) and its relationship to how people read. The popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and reduce font size for small screens.” While a good measure does improve the reading experience, it’s only one rule for good typography. Another rule is to maintain a comfortable font size.
  • Powerful Workflow Tips, Tools And Tricks For Web Designers63
    Designing and developing can be time-consuming, especially when the project involves a new challenge, putting the team or freelancer into unknown territory. Moreover, time is a key factor in productivity. Working efficiently enables us to deliver better value at a competitive price.

6410. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.o5yiovkzd
  3. 3 https://smashingconf.com/speakers
  4. 4 https://smashingconf.com/speakers
  5. 5 https://smashingconf.com/speakers
  6. 6 https://smashingconf.com/registration
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16 #a10
  17. 17 #
  18. 18 http://www.pricingpages.xyz/
  19. 19 http://www.pricingpages.xyz/
  20. 20 http://www.checkoutpages.xyz/
  21. 21 http://www.productpages.xyz/
  22. 22 http://www.storepages.xyz/
  23. 23 #
  24. 24 https://www.intercom.com/books/onboarding
  25. 25 https://www.intercom.com/books/onboarding
  26. 26 #
  27. 27 https://www.figma.com/
  28. 28 https://www.figma.com/
  29. 29 #
  30. 30 https://yeun.github.io/open-color/
  31. 31 https://yeun.github.io/open-color/
  32. 32 #
  33. 33 http://cssmojo.com/tab-panel-the-right-way/
  34. 34 http://codepen.io/pankajparashar/full/oJEAF/
  35. 35 http://codepen.io/pankajparashar/full/oJEAF/
  36. 36 #
  37. 37 https://www.propublica.org/article/devils-deals-and-the-dea
  38. 38 https://www.epicurrence.com/
  39. 39 https://www.epicurrence.com/
  40. 40 http://circlesconference.com/
  41. 41 http://www.webstock.org.nz/16/
  42. 42 http://valiocon.com/
  43. 43 http://squaresconference.com/
  44. 44 http://www.forgeconf.com/
  45. 45 https://2016.fromthefront.it/
  46. 46 #
  47. 47 http://barcelona.smashingconf.com
  48. 48 https://shop.smashingmagazine.com/products/workshop-sara-soueidan-barcelona-2016
  49. 49 https://shop.smashingmagazine.com/products/workshop-stephen-hay-barcelona-2016
  50. 50 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-barcelona-2016
  51. 51 https://shop.smashingmagazine.com/products/workshop-jonathan-snook-barcelona-2016
  52. 52 https://shop.smashingmagazine.com/products/workshop-christian-holst-barcelona-2016
  53. 53 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-RWD-barcelona-2016
  54. 54 mailto:vitaly@smashingconf.com
  55. 55 #
  56. 56 http://jobs.smashingmagazine.com/
  57. 57 http://jobs.smashingmagazine.com/j/Full-Stack-Developer/2430224
  58. 58 http://jobs.smashingmagazine.com/j/Junior-Software-Engineer/2429530
  59. 59 http://jobs.smashingmagazine.com/j/Art-Director-Key-Art/2428900
  60. 60 #
  61. 61 https://www.smashingmagazine.com/2015/10/takeaways-mobile-web-behavior/
  62. 62 https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/
  63. 63 https://www.smashingmagazine.com/2013/10/powerful-workflow-tips-tools-and-tricks-for-web-designers/
  64. 64 #
  65. 65 https://www.smashingmagazine.com/2016/09/automating-art-direction-with-the-responsive-image-breakpoints-generator/
  66. 66 https://www.smashingmagazine.com/2016/09/developing-for-virtual-reality-what-we-learned/
  67. 67 https://www.smashingmagazine.com/2016/09/choosing-the-right-prototyping-tool/
  68. 68 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
  69. 69 https://www.smashingmagazine.com/2016/10/creating-universal-windows-apps-with-react-native/
  70. 70 https://www.smashingmagazine.com/2016/09/building-hybrid-apps-with-chakracore/
  71. 71 https://www.smashingmagazine.com/2016/09/building-social-a-case-study-on-progressive-enhancement/
  72. 72 https://www.smashingmagazine.com/2016/09/understanding-rest-and-rpc-for-http-apis/
  73. 73 https://www.smashingmagazine.com/2016/09/desktop-wallpaper-calendars-october-2016/
  74. 74 https://www.smashingmagazine.com/2016/09/interview-with-matan-stauber/

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Comments are closed.

↑ Back to top