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 #171

This newsletter issue was sent out to 235,317 newsletter subscribers on Tuesday, November 29th 2016. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

More often than not, we all seem to keep on complaining about generic, predictable websites, but how do we break out of the box? Well, we should try something new. Something that goes against general best practices. Something playful and original. Experimental and unconventional. What could it be?

How about everything! On an eCommerce site, it could be a responsive configurator2 with AR integration3. On a trip-planning website, it could be a little feature such as exporting to Google Calendar or Microsoft Word (see Zürich Trams4, for example). You could also integrate video5 and audio6 to tell a story in a more profound way. The easiest way to be unique is to use custom illustrations7, animations8 and experimental layouts9. You could even go as far as providing an anaglyph experience10!

On a large screen, video is displayed on the right, with steps and content represented on the left.11

177 Milk Street12 provides a lovely example of integrating video.

Instead of selecting a predictable grid, try to pick up something unpredictable, e.g. a random placement of elements, a random animation, or even a random style for your illustrations. Find your style and use it consistently, for everything. More often than not, you’ll come up with something unique because it will shine with your personality rather than use a generic visual language used countless times throughout the web.

And while doing so, you may be using tools like Sketch. If so, we’ve just released The Sketch Handbook (Print + eBook)13 with pretty much everything you need to know about Sketch to master your skills. No theory — just practical examples that you can follow along, step by step. That should help to get the ball rolling!

Keep playing and experimenting,
– Vitaly (@smashingmag)

Table of Contents

  1. HTTP/2 And Ordering Pizza14
  2. Everything You Need To Know About Designing Icons15
  3. Improving Surveys With Triple Testing16
  4. Keeping FOUC Layout Shifts To A Minimum17
  5. Take Your Layouts To The Next Level With CSS Grid18
  6. Bookmark-Worthy Resources For Front-End Devs19
  7. An Advent Calendar For UX Folks20
  8. Upcoming Smashing Workshops21
  9. New On Smashing Job Board22
  10. Smashing Highlights (From Our Archives)23
  11. Recent Articles On Smashing Magazine24

251. HTTP/2 And Ordering Pizza

Imagine you go to your neighborhood pizza place. You go in, order two slices of your favorite pizza and perhaps a soda, and you’re on your way in three minutes. The staff can handle your request easily because these kinds of orders are what their business model is made for. No big deal. However, when you decide to invite the little league baseball team to that pizza place, things get complicated. Everyone will order something different, things get disorganized quickly, and, thus, wait times go up. What does this have to do with web development? A lot, as Ben Tinsley shows.

Getting Started With HTTP/226

He uses the pizza example to illustrate the differences between HTTP/1.1 and HTTP/227. The little league invitation is a good metaphor to show where the strengths of HTTP/2 lie: When asset requests happen at the same time, HTTP/2 allows the server to go and find the assets without any delay because they all happen at once. “Multiplexing” is the magic term here — one of the major promises of HTTP/2 that makes it possible to improve speed and efficiency. To help you get started with HTTP/2, Ben also shares his lessons learned and best practices28. Handy!

292. Everything You Need To Know About Designing Icons

Ever thought about creating your own icon set? Then you might want to check out the Free Icon Design Guide30 that Justas, the creative mind behind Icon Utopia, has put together. In the 56-pages-long, free eBook, he compiled valuable tips and tricks to give your icon design endeavour a head start.

Free Icon Design Guide31

To start off, the eBook sheds some light on the origins of iconography and why icons matter today. From there on, you’ll explore icon design fundamentals and the technical details you need to know before you get started with your own icons. You’ll learn about different types of icons, about the variety of styles that are possible, and you’ll find out about the usage of grids. Finally, Justas will guide you through the actual design process — from deciding on a theme and style, to sketching out your ideas and choosing the right grid size and picking colors. Good stuff. To download the eBook32, you need to enter your email address. It will then be delivered right to your inbox. (cm)

333. Improving Surveys With Triple Testing

Gathering data by sending a survey is easy. But not all data is good data and often you’ll inadvertently gather misleading and inaccurate data. Maybe because your questions aren’t clear, maybe because they don’t allow participants to give the answers they want to give. So before you hit “Send” next time, Leisa Reichelt recommends to triple test your survey.34

Improving Surveys With Triple Testing35

The process is easy: After having created the survey, go and find someone who matches the target audience the survey aims at. Ask them to complete the survey and watch them while they do it. This gives you the opportunity to see if they understand it and to ask questions. Then adjust the form based on your observations. Leisa advises to repeat these steps with at least three different people. This helps to iron out pitfalls and improve the survey experience and, in effect, the quality of the data you’re about to gather. Clever! (cm)

364. Keeping FOUT Shifts To A Minimum

Flash of unstyled text. If you’re using web fonts, you’re used to seeing that flickering between the initial render of your fallback font37 and the web font you’ve chosen. While this doesn’t look nice, there’s another issue that comes along with it: The layout might shift jarringly due to sizing discrepancies between the two fonts. To keep the unloved side effect to a minimum, Monica Dinculescu created Font Style Matcher38.

Font Style Matcher39

The idea behind the tool is simple, yet genius: It helps you minimize the discrepancy between fallback font and web font so that the layout shift isn’t as harsh. Just use the sliders to adjust font size, line height, font weight, and letter spacing, to find the settings that best match the x-height and width of your fallback font and the intended web font. One for the bookmarks. (cm)

405. Take Your Layouts To The Next Level With CSS Grid

Laying out web pages with CSS has always been hacky. In the early days, we used tables, then floats, positioning and inline-block. While these led to more or less satisfying results, not everything could be accomplished with these hacks. Just think of vertical centering. Flexbox finally provides a way to fill the existing gaps, but when it comes to complex layouts, even Flexbox has its limits. That’s where CSS Grid comes in. CSS Grid is the first CSS module that was created particularly for solving these common layout problems — for good.

Take Your Layouts To The Next Level With CSS Grid41

To help you take your layouts to the next level, Chris House wrote up a comprehensive guide on all things Grid42. In it, he provides information on browser support, important terminology, and a glossary of Grid properties. The guide is based on the latest version of the specification and will be updated regularly.

A neat little helper to visualize the grid lines you’re building with in the browser is the Firefox add-on CSS Grid Inspector43. But please be careful here: The tool is still experimental, so if you encounter any flaws, you can report the problem to the Mozilla Developer Relations team. Last but not least, make sure to also stop by Jen Simmons’ experimental layout lab44 where she shares her know-how about layouting and accomplishing real art direction on the web. (cm)

456. Bookmark-Worthy Resources For Front-End Devs

As a developer, you never stop learning, and that’s why it’s always a good thing to have some valuable resources at hand. Have you seen the collection of resources that Bruce Lawson and Shwetank Dixit put together for Progressive Web Apps46, for example? They compiled articles and videos to help you enter the world of PWAs and learn things in depth.

Progressive Web App Resources47

The list features resources for everything from making your app’s UI run smoothly and using push notifications to preparing it for offline use with service workers. Selected tools and libraries help you save precious time when building Progressive Web Apps, and showcases and case studies reveal a peek at what others are doing. Bookmark-worthy, especially, since new resources are being added from time to time.

Another one for the bookmarks is Stuart Robson’s collection of resources that’ll teach you to sprinkle a bit of BEM into your development process48. And if you’re looking for something more diverse, Andrew Romanov’s repository of YouTube channels49 for front-end developers might be for you. Refreshing to see that her collection isn’t limited to videos in English only, but also offers a good variety of Russian channels, and a few French, Portuguese and Czech ones are featured, too. (cm)

507. An Advent Calendar For UX Folks

December is just around the corner, and what better way to start the celebrations than with an advent calendar to count down the days to Christmas? A special goodie to sweeten the waiting comes from the folks at Thirst Studios and UX Mastery: UXmas51.

UXmas52

In tradition of the advent calendars you may know from your childhood days, UXmas will bring you a delightful little treat each day through December. It could be an article, a video, a sketch, or something else — just like in a real advent calendar, you never know what you’re going to get. The lineup will feature some of the leading UX specialists, including Andy Budd, Indi Young, Susan Weinschenk, Eric Meyer, Elizabeth Churchill, Steve Portigal, Whitney Hess, and many others. But, pssst, more won’t be told just yet, so be sure to pass by the website as soon as the first door opens up this Thursday! (cm)

538. 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.

Smashing Public Workshops54

Workshops at SmashingConf San Francisco 2017

Our Public Workshops

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.com65 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!

669. New On Smashing Job Board

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

  • Creative UI/UX Web Designer68 at BFI (Big Fish Internet) (Manchester, UK)
    “Due to continued growth, we are looking for a fantastic creative web designer to join our team in Manchester or Milnthorpe.”
  • Web Developer/Designer69 at Hooker & Company Advertising (Saint Paul, MN)
    “We are primarily seeking a person to assist with web duties, but additional responsibilities will also be part of your daily routine.”
  • Front End/JavaScript Developer70 at Booking.com (Amsterdam)
    “If you believe you’re a passionate advocate for the user, and are looking to work in an agile, collaborative environment, then we would love to hear from you!”

7110. Smashing Highlights (From Our Archives)

  • The State Of Airline Websites 2015: Lessons Learned72
    Booking a flight tends to be so easy that you take it for granted. Joshua Johnson takes a look at airline websites from around the world and how they master the challenge of turning something as complex into a user-friendly, self-serve experience.
  • How To Create Your Own Front-End Website Testing Plan73
    So, your designers and developers have created a fantastic front-end design, which the client is delighted with, and your job now is to test it. Your heart begins to sink: Think of all the browsers, all the devices and all of these web pages you’ve got to test, not to mention the iterations and bug fixes. You need a front-end testing plan.
  • How A Designer Can Find A Job They Will Truly Love74
    There comes a time in nearly everyone’s career when changing jobs is the natural next step. As a designer, you might start looking for a new job when you feel you have hit a wall with your current employer or when greater opportunities are present at other companies. Susie Pollasky shares tips for finding a job that will make you thrive.

7511. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://tylko.com/shelf/473/v-1/
  3. 3 http://tylko.com/get-app/
  4. 4 http://online.fahrplan.zvv.ch/
  5. 5 http://recipes.177milkstreet.com/recipes/brussel-sprouts
  6. 6 https://www.washingtonpost.com/graphics/lifestyle/walk-this-way/
  7. 7 http://loflorecords.com/
  8. 8 http://waaark.com/vision/
  9. 9 http://projections.pl/venue?lang=en
  10. 10 http://conference.awwwards.com/london-2017/
  11. 11 http://recipes.177milkstreet.com/recipes/brussel-sprouts
  12. 12 http://recipes.177milkstreet.com/recipes/brussel-sprouts
  13. 13 https://www.smashingmagazine.com/sketch-handbook/
  14. 14 #a1
  15. 15 #a2
  16. 16 #a3
  17. 17 #a4
  18. 18 #a5
  19. 19 #a6
  20. 20 #a7
  21. 21 #a8
  22. 22 #a9
  23. 23 #a10
  24. 24 #a11
  25. 25 #
  26. 26 https://www.viget.com/articles/getting-started-with-http-2-part-1
  27. 27 https://www.viget.com/articles/getting-started-with-http-2-part-1
  28. 28 https://www.viget.com/articles/getting-started-with-http-2-part-2
  29. 29 #
  30. 30 http://iconutopia.com/free-icon-design-guide/
  31. 31 http://iconutopia.com/free-icon-design-guide/
  32. 32 http://iconutopia.com/free-icon-design-guide/
  33. 33 #
  34. 34 http://www.disambiguity.com/triple-test-survey/
  35. 35 http://www.disambiguity.com/triple-test-survey/
  36. 36 #
  37. 37 https://bitsofco.de/the-new-system-font-stack/
  38. 38 https://meowni.ca/font-style-matcher/
  39. 39 https://meowni.ca/font-style-matcher/
  40. 40 #
  41. 41 https://addons.mozilla.org/en-US/firefox/addon/css-grid-inspector/
  42. 42 https://css-tricks.com/snippets/css/complete-guide-grid/
  43. 43 https://addons.mozilla.org/en-US/firefox/addon/css-grid-inspector/
  44. 44 http://labs.jensimmons.com/
  45. 45 #
  46. 46 https://dev.opera.com/articles/pwa-resources/
  47. 47 https://dev.opera.com/articles/pwa-resources/
  48. 48 https://github.com/sturobson/BEM-resources
  49. 49 https://github.com/andrew--r/channels
  50. 50 #
  51. 51 http://uxmas.com/
  52. 52 http://uxmas.com/
  53. 53 #
  54. 54 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  55. 55 https://shop.smashingmagazine.com/products/workshop-chris-holst-SF-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-nathan-curtis-SF-2017
  57. 57 https://shop.smashingmagazine.com/products/tim-kadlec-http2-performance
  58. 58 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-design-SF-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-SF-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-sf-2017
  61. 61 https://shop.smashingmagazine.com/products/workshop-nadieh-bremer-sf-2017
  62. 62 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-SF-2017
  63. 63 http://www.uxsalon.com/responsive-design-workshop/
  64. 64 https://swissmobidevs.org/workshop-vitaly-friedman-smart-responsive-design-patterns/
  65. 65 mailto:vitaly@smashingconf.com
  66. 66 #
  67. 67 http://jobs.smashingmagazine.com/
  68. 68 http://jobs.smashingmagazine.com/j/Creative-UI-UX-Web-Designer-Job-Manchester/2424198
  69. 69 http://jobs.smashingmagazine.com/j/Web-Developer-Designer/2448036
  70. 70 http://jobs.smashingmagazine.com/j/Front-End-JavaScript-Developer/2419973
  71. 71 #
  72. 72 https://www.smashingmagazine.com/2015/11/airline-websites-2015-front-end-performance-ux-lessons-learned/
  73. 73 https://www.smashingmagazine.com/2014/11/how-to-create-your-own-front-end-website-testing-plan/
  74. 74 https://www.smashingmagazine.com/2014/11/designers-finding-jobs/
  75. 75 #
  76. 76 https://www.smashingmagazine.com/2016/11/brush-lettering-it-only-gets-better-after-practice-part-1/
  77. 77 https://www.smashingmagazine.com/2016/11/does-conversation-hurt-or-help-the-chatbot-ux/
  78. 78 https://www.smashingmagazine.com/2016/11/wireframe-perfectionist-guide/
  79. 79 https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/
  80. 80 https://www.smashingmagazine.com/2016/11/not-an-imposter-fighting-front-end-fatigue/
  81. 81 https://www.smashingmagazine.com/2016/11/playlists-fuel-coding-design-sessions/
  82. 82 https://www.smashingmagazine.com/2016/11/freebie-thanksgiving-icon-set-15-icons-png-psd-ai-svg/
  83. 83 https://www.smashingmagazine.com/2016/11/web-development-reading-list-159/
  84. 84 https://www.smashingmagazine.com/2016/11/web-development-reading-list-160/
  85. 85 https://www.smashingmagazine.com/2016/11/smashingconf-san-francisco-2017-somethin-is-cookin-in-the-kitchen/
  86. 86 https://www.smashingmagazine.com/sketch-handbook/

↑ 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!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top