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?
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
- It’s All A Matter Of Workflow10
- Free High-Quality Photos For Commercial Use11
- It’s The Small Things That Make A Difference12
- Different Types Of Weather13
- A Smarter Way To Handle Your Bookmarks14
- Prefetch, Preload And Precache15
- Subjective-C, A Study Of Innovative iOS Interfaces16
- Meet The Killer, The Dude, And More Of The Coen Cast17
- Bringing Ideas To Life18
- The Alphabet Of The Countries19
- Responsive Social Sharing Buttons20
- Make Some Noise And Watch Them Bounce21
- Wanted: 52 Designs To Save The Future!22
- Full-Day Smashing Master Classes23
1. 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.
A Matter of Workflow 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 Setup24 showcases over 440 interviews of people from various creative industries, including questions about the software and hardware they use in their design process. (vf)
2. 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.
IM Free26 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, Gratisography27, Unsplash28 and Picjumbo29 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 Search30 as well, of course. (vf)
3. 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.
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 Details32, a curated collection of the finer details of design. For some more experimental approaches to interface design Sharp and Nimble Design Lab, a small but sweet showcase of Bilal Mechairia’s unique interface animations, is definitely worth a stop. (cm)
4. Different Types Of Weather
If you’ve got a soft spot for typography, we’ve found just the perfect gem just for you! TypoWeather3533, 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!
TypoWeather3533 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)
5. 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.
Dewey37 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
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)
6. 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 beast38 — changes as well. So, instead of assuming context, it’s reasonable to work outwards from content parity39 and keep all content accessible everywhere, i.e. user interactions may change, but the content is always there.
We could also use DNS Prefetching43, HTML5 Link Prefetching44 and even pre-render pages45 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 internally46.
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)
7. 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-C47 will prove to be a valuable source to guide you through.
The website was created by Australian developer Sam Page and features studies of innovative iOS interfaces such as Facebook Paper’s tilting panner49 or Spark Camera’s recording meter50. 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)
8. 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?
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 Cast52, 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 Perez53. 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)
9. 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?
The makers behind the notebook manufactory Baron Fig asked exactly these questions. What came about is Idea Series55, 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)
10. 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?
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 Countries57. 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)
11. 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)58. This freebie provides a nice, elegant way to implement social media buttons in your responsive site.
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)
12. 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 Balls60. 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.
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)
13. 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.
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 5263! 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)
14. 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.
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:
- Mastering CSS with Lea Verou (Oxford, UK),
- Designing For Touch with Josh Clark (Oxford, UK),
- Responsive Web Design65 with Vitaly Friedman (Munich, DE),
- Interface Design Bootcamp66 with Aarron Walter (New York, US),
- Scalable CSS Architecture67 with Jonathan Snook (New York, US),
- SVG and Data Visualization68 with Brian Suda (New York, US).
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).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://livingstyleguide.org
- 3 http://alistapart.com/blog/post/getting-started-with-pattern-libraries
- 4 http://conditionerjs.com/
- 5 http://ianstormtaylor.com/media-queries-are-a-hack/
- 6 http://blog.andyhume.net/responsive-containers/
- 7 http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
- 8 http://conditionerjs.com/
- 9 https://www.smashingmagazine.com/write-for-us/
- 10 #a1
- 11 #a2
- 12 #a3
- 13 #a4
- 14 #a5
- 15 #a6
- 16 #a7
- 17 #a8
- 18 #a9
- 19 #a10
- 20 #a11
- 21 #a12
- 22 #a13
- 23 #a14
- 24 http://usesthis.com/
- 25 http://imcreator.com/free/
- 26 http://imcreator.com/free/
- 27 http://www.gratisography.com/
- 28 http://unsplash.com/
- 29 http://picjumbo.com/
- 30 https://www.google.de/search?q=landscape&tbm=isch&source=lnt&tbs=sur:fc&sa=X&ei=yfEUU-nDEorQtAa934DIDg&ved=0CEgQpwUoAg&dpr=2&biw=1181&bih=762
- 31 http://littlebigdetails.com/
- 32 http://littlebigdetails.com/
- 34 http://www.typoweather.com/#p=weather
- 36 http://deweyapp.io/
- 37 http://deweyapp.io/
- 38 http://www.cennydd.co.uk/2013/designing-with-context
- 39 http://bradfrostweb.com/blog/mobile/content-parity/
- 42 http://www.stevesouders.com/blog/2013/11/07/prebrowsing/
- 43 http://davidwalsh.name/dns-prefetching
- 44 http://davidwalsh.name/html5-prefetch
- 45 http://blogs.msdn.com/b/ie/archive/2013/12/04/getting-to-the-content-you-want-faster-in-ie11.aspx
- 46 http://www.igvita.com/2012/06/04/chrome-networking-dns-prefetch-and-tcp-preconnect/
- 47 http://subjc.com/
- 48 http://subjc.com/
- 49 http://subjc.com/facebook-paper-photo-panner
- 50 http://subjc.com/spark-camera
- 51 http://coencast.tumblr.com/
- 52 http://coencast.tumblr.com/
- 53 https://twitter.com/SkinnyShips
- 54 http://www.baronfig.com/ideaseries/
- 55 http://www.baronfig.com/ideaseries/
- 56 https://www.behance.net/gallery/Alphabet-of-the-Countries-Vol1/13571985
- 57 https://www.behance.net/gallery/Alphabet-of-the-Countries-Vol1/13571985
- 58 http://kurtnoble.com/labs/rrssb/
- 59 http://kurtnoble.com/labs/rrssb/
- 60 http://bouncyballs.org/
- 61 http://bouncyballs.org/
- 62 http://future52.com/
- 63 http://future52.com/
- 64 https://www.smashingmagazine.com/workshops/
- 65 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-munich.html
- 66 http://smashingconf.com/ny-2014/workshops/aarron-walter
- 67 http://smashingconf.com/ny-2014/workshops/jonathan-snook
- 68 http://smashingconf.com/ny-2014/workshops/brian-suda
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.