Smashing Newsletter: Issue #107
- April 15th, 2014
- 1 Comment
Do you remember back in the days when you used dial-up to connect to the Web, or do Bulletin Board Systems or FidoNet even ring a bell anymore? Ah, the good old times2, when you could almost sense the beauty of a modem’s handshake3. When HTTP (the underlying foundation of the Web) was initially designed in the early 90s, that was the kind of world that existed back then. In fact, bandwidth and connections were much, much different from what we use today.
As remarkable as it is, HTTP/1.1, the version of HTTP in common use, has a few limitations; browsers can use a maximum of 6 connections per domain, request and response headers are uncompressed, and there is just one single request per connection. Well, Google has been working on a revised version of HTTP, a new networking protocol that aims to specifically speed up the Web.
The result is SPDY5 which augments HTTP with several speed-related features like unlimited number of parallel requests per connection, quicker slow start as well as better compression. Developers can also prioritize resources, and the protocol even uses SSL/TLS by default. Fallback? Since SPDY is an extension of HTTP/1.1, it always falls back to good old HTTP/1.1 in case it’s not supported by a particular browser. The results speak for themselves: 64% decrease in average page load times and 23% mean page load time improvement on mobile. SPDY has become an integral part of the HTTP/2.06 specification — which is already on its way!
Can we use SPDY today? Yes! In fact, there is no reason not to use it. It requires both server-side and client-side implementations though. You can use mod_spdy7 for Apache 2.2, and ngx_http_spdy_module8 for Nginx, and browser support is quite good9, with only Safari, iOS Safari and IE<=10 not supporting SPDY. The protocol (in different versions) is supported in Chrome 4+, Firefox 13+, Opera 12.1+, Amazon Sink and Android, so no wonder that Gmail, WordPress.com, Facebook and Twitter are using it already today.
So, while HTTP/2.0 hasn’t gained traction just yet, we can combine progressive enhancement with SPDY today to speed up our websites immensely, and make the Web that we all love and shape every day even faster and better for our users.
— Vitaly (@smashingmag)
Table of Contents
01. Designing An SVG Icon System10
03. Handy Resources For Responsive Email Design12
04. Photoshop In Real Life13
05. Smart Techniques For CSS Ninjas14
06. Faster CSS Debugging With Pesticide15
07. Fast And Beautiful Web Fonts16
08. The Magic Of CSS17
09. Using Web Workers Yet?18
10. Brilliant Little Brain Gems19
11. Full-Day Smashing Workshops20
211. Designing An SVG Icon System
What do you use more often: SVG or icon fonts? Obviously, both options have great use cases for resolution-independent image assets, yet SVG seems to be more reliable22 when it comes to cross-browser support. If SVG fails, it fails gracefully to PNG (as long as PNG fallback is provided). If an icon font fails, the user sees nothing. This is always the case with Opera Mini, for example. However, icon fonts are often preferred because they provide us with an encapsulated system to manage our icons—nicely bundled into one single icon font.
But we can create similar icon systems with SVG24, too. Since SVG is just markup and source file (unlike PNGs), we can maintain a folder of SVG files, bundle them all into one single SVG, and use
defs within SVG to refer to the specific images within our HTMP markup. Sounds difficult? It’s not. In fact, svgstore Grunt task25 and IcoMoon26 can take care of everything: just provide a folder of images, and it generates one single SVG and markup for you. The PNG fallback will have to be defined in CSS though. On CSS-Tricks, Chris Coyier has a more detailed write-up on SVG systems27 which is definitely worth reading. Well, now you have another reason to use SVG after all. (vf)
343. Handy Resources For Responsive Email Design
As email opening rates on mobile devices increase steadily, the need for responsive emails is growing. Two comprehensive resources that will give you an overview over the ins and outs of responsive email design are coming from designer Brian Graves. Responsive Email Resources35 neatly compiles tools and other resources, among them preprocessors, frameworks, tutorials, case studies and much more, to make your HTML emails fit for big and small screens alike.
If you’re looking for specific design solutions to implement in your emails, you might also want to check out Responsive Email Patterns37, a handy construction kit full of patterns and modules for layout, navigation, lists, grid blocks, media and accordions. All patterns have been tested either using Litmus or on real devices; the supported email clients are listed on the site. Convenient and definitely worth a bookmark. (cm)
384. Photoshop In Real Life
Do you ever wish you could use Photoshop tools in real life? For example, when walking down the street, do you ever wish you could erase what you see? You know what I mean: Ctrl + Z would come in handy every now and then, wouldn’t it? Street Eraser39, a London street art project by Guus Ter Beek and Tayfun Sarier, does just that. It’s a fresh, creative approach to graffiti and I think it’s great!
The stickers are so cleverly placed that when you see the photo from your computer screen, it could look like a screen shot of a Photoshop file. What a way to meld the technical design realm with the real world! It’s fun and would definitely cause me to look twice. How about you? (sh)
415. Smart Techniques For CSS Ninjas
What is it about those wonderful, shiny snippets of code that makes us bookmark them, copy them into our own personal library and look out for the times when we can finally use them in real projects? Good code snippets provide good solutions to problems, and they can save quite a lof of time and headache, too. Rik Schennink has come up with a CSS snippet for Trippy Labels42 which combines input placeholder and label in one input field.
Shane Murphy has also published a simple responsive navigation44, which is displayed as a stacked list by default, and with JS available, it gets hidden and visibility is toggled via a button; at larger viewports the navigation is displayed horizontally. Furthermore, our Smashing Coding editor, Dudley Storey, has published a little tutorial on how to create decorated numbered lists with CSS counters and
Not fancy enough? Well, if you want to have a more granular and consistent control on how your link underlines look like (and
text-decoration: underline; and
border-bottom arent’ just good enough for you), Gary Hepting has created a Underline pen on CodePen46, based on Marcin Wichary’s work47 for Medium.com. If you know some more fancy techniques, tweet to @smashingmag using the hashtag
#smtechnique — we’ll do our best to spread the word. (vf)
486. Dear Comic Sans, Meet Comic Neue!
When Vincent Connare set about creating Comic Sans in ’94, to be used in speech bubbles in a Microsoft program (named MS Bob), he certainly didn’t have a clue that he was actually creating a typeface that people will love to hate. Comic Sans is mostly hated for the fact that it’s heavily ill-suited for the places where it can be found. Oddly enough, the childish typeface is popular on things such as prohibitive signs, which sometimes resembles a policeman wearing a clown costume.
Vincent is not to blame; he never really intended the font to be released for general use. So, everyone hates Comic Sans but what will hate alone bring us? Likely, nothing. Craig Rozynski decided he wanted to do more than just hate Comic Sans and created Comic Neue50, a reinterpretation of Comic Sans. Comic Neue doesn’t want to be the world’s most ubiquitous casual typeface, but it does look… interesting, and you can download it for free. Maybe it’s time for some love? ;-) (ea)
517. Faster CSS Debugging With Pesticide
Although writing CSS became much more convenient with preprocessors, CSS debugging still is a pain. Especially when layout containers and elements without background, borders or outlines behave wrong, it can be hard to visually observe what the problem is. Are you usually applying outline to HTML elements to make issues visible? I’m doing this, too, but here is a little tool to make our life just a bit easier.
Pesticide53 applies outlines to HTML elements in a website. As outline is hardly used in CSS (compared to border or background properties), your styles won’t be overwritten which makes it perfect for testing and debugging. You can either download the Chrome extension54 and simply toggle borders on and off. Alternatively, Pesticide offers a CSS file and a SASS partial to include in your HTML. Handy! (ml)
558. Fast And Beautiful Web Fonts
The large majority of content on the Web, just as in print, is written. However, while print typography has well-established principles, rules and guidelines, Web typography is often a rather tricky subject; not only due to the fact that it has to be responsive, but also because loading times and the quality of glyphs aren’t always optimal. Nevertheless, there is still something we can do about both, as the project Brick56 shows.
Created by Alfred Xing, Brick takes up the cudgels for high-quality type by serving non-modified WOFF clones of the original fonts. The effect: the type maintains its quality and is rendered the way it is actually meant to be seen, while at the same time ensuring fast loading across all modern browsers. At the moment, there are 28 fonts that you can easily implement into your own projects. A quick start guide on GitHub58 tells you how to do it. Brick is open source and hence free to use. In addition to that, anyone interested is more than welcome to contribute to the project. Great work! (cm)
599. The Magic Of CSS
CSS can be quite messy. There are rules, and best practices, and common approaches, but sometimes playing around is just the most effective way to see what works and what doesn’t. Adam Schwartz has now started to share the insights he gained in this process of trial and error with all the other CSS adventurers out there — in a straight to the point and beautifully designed online textbook named The Magic of CSS60.
The material is intermediate to advanced and currently fills six chapters with knowledge and lessons learned on layout, tables, color, typography and transitions. Apart from its illustrative examples the guide makes use of some nifty features to make everything as comprehensible as possible. Most CSS properties for example can be clicked to obtain more contextual information and in some examples altering parameters, such as the width of a box, yourself helps you better grasp one of those magic CSS moments. More, exciting chapters are already in the works, so make sure to pay the site a visit every now and then. (cm)
6210. Using Web Workers Yet?
Web Workers spec65 define an API for creating background scripts in your Web application. For example, you can fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions. Moreover, they can help to avoid “unresponsive script” issues and make the interface more responsive and fast for users. The best part: Web Workers is well supported66 in modern browsers, including IE 10+, Firefox, Chrome, Safari, Opera, iOS Safari, Blackberry, IE Mobile and Android 4.4+. Head on over to HTML5Rocks: Web Workers Basics67 and Using Web Workers on MDN68 to get started right away, and learn more about implementation and usage. (ml)
6911. Brilliant Little Brain Gems
A bat and a ball together cost $1.10. The bat costs $1 more than the ball. How much does the ball cost? Most of us would probably answer 10 cents — that’s what intuitively comes to our minds. But actually, it’s 5 cents. If this leaves you with a puzzled look, don’t worry, it’s not about maths here. This supposedly simple problem is rather a wonderful example of what psychologists call a “substitution bias”, i.e. we’re constantly trying to minimize cognitive effort and substitute hard questions for the easier ones.
Scientific findings like this one do not only make great conversation starters, but knowing how our brains work can actually help us build better products, too. However, staying on top of latest research usually takes up quite some time and efforts. Well, not with cognitive lode71. The site distills the latest findings from consumer psychology and behavioural economics down into helpful, easy to understand tidbits. Each one of them links further reading resources to dig deeper into a topic and even notes down takeaways for decision-makers. Brilliant! (cm)
7212. Full-Day Smashing Workshops
There are so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, so what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our Front-End & RWD workshops are all about: full practical days that will help you become a better front-end warrior, today.
We’ve got a couple of practical, hands-on workshops coming up in New York, USA, very soon:
- Responsive HTML Email76 with Fabio Carneiro,
- Scalable CSS Architecture77 with Jonathan Snook,
- Grid Design78 with Mark Boulton,
- Photoshop + RWD79 with Dan Rose,
- SVG and Data Visualization80 with Brian Suda.
If you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly[at]smashingconf[dot]com 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! (vf)
The authors in this newsletter are: Esther Arends (ea), Cosima Mielke (cm), Shavaughn Haack (sh), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://www.youtube.com/watch?v=vvr9AMWEU-c
- 3 http://www.windytan.com/2012/11/the-sound-of-dialup-pictured.html
- 4 https://www.youtube.com/watch?v=vvr9AMWEU-c
- 5 https://developers.google.com/speed/spdy/
- 6 http://http2.github.io/http2-spec/
- 7 https://code.google.com/p/mod-spdy/
- 8 http://nginx.org/en/docs/http/ngx_http_spdy_module.html
- 9 http://caniuse.com/spdy
- 10 #a1
- 11 #a2
- 12 #a3
- 13 #a4
- 14 #a5
- 15 #a6
- 16 #a7
- 17 #a8
- 18 #a9
- 19 #a10
- 20 #a11
- 21 #
- 22 https://docs.google.com/presentation/d/1n4NyG4uPRjAA8zn_pSQ_Ket0RhcWC6QlZ6LMjKeECo0/edit#slide=id.g178014302_0176
- 23 http://css-tricks.com/svg-sprites-use-better-icon-fonts/
- 24 http://css-tricks.com/svg-sprites-use-better-icon-fonts/
- 25 https://github.com/FWeinb/grunt-svgstore
- 26 http://icomoon.io/app/
- 27 http://css-tricks.com/svg-sprites-use-better-icon-fonts/
- 28 #
- 29 http://superherojs.com/
- 30 http://superherojs.com/
- 31 https://twitter.com/kimjoar
- 32 https://twitter.com/madsmobaek
- 33 https://twitter.com/vandelay
- 34 #
- 35 http://www.responsiveemailresources.com/
- 36 http://responsiveemailpatterns.com/
- 37 http://responsiveemailpatterns.com/
- 38 #
- 39 http://streeteraser.com/
- 40 http://streeteraser.com/
- 41 #
- 42 http://codepen.io/rikschennink/details/FHaLo
- 43 http://codepen.io/rikschennink/details/FHaLo
- 44 http://jsfiddle.net/shanomurphy/zp376/
- 45 http://demosthenes.info/blog/855/Creating-Decorated-Ordered-Lists-With-CSS
- 46 http://codepen.io/ghepting/pen/tLnHK/
- 47 https://medium.com/p/7c03a9274f9
- 48 #
- 49 http://comicneue.com/
- 50 http://comicneue.com/
- 51 #
- 52 http://pesticide.io/
- 53 http://pesticide.io/
- 54 https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh?hl=en-US
- 55 #
- 56 http://brick.im
- 57 http://brick.im
- 58 https://github.com/alfredxing/brick/wiki/Usage
- 59 #
- 60 http://adamschwartz.co/magic-of-css/
- 61 http://adamschwartz.co/magic-of-css/
- 62 #
- 63 http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html#workers
- 64 http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html#workers
- 65 http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html#workers
- 66 http://caniuse.com/#feat=webworkers
- 67 http://www.html5rocks.com/en/tutorials/workers/basics/
- 68 https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
- 69 #
- 70 http://coglode.com/
- 71 http://coglode.com/
- 72 #
- 73 http://www.smashingmagazine.com/workshops/
- 74 http://thetimescenter.com/
- 75 http://commons.wikimedia.org/wiki/New_york_times_square-terabass.jpg
- 76 http://smashingconf.com/ny-2014/workshops/fabio-carneiro
- 77 http://smashingconf.com/ny-2014/workshops/jonathan-snook
- 78 http://smashingconf.com/ny-2014/workshops/mark-boulton
- 79 http://smashingconf.com/ny-2014/workshops/dan-rose
- 80 http://smashingconf.com/ny-2014/workshops/brian-suda