Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. 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. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #120

This newsletter issue was sent out to 182,011 newsletter subscribers on Tuesday, October 14th 2014. If you’re not subscribed yet, feel free to subscribe to our email newsletter1 anytime!

Editorial

Internet Explorer 8. Probably the most annoying word in the world, considering how much effort we used to put into making our websites work in that browser. While IE8 Countdown is running, the browser still has around 10% of worldwide share. So how do we deal with it to minimize our effort, keep our code base lean and clean, and provide those sad IE8 users with an acceptable user experience?

Editorial2

Well, it’s all a matter of setting priorities right. IE8 doesn’t have to mimic advanced experiences of modern browsers — it just has to be functional. So we can use px as fallback for rem units, and instead of Respond.js, serve a fixed-width layout with extra ie8.css styles. For rgba(), hsla(), we can fall back to solid colours. Lack of :last-child(), :nth-child, box-shadow, border-radius and background-size is usually perfectly acceptable, and we have to serve .eot instead of .woff for web fonts. In order to generate ie8.css, we can either serve a lowest common denominator (mobile view) or a “desktop” view using Conditional Comments, with sass-mq mixin3 or LESS mixin4 which collect all styles up to the desktop experience (when built “mobile first”). Last but not least, don’t forget about the good ol’ shiny * { box-sizing: border-box }5 that saves the day in RWD anyway.

This should be enough. And that’s the strategy we’ve been following for the last few months as well. Depending on the number of IE8 users, you could put more or less effort into your IE8 strategy, but serving a basic experience isn’t that difficult, and doesn’t have to take up too much of your time or cost too much money — if the client plays along, that is.

Happy coding!
– Vitaly (@smashingmag)

Table of Contents

  1. Advanced SVG, CSS, JavaScript Techniques6
  2. A Quite Different Background Pattern Generator7
  3. How Much Should You Charge?8
  4. PerfMap: A Front-End Performance Heatmap9
  5. The Infamous Hamburger Icon Revisited10
  6. A Trusty Companion Through Your Mobile Front-End Adventures11
  7. Reducing Latency With InstantClick And FastClick12
  8. Get Better And Smarter: Upcoming Smashing Workshops13

1. Advanced SVG, CSS, JavaScript Techniques

It’s quite remarkable how far we’ve come in front-end over the past few years. What seemed to be quite difficult in the past, can now be solved so easily today (think about responsive image maps14, for example). Every other day, there are new techniques that come up — shared and explained publicly — and that is amazing.

Advanced SVG, CSS, JavaScript Techniques15

So what about Masking SVG animations16 using clip-path? Or perhaps using background-clip for transparent borders17? Or perhaps cross-browser custom-styled select menus18, creating CSS hexagons with transform and calc()19? using smart radio buttons20? Just a few techniques for your toolbox to have nice, scalable, and fast solutions ready for your next project. Handy! (vf)

2. A Quite Different Background Pattern Generator

Let’s suppose a friend of yours wants to create a background pattern, but doesn’t know where to start. Well, you could definitely recommend Gerstnerizer21 and ask them to give it a try. Based on the idea of the book “The Forms Of Color” by renowned Swiss graphic designer Karl Gerstner, this tool creates repetitive patterns with just a few mouse clicks, and even exports them as SVG!

 A Quite Different Background Pattern Generator22

Getting started with Gerstnerizer is easy. You set up a grid, choose a line thickness, opacity and, finally, decide on a pattern on which your grid shall be based (square, triangle or hexagon are at choice). Once set up, it’s time for some magic: you connect the dots in your grid and the tool instantly generates a repetitive pattern from it. A nice and quite different alternative to your conventional design process. After all, playing around often brings the best results, right? (cm)

3. How Much Should You Charge?

If you’re a freelancer, you’ve probably caught yourself scratching your head too many times while pondering over a particular question. Which question, you ask? Oh, you know it very well! Remember the times a client asked you to state your proposal for a design project and you had to name a price? Yes, that question! So, how did you set your price? Did you ask Google, your friends, or just named what you’ve charged in the past just to get over with it?

How Much Should You Charge?

Whatever the price you named was, it might have not been a reasonable amount for that particular project. Remember, the pricing is all about your time and energy invested in the work, and you are not a robot. You’re a human being with your own set of motivation, values and feelings. There are some things you’ll happily do but never ask for money, and then there are things you wouldn’t do for a million bucks. Stop asking Google for the answer and start including yourself in the picture. Just answer 5 questions to know how much you should charge. It’s high time you started pricing like a pro! (ea)

4. PerfMap: A Front-End Performance Heatmap

While participating at the WebPerfDays meetup in New York a few weeks ago, Mark Zeman and Steve Souders took the first steps to whip up a little Chrome bookmarklet that has the makings to simplify the workflow of a lot of front-end ninjas out there: PerfMap23. Using the Resources Timing API, it overlays the page loaded in the browser with a front-end performance heatmap.

PerfMap: A Front-End Performance Heatmap24

Colors and ms values on the heatmap indicate the time it took until the user sees an image, as well as the time it took for the browser to load that specific image. A legend attached to the bottom of the page also shows timings for the full page load. PerfMap is still in its early stages. In fact, the first proof of concept was pushed only a week ago, and Mark has some more plans for it, e.g. dealing with fixed position elements or crawling iframe images. So, if you have any ideas on how it’s best to do this, your advice is sincerely appreciated! (cm)

5. The Infamous Hamburger Icon Revisited

The infamous “hamburger” icon. You’ll find it on more and more responsive websites, yet many designers are undecisive about whether the icon is actually universally clear. Findings are quite widespread. While Booking.com came to the conclusion25 that changing the icon to the word “menu” had no significant impact on the behaviour of our users, James Forster had a very different experience26, with the icon not performing that well, and Jonty Sharples has come up with an interesting compromise27 for everyone.

The Infamous Hamburger Icon Revisited28

Tom Woolley, on the other hand, believes that the “hamburger” icon problem is actually valid for all kind of recent icons29. He observed that all icons used for navigation purposes can cause confusion and leave the user uninformed about the action they’ll perform. According to Luke Wroblewski, the only option left is to keep a clear label text30, with a button shape. Well, perhaps the “hamburger” icon isn’t that tasty31 after all. (ml)

6. A Trusty Companion Through Your Mobile Front-End Adventures

Let’s face it: mobile is quite a beast to tame. However, once you understand exactly why those annoying bugs come up, you can handle them more effectively. To make sense of it all, we just recently released Peter-Paul Koch’s new Mobile Web Handbook32, a practical book that helps you prepare for the big and small challenges that mobile brings along.

A Trusty Companion Through Your Mobile Front-End Adventures33

224 pages dedicated to performance issues, weird browser bugs, inconsistent CSS/JavaScript support, and other tricky nuances that are known to give web developers and designers a headache. Developing websites for mobile is pretty much the same as it has always been, but it does require you to learn a few new things, and some of them are quite confusing. So, are you ready to embark on the journey and conquer that mountain? Get the book right away34. (cm)

7. Reducing Latency With InstantClick And FastClick

Despite our bandwidth growing every day, websites don’t really get that much faster. This is because the biggest bottleneck in loading web pages is latency35. InstantClick36 is one of those JavaScript libraries designed to tackle this problem and make the loading just a bit faster. How? The tool does this by preloading links you are guaranteed to click on.

Reducing Latency With InstantClick And FastClick37

The time it takes for a user from hovering over a link to clicking on it is between 200 and 300 milliseconds. InstantClick makes use of this time to preload the page while the user is hovering over the link. On mobile devices, preloading starts on touchstart. Sounds like a lot of performance overhead? Well, to prevent requests flooding to your page, you can set a delay or preload on mousedown. The library works well in modern browsers and you can use it as progressive enhancement, i.e. if a browser doesn’t support it, your site will work as usual. Also, if you want to reduce that 300ms delay on mobile, you might want to look into FastClick38 as well. (ml)

8. Get Better And Smarter: Upcoming Smashing Workshops

With so many techniques, tools, libraries, 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 front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.

Get Better And Smarter: Upcoming Smashing Workshops39

Half-Day Workshops In Bath, UK (Oct. 27):

Full-Day Workshops In Whistler, Canada (Dec. 9/12):

Upcoming Online Workshops (Nov/Dec):

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

The authors in this newsletter are: Cosima Mielke (cm), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Esther Arends (ea), Christiane Rosenberger (research), Elja Friedman (tools).

Footnotes

  1. 1 https://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://onehundredpatterns.tumblr.com/
  3. 3 https://github.com/guardian/sass-mq
  4. 4 http://www.iambacon.co.uk/blog/life-is-now-easier-create-media-query-mixins-with-rulesets-less-css/
  5. 5 http://www.paulirish.com/2012/box-sizing-border-box-ftw/
  6. 6 #a1
  7. 7 #a2
  8. 8 #a3
  9. 9 #a4
  10. 10 #a5
  11. 11 #a6
  12. 12 #a7
  13. 13 #a8
  14. 14 http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
  15. 15 https://medium.com/@gordonnl/stylised-line-animations-ded23320ffe5
  16. 16 https://medium.com/@gordonnl/stylised-line-animations-ded23320ffe5
  17. 17 http://craigmdennis.com/articles/background-clip
  18. 18 http://jsbin.com/yaruh/37/edit
  19. 19 http://creative-punch.net/2014/01/perfect-css-hexagons-size-using-transform-calc/
  20. 20 http://cssmojo.com/use-radio-buttons-for-single-option/
  21. 21 http://eskimoblood.github.io/gerstnerizer/
  22. 22 http://eskimoblood.github.io/gerstnerizer/
  23. 23 https://github.com/zeman/perfmap
  24. 24 https://github.com/zeman/perfmap
  25. 25 http://blog.booking.com/hamburger-menu.html
  26. 26 http://exisweb.net/mobile-menu-icons
  27. 27 https://twitter.com/Gringomoses/statuses/476292871738642432
  28. 28 http://www.curveagency.com/blog/responsive-usability-testing-nav-burger
  29. 29 http://www.curveagency.com/blog/responsive-usability-testing-nav-burger
  30. 30 https://twitter.com/lukew/status/443440251042676737
  31. 31 https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
  32. 32 https://www.smashingmagazine.com/books/#mobile-web-handbook
  33. 33 https://www.smashingmagazine.com/books/#mobile-web-handbook
  34. 34 https://www.smashingmagazine.com/books/#your-mobile-web-handbook
  35. 35 https://www.youtube.com/watch?v=R8W_6xWphtw
  36. 36 http://instantclick.io
  37. 37 http://instantclick.io/
  38. 38 https://github.com/ftlabs/fastclick
  39. 39 https://www.smashingmagazine.com/smashing-workshops/
  40. 40 https://shop.smashingmagazine.com/smashing-front-end-bootcamp-bath.html
  41. 41 https://shop.smashingmagazine.com/smashing-front-end-bootcamp-bath.html
  42. 42 http://smashingconf.com/whistler-2014/workshops/brad-frost
  43. 43 http://smashingconf.com/whistler-2014/workshops/john-allsopp
  44. 44 http://smashingconf.com/whistler-2014/workshops/tim-kadlec
  45. 45 http://smashingconf.com/whistler-2014/workshops/yoav-weiss
  46. 46 http://smashingconf.com/whistler-2014/workshops/stephen-hay
  47. 47 http://smashingconf.com/whistler-2014/workshops/val-head
  48. 48 http://smashingconf.com/whistler-2014/workshops/vitaly-friedman
  49. 49 https://shop.smashingmagazine.com/online-workshop-friedman-ux-rwd.html
  50. 50 https://shop.smashingmagazine.com/online-workshop-friedman-front-end-perf-rwd.html
  51. 51 https://shop.smashingmagazine.com/online-workshop-lee-creativejs-javascript.html
  52. 52 https://shop.smashingmagazine.com/online-workshop-lee-creativejs-interaction-animation.html
  53. 53 mailto:vitaly@smashingconf.com

↑ 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