Performance matters, and so does typography. When we redesigned Smashing Magazine back in 2012, we cared a lot about creating a consistent, well-crafted and unique typographic experience that would work well and remain “stable” among screen resolutions and devices. However, with two (subsetted) typefaces totalling up to six fonts (Regular, Bold and Italic), we ended up with a quite sizeable amount of web fonts that had to be downloaded to render the website.
Unfortunately, this hurt performance. Obviously, as it always is with web fonts, you want to prevent a frequent FOUT, but you also don’t want to download fonts the entire time. Furthermore, you don’t want to keep sending HTTP requests to Fontdeck or Typekit, and you wouldn’t want to block content from rendering while web fonts are still being downloaded. For some time, our readers kept seeing shiny underlines that displayed links on the page, and the text would remain entirely invisible until all of the web fonts had been fully downloaded.
Over the last few weeks, we’ve been experimenting a lot with web fonts and what we can do to improve performance. We’re currently embedding WOFF files by using Base64 encoding in a separate CSS stylesheet, that loads the stylesheet
onLoad once the page starts rendering, and then stores the fonts in localStorage so the web fonts are always be pulled from localStorage once they are cached. As a result, the first load may take some time (although the page would start to render quickly), but subsequent loads are bound to be much faster.
We are planning to publish a short article about our findings with stats and comparisons of what we’ve encountered during this process. If you happen to discover any issues or problems while browsing through Smashing Magazine this week, please feel free to share your feedback on Twitter via @smashingmag or get in touch with us directly. And if you’ve experienced and learned something new about web fonts in your own projects, please do share your insights using #smfonts2 — we’d love to collect, mention and share them in the upcoming article very soon!
Cheers from the Düsseldorf’s Beyond Tellerrand conference,
— Vitaly (@smashingmag)
Table of Contents
- Getting Content For Prototyping, The Easy Way3
- Free HTML5 Templates For Your Toolbox4
- Icon Freebies: Payment Icons and Ocean Explorers5
- Why Complicate Things When They Can Be So Simple?6
- Breaking News At 1000ms7
- 99% Invisible: A Little Radio Gem8
- PourOver: A Client-Side Solution For Fast Filtering And Sorting9
- Hand-Picked Screencasts For Developers10
- Comparing Costs In Cities11
- Full-Day Smashing Workshops12
1. Getting Content For Prototyping, The Easy Way
So you’ve developed a brilliant new app and testing day has arrived… booo! One of the first things you’d probably want to figure out is whether your app’s database is ready to be bombed with tons of data, because that is exactly what will happen. So how do you get your test data? Well, you’ll have to enter everything manually. No, of course not. No one would want to go through such pain. But even if you didn’t have another choice, doing so might leave important bugs undiscovered. The bottom line is that you need realistic data, but where (and how) can you get it from?
Well, luckily for you, there are some inventive solutions available to help you easily create mock data. For example, the Sketch app plugin14 allows you to quickly create dummy content such as avatars, names, text and geo location data. (If you haven’t tried Sketch yet but would like to hear why it’s cool, read this15.) The plugin is free and was developed by Timur Carpeev who credits it to four content creator tools you’ll simply love just as much: Unsplash16, ui Faces17, uinames18 and mockaroo19. If you’re more into Photoshop, Kaku20 is a simple Photoshop plugin that helps you translate your text layers into a different language. Useful? Absolutely! (ea)
2. Free HTML5 Templates For Your Toolbox
As you know, every web project is different. One crucial aspect of being able to stay affordable and efficient at your work is to reuse some components that are similar throughout all the projects (e.g. setting up media queries, mix-ins, grid etc.). That’s why we all have a collection of boilerplate templates or components that can be reused for future projects. You know, a toolbox that you can constantly update with new techniques, snippets and templates.
Well, you can now save even more time by reusing some of the solutions that others kindly offer for free. HTML5 Up22, for example, offers a handful of fully responsive templates which are customizable and freely available under a CC license. Blacktie23 is another service that offers general templates but also themes for various CMS — also freely available under a CC license. Last but not least, there is Get Template24 which provides everything you need to create a lovely “Coming Soon” page in minutes, or start prototyping really quickly until you find time to give it a proper spin. (ml)
3. Icon Freebies: Payment Icons and Ocean Explorers
Everybody loves icons. While some icon sets out there are plain practical, others resemble tiny works of art. One of these little masterpieces took our hearts by storm and it will probably take yours too: Guillaume Kurkdjian’s maritime-themed icons25 — think boats, squids, harpoons and buoys. With their flat, unicolored looks, they are summery light and anything but kitschy. You can download the icons for free, however, please understand that they have to be purchased for use in commercial projects.
You were hoping for something that is, well, more suitable for daily use? How about Orlando TM Merone’s Payment Webfont27 then? The icon set consists of 34 SVG glyphs of payment provider logos and is sure to come in handy in your next e-commerce project. Apart from major credit card providers, it also includes less frequent payment options such as Bitcoin and Google Wallet and some country-specific alternatives. Nice! (cm)
4. Why Complicate Things When They Can Be So Simple?
Libraries are great because they provide us with well-tested, reliable solutions that take good care of legacy browsers so we don’t have to deal with them. However, quite often they could be an overkill, delaying loading of the website and increasing the work that browsers have to do to deliver a page. You may not need jQuery28, but then again, you should be aware of all the useful workarounds and bugfixes29 that jQuery provides. In fact, the same goes for commonly used libraries like Modernizr, too.
5. Breaking News At 1000ms
The web used to be all about flashy and shiny features that excited the users as well as the clients. Nowadays, the trend is shifting to minimalism and the focus has moved to accessible content and fast performance. Most of all, news magazines are constantly working on finding the best (and fastest) way to load content.
“Breaking news at 1000ms35” is a speaker deck prepared by Patrick Hamann which introduces how The Guardian has managed to ultimately provide their users the latest news under a second. The slides include details on what the common performance bottlenecks within the browsers are, and how the Guardian team has optimized and monitored each stage of the critical path to create fast, jank-free websites. (ml)
6. 99% Invisible: A Little Radio Gem
Have you ever heard of the “driveway moment”? It’s when a story on the radio is so good that you can’t leave your car although you’ve already reached your destination. Every radio producer aspires to create special moments like these. Moments that let us indulge completely into the story and forget about time. A little radio show that masters this special skill perfectly is 99% Invisible36.
99% Invisible is about design, architecture and, as its creator Roman Mars describes, “the 99% invisible activity that shapes our world”. This does not only sound promising, the show really is a little gem and a pleasure to listen to. The stories are told with a special love for detail and have their very own signature style — varied and exceptional. The production is completely independent and with currently 114 episodes available (new ones are being released every 10 to 14 days) already well established. If you haven’t already, make sure to tune in, you’ll be hooked — just like we are. (cm)
7. PourOver: A Client-Side Solution For Fast Filtering And Sorting
Filtering, sorting and selecting from a large collection such as an archive or a data-exploration app with 100,000s of items can be a real performance killer. Usually, each request that a user makes is handled by the server individually, resulting in a new network roundtrip each time. Luckily, there is now a library that counteracts this detour and caters for a much smoother, more responsive experience.
Based on the principle of simple queries that can be composed with each other arbitrarily without having to recalculate their results, PourOver39 is basically a client-side index that creates a cache for every possibile combination. Sounds good? The code is available on GitHub40, together with a thorough introductory guide41 to get you started right away. (cm)
8. Hand-Picked Screencasts For Developers
If you’ve been struggling to understand Django as a beginner, or how to create an Android app from scratch, or have been trying to learn more about how Python works, you can close all those search tabs this very moment because you probably won’t be needing them no more.
Devcasts.io43 provides a good collection of screencasts grouped into three categories: frameworks, databases and languages. You can sort out the screencasts according to your level of expertise, and even watch the screencasts which the staff found particularly useful and informative. Now you have everything you need all in one place and no reasons for excuses not to learn and improve your skills! (kv)
9. Comparing Costs In Cities
If you’re like most people, you probably research as much as you can about a certain city before jumping onto that airplane. However, sometimes it tends to take up a lot of your time, and you find yourself bookmarking a good number of pages and doing all the math yourself. Well, not anymore. Expatistan’s Cost Of Living Index44 is bound to make your life easier with so many cost comparisons all in one place. It already consists of comparisons between more than 1,700 cities in the world.
More than 235,000 visitors have already participated and entered almost 900,000 prices for clothing, a certain amount of milk or even the price of a Volkswagen to get a better understanding of how much living in a specific city can cost. The numbers are quite accurate, but need more people to keep the figures updated in order to provide their visitors with the necessary means to find out how expensive a place really is before moving there. If you’ve already visited a city or two, you’re most welcome to share the facts and figures with others! (kv)
10. 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 Zürich, Switzerland:
- CSS3 For RWD47 with Andrew Clarke,
- Responsive Design48 with Jeremy Keith,
- Responsive Design Workflow49 with Stephen Hay,
- Responsive Tricks & Techniques50 with Vitaly Friedman.
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), Melanie Lang (ml), Cosima Mielke (cm), Kristina Vogt (kv), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://twitter.com/search?f=realtime&q=%23smfonts&src=typd
- 3 #a1
- 4 #a2
- 5 #a3
- 6 #a4
- 7 #a5
- 8 #a6
- 9 #a7
- 10 #a8
- 11 #a9
- 12 #a10
- 13 https://github.com/timuric/Content-generator-sketch-plugin
- 14 https://github.com/timuric/Content-generator-sketch-plugin
- 15 http://alistapart.com/blog/post/design-tools-for-todays-web/
- 16 http://unsplash.com/
- 17 http://uifaces.com/
- 18 http://uinames.com/
- 19 http://www.mockaroo.com/
- 20 http://kaku.ps/
- 21 http://www.gettemplate.com/
- 22 http://html5up.net/
- 23 http://www.blacktie.co/
- 24 http://www.gettemplate.com/
- 25 http://guillaumekurkdjian.com/icons-ocean/
- 26 http://guillaumekurkdjian.com/icons-ocean/
- 27 http://www.orlandotm.com/payment-webfont/
- 28 http://youmightnotneedjquery.com/
- 29 https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit
- 30 https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059
- 31 http://lynn.ru/examples/svg/en.html
- 32 http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images
- 33 https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059
- 34 https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014
- 35 https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014
- 36 http://99percentinvisible.org/
- 37 http://99percentinvisible.org/
- 38 http://nytimes.github.io/pourover/
- 39 http://nytimes.github.io/pourover/
- 40 https://github.com/NYTimes/pourover
- 41 http://nytimes.github.io/pourover/
- 42 http://www.devcasts.io/
- 43 http://www.devcasts.io/
- 44 http://www.expatistan.com/cost-of-living
- 45 http://www.expatistan.com/cost-of-living
- 46 http://www.smashingmagazine.com/workshops/
- 47 https://shop.smashingmagazine.com/andrew-clarke-responsive-web-design-zurich.html
- 48 https://shop.smashingmagazine.com/jeremy-keith-responsive-design-workshop-zurich.html
- 49 https://shop.smashingmagazine.com/smashing-workshop-stephen-hay-responsive-design-workflow.html
- 50 https://shop.smashingmagazine.com/vitaly-friedman-responsive-design-zurich.html