Smashing Newsletter: Issue #104

This newsletter issue was sent out to 175,466 newsletter subscribers on Tuesday, March 4th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

Building a responsive website is not that difficult, but building a fast and lightweight responsive site is usually what tends to keep designers and developers up all night. But while we are focused on building responsible, responsive websites, how much time do we really spend thinking about maintenance of those shiny, polished responsive websites that we roll out today? Obviously, living2 style guides3 can help a lot to maintain the identity and consistency of the design and code, but what if the layout has to change dramatically, or major parts of the content have to be moved across the layout?

Editorial4

Media queries are a great way of making it possible for designers and developers to introduce major changes depending on the screen size, but in their nature, they are just “if then” statements which give us a global overview of the screen dimensions alone, and as such potentially difficult to handle. If you need to add a new feature, or relocate a specific container, you might need to go through all your media queries to adjust CSS styling accordingly, and it can be time consuming. Media queries might not be a hack5, but they are limited indeed.

To achieve modular, future-proof components, we might need a bit more than that. What about components changing depending on the dimensions of the parent element instead of the screen dimensions? As long as you defined the behavior depending on the parent’s dimensions, you can reshuffle the content in any way you wish and it will adjust itself accordingly.

Andy Hume published the script for element media queries6 back in 2011, and there is an Element Query Polyfill7 by Tyson Matanich, as well. And you can go even further by using Conditioner.js8, a library that can automatically load and unload modules based on the state of its surrounding. So, if you don’t want to load a large map module if the element’s width is smaller than 200px, you can easily do that with this library.

Now, have you been running into maintenance issues with responsive websites lately? How do you organize your media queries to stay efficient and fast when it comes to major changes? And what tools do you use to make it all work? Let us know on Twitter using the hashtag #smprocess or perhaps even write an article for us9 on just that topic. And who knows, perhaps the next time you run into maintenance issues, you’ll have just the perfect starting point to tackle down the problem effectively.

— Vitaly (@smashingmag)

Table of Contents

01. It’s All A Matter Of Workflow10
02. Free High-Quality Photos For Commercial Use11
03. It’s The Small Things That Make A Difference12
04. Different Types Of Weather13
05. A Smarter Way To Handle Your Bookmarks14
06. Prefetch, Preload And Precache15
07. Subjective-C, A Study Of Innovative iOS Interfaces16
08. Meet The Killer, The Dude, And More Of The Coen Cast17
09. Bringing Ideas To Life18
10. The Alphabet Of The Countries19
11. Responsive Social Sharing Buttons20
12. Make Some Noise And Watch Them Bounce21
13. Wanted: 52 Designs To Save The Future!22
14. Full-Day Smashing Master Classes23

241. It’s All A Matter Of Workflow

We just never get a break, do we? New techniques, tools and approaches disrupt our convenient workflows, making us rethink and extend our existing toolkits every single day, and often changing the way we work entirely. Especially when it comes to responsive design, it’s always a matter of personal preference of how a new project is approached, in particular if you have to work with sparse budgets, a small team and quite demanding clients.

It's All A Matter Of Workflow25

A Matter of Workflow26 documents how designers and developers go about starting a new Web design project, and what tools, strategies and techniques they use in the process. Or if you’re more interested in the setup that people use to get stuff done, The Setup27 showcases over 440 interviews of people from various creative industries, including questions about the software and hardware they use in their design process. (vf)

282. Free High-Quality Photos For Commercial Use

Whether you’d like to build a quick prototype or need quality photos to illustrate a section on a website, you may end up spending hours until you find just the right photo. Usually, you’d turn to stock photos (oh my!) but it’s not always necessary; there are a good number of free alternatives you can use instead.

Free High-Quality Photos For Commercial Use29

IM Free30 provides a curated overview of freely available photos, all available for commercial use. All photos are thoroughly grouped and tagged, and usually released under a Creative Commons license. Overall, there are literally thousands of available items which you can use right away. And if you need even more pictures, Gratisography31, Unsplash32 and Picjumbo33 are further resources worth looking into, with a growing collection of free high-resolution pictures that you can use for commercial and private projects. Alternatively, you could use Google CC Image Search34 as well, of course. (vf)

353. It’s The Small Things That Make A Difference

“Good design is thorough down to the last detail,” industrial designer Dieter Rams once stated in his ten principles for good design. The same holds true for the Web. Nifty little UI features shape the overall feel of a site, even if they’re actually quite subtle themselves. For example, an icon of a shopping basket that changes into a trolley as soon as your shopping list contains more than 10 items, or even a fly sitting on the lowest-rated comment of the day — it’s the small things that make a difference.

It's The Small Things That Make A Difference36

If you’ve been pondering over that certain something for your own design and have been searching a good place for some inspiration, make sure to check out Little Big Details37, a curated collection of the finer details of design. For some more experimental approaches to interface design Sharp and Nimble Design Lab38, a small but sweet showcase of Bilal Mechairia’s unique interface animations, is definitely worth a stop. (cm)

394. Different Types Of Weather

If you’ve got a soft spot for typography, we’ve found just the perfect gem just for you! TypoWeather4240, a website dedicated to inform you about your city’s weather forecast in nothing but beautiful type. The typographic approach creates an easy-to-read site that is the epitome of minimalist design. The type in varying font sizes provides an explicit description of the weather conditions of any city you search for. It will also tell you everything you want to know, such as humidity percentage, minimum and maximum temperatures — you name it!

Different Types Of Weather41

TypoWeather4240 also memorizes the cities you’ve searched for in the past and orders them according to your personalized preferences to help you save time the next time you check the weather forecast. There’s even a “multiweather” feature that allows you to view or compare the forecast for different cities alongside one another. Not only will you be checking whether you need your umbrella for the day, but also which typefaces are bound to brighten up your day — guaranteed! (sh)

435. A Smarter Way To Handle Your Bookmarks

Most of us probably have a lot of bookmarks saved but don’t really have a good overview of their bookmark list. And still, we keep adding more and more to the list but never seem to be able to get back to the valuable resources. If you’ve been desperately looking for a solution to your bookmarking chaos, there’s a fantastic Chrome extension that has come to get rid of your mess, once and for all.

A Smarter Way To Handle Your Bookmarks44

Dewey45 enables you to tag, search and sort your Chrome bookmarks in a simple way. You can even add custom tags to organize your bookmarks and with keywords such as tag:, title:, url:. That way, you have several ways to dig your way through them all. With the help of the arrow or tab keys, you can navigate through them, and hit the Enter button if you’d like to launch them in an instance. Editing is easily done within the editing modal, and you can also hide top-level folders as well as turn thumbnails on and off as you wish. A page worth… bookmarking? (ml)

466. Prefetch, Preload And Precache

Humans are weird, complicated and unpredictable creatures, and because we are weird and complicated, it’s very difficult to make any future-proof assumptions about what we are (or aren’t) going to do. Quite often we tend to think in terms of “average” users and “average” scenarios, but users change, scenarios change, circumstances change and context — that fuzzy, ephermal beast47 — changes as well. So, instead of assuming context, it’s reasonable to work outwards from content parity48 and keep all content accessible everywhere, i.e. user interactions may change, but the content is always there.

Prefetch, Preload And Precache49

But does this actually mean that we should never trust our own instincts to make decisions based on what we feel the user would or wouldn’t do? Well, perhaps not, just as long as we are thorough and add to the experience and not subtract from it. What if we analyze the position and movements of the mouse pointer and try to make predictions about where the user might be heading next and prefetch resources required for that specific action — something that Alex Sexton discussed in his article Deploying JavaScript Applications50, and something that Steve Souders calls Prebrowsing51?

We could also use DNS Prefetching52, HTML5 Link Prefetching53 and even pre-render pages54 to make the experience faster and smoother. So if we know that the user is close to reaching the end of the first article page soon, it might be a good idea to start loading the second page already. Or, if you link to external host names (like Amazon S3 or Google APIs), you could resolve the DNS of those servers early on. That’s also the mechanism that Chrome uses internally55.

The downside? Extra bandwidth on the user side, of course. But when used carefully, it might be a good way of hiding the cost of the networking latency, especially on mobile. And from the server perspective, you might want to configure your server to ignore requests with the preload header if they are above a certain threshold. The techniques are supported in Chrome, Firefox 3.5+, Safari 5+, Opera and IE 9+ (called “Pre-resolution”).

Next time somebody starts a sentence with, “The user is not going to do…”, it might be a good idea to ask them for an actual proof — for data other than a “reasonable” assumption. Our views are often biased, subjective and unfounded, but perhaps just enough to make just the right assumptions after all. And that’s another trade-off we have to deal with when crafting fast, smooth, responsible and fine websites. (vf)

567. Subjective-C, A Study Of Innovative iOS Interfaces

Apple’s iOS is maintaining its well-known huge market share and iOS developers are desperately sought after as ever before. If you’re planning on pursuing a mobile developer carrier, expanding your existing skill set, or simply wanting to keep up to date, Subjective-C57 will prove to be a valuable source to guide you through.

Subjective-C, A Study Of Innovative iOS Interfaces58

The website was created by Australian developer Sam Page and features studies of innovative iOS interfaces such as Facebook Paper’s tilting panner59 or Spark Camera’s recording meter60. Every study contains background information, an analysis and an explanation on how the bits and pieces have been done. Additionally, you can head on over to GitHub and download the matching files right away! (ml)

618. Meet The Killer, The Dude, And More Of The Coen Cast

“Just tell me… how dangerous is he really?” How dangerous is Anton Chigurh (compared to the bubonic plague)? If you’ve watched No Country For Old Men, then you already know how dangerous Anton is. He is more than just the ultimate badass. He is an unstoppable and ruthless hitman who kills almost everyone he meets. With all of that said, are you ready to meet Anton?

Meet The Killer, The Dude, And More Of The Coen Cast62

There’s actually a place where you can meet Anton Chigurh, and yet stay safe. Find the courage, take a deep breath and face the famous killer at Coen Cast63, a stunning tumblr gallery that portrays the illustrations of some of the most impressive characters from the films directed by Joel and Ethan Coen. The fantastic illustrations were all designed by Richard Perez64. By the way, with Jeffrey “The Dude” Lebowski placed right next to Anton, it makes it much more bearable to face Anton… just sayin’! (ea)

659. Bringing Ideas To Life

We are thinkers, creators, tinkerers. People who bring ideas to life. And to do so, we all have our unique processes. But what about other creative folks? What is particular for their creative process? How do they generate ideas and what inspires them?

Bringing Ideas To Life66

The makers behind the notebook manufactory Baron Fig asked exactly these questions. What came about is Idea Series67, a set of seven short videos in which designers, developers, illustrators and other creative folks share a particular aspect of their process. One process requires structure, the other one requires observation, one thinker gets inspired by the atmosphere around him, the other through collaboration. Leaves us all inspired and with the question on what is most essential for our work… Definitely worth watching! (cm)

6810. The Alphabet Of The Countries

What do you associate with Australia? The outback? Kangaroos? Surfing? Or maybe deadly spiders? And what do you think of when you think of Belgium? Chocolate, French fries and beer? Whatever feelings or things come up, would you be able to represent your notion in the name of a country?

The Alphabet Of The Countries69

Simply spoken, try to express your feelings about Australia in the way of how you’d write down the name Australia. Yes, you guessed it right… We came across someone who actually did just that, and more. Meet Pavel Zertsikel and his handlettered Alphabet of the Countries70. So far, Pavel has expressed his feelings in handletters about 8 countries, from A to H. If your country isn’t among them, you just need some patience. There are many more to come! (ea)

7111. Responsive Social Sharing Buttons

You may love or hate them, but since a better alternative is not yet on the horizon, sharing buttons are here to stay for quite a while. Fortunately, they can actually be handled quite easily by using a quite helpful and flexible Sass snippet by KNI Labs, i.e. RRSSB (Ridiculously Responsive Social Sharing Buttons)72. This freebie provides a nice, elegant way to implement social media buttons in your responsive site.

Responsive Social Sharing Buttons73

You don’t have to create buttons of several shapes and sizes anymore (e.g. to use in different contexts) — RRSSB can take care of it instead. Simply add and remove icons and the their size will adjust accordingly to fill up the available horizontal space. This will prevent ugly line-breaks and manual breakpoint adjustment. Furthermore, it uses SVG to allow for a tiny file size and Retina support, too. (ml)

7412. Make Some Noise And Watch Them Bounce

Need some diversion to detangle your thoughts? Well, then we’ve got something for you, but be warned, it could steal more of your time as you originally had to spare: Bouncy Balls75. Created by Web designer Paul Neave, Bouncy Balls uses your computer’s microphone to detect noise. The more noise in the room, the higher and wilder a myriad of rainbow colored balls will bounce in your browser window. Easy concept, yet incredibly fascinating.

Make Some Noise And Watch Them Bounce76

For some more variation, you can replace the little balls with emojis, bubbles, or eyeballs (which we definitely recommend trying out because of their cool 3-D look). A really well-crafted animation with a fun twist. So what are you waiting for, make some noise and watch them bounce! (cm)

7713. Wanted: 52 Designs To Save The Future!

To all the designers and illustrators out there: your chance has come to become heroes! Earth in the year 2297 is seeking your help and things don’t look too bright. Some clumsy douchebag caused an apocalypse and now everybody is fighting for survival. In order to save humanity, well-designed technology is needed.

Wanted: 52 Designs To Save The Future!78

Having discovered time travel, our friends from the future are seeking our help from our era! Attractive concepts for hoverboards, robots, starships, wearables and energy weapons are badly needed, and you have exactly 52 weeks to submit your concepts to Future 5279! Unfortunately, time travel regulatory measures will come into force after that time period, and make it impossible to transmit designs. Create a concept before it’s too late… Save the future! (ea)

8014. Full-Day Smashing Master Classes

There are so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, so what do you really need to know in order to keep your workflow fast, smart and efficient? That’s exactly what our Front-End & RWD master classes are all about: full-day workshops that will help you become a better front-end warrior, today.

Full-Day Smashing Master Classes81

In fact, we’ve got a couple of practical, hands-on workshops coming up in different locations very soon. Here’s a brief overview of some:

Also, if you’d like us to run an in-house workshop at your office, just 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: Cosima Mielke (cm), Shavaughn Haack (sh), Melanie Lang (ml), Esther Arends (ea), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

The Smashing Newsletter Team 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. 1

    Another great newsletter, I look forward to every one of these.
    TypoWeather is great, but interestingly, on my phone it shows Heavy Intensity Rain for Thursday, while on the desktop the most it goes up to is moderate rain.

    0
  2. 2

    This is one of the very extensively described informative newsletter by SMag.
    focusing on #6

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top