Some books deserve a spot at your desk. The brand new Hardboiled Web Design by Andrew Clarke is one of them. In its 5th anniversary edition, Andy explains how you can use HTML/CSS efficiently in responsive design — and how to reduce wasted time in the process with developers, designers and clients. No fluff, no theory — just insights into his own experiences with clients such as ISO and WWF.
If you get a printed copy (free worldwide shipping), you’ll get the eBook for free — available in PDF, ePUB, Amazon Kindle. All printed copies will ship from Dec 8th. Softcover, 441 pages. Jump to the table of contents. Proudly published by yours truly Smashing Magazine.
So you know what’s going on in front-end. You’ve been working with pattern libraries and atomic design and Gulp and SMCSS and BEM and HTTP/2 and Flexbox and SVG. What you might not know though is what pitfalls and traps other web designers have encountered in practice — to prevent issues creeping out down the road.
We love organizing events that deliver value and leave a long-lasting impression. SmashingConf Oxford is taking place again next year, on March 15–16th 2016. The conference will be packed with smart real-life solutions and techniques, ranging from front end to design to UX — and a few delightful surprises along the way. Two days, one track, 14 brilliant speakers and 350 fantastic attendees. Tickets are now on sale.
Discussions about design trends and visual style are often very subjective and they rarely provide actionable, valuable takeaways. Nothing beats a conversation about what worked and what didn’t work in actual real-life projects and what decisions were made along the way. That’s exactly what we’re setting off to explore in Oxford — accompanied by a lot of learning and networking in the beautiful pathways and gardens of legendary Oxford.
Exactly 9 years ago we published the very first article on this very website. Many things changed since then, but one thing remained the same: our obsession for publishing valuable, practical quality content. We proudly stand behind our work — the books, the eBooks, the conferences; our craft is ours, but our work serves the community and belongs to everybody.
As a team, we are happy and privileged to do what we truly love, and we know that this wouldn’t be possible without your kind and generous support. So thanks for sticking around. Now, a birthday calls for a birthday party, so we’ve prepared a little something for you to celebrate the day: a free chapter on responsive design patterns (PDF), a Mystery Riddle, a new free eBook and a birthday special: if you grab the hardcover of the Smashing Book 5 today, you’ll get five Smashing eBooks as a gift for your kind support.
Ah, these mysteryriddlesnever stop, do they? To celebrate our ninth birthday, we’ve prepared yet another riddle, and this time it will require a bit more teamwork. We’ve hidden secret keys in different (physical) locations across the world. To move from one level to another, you’ll have to find a hidden print-out in all (four) locations. Watch out for GIF file names.
To find the key password, you have to follow the clues and hints in a series of animated GIFs. Once put together, the keys will add up to a secret Twitter hashtag. Below you’ll find the first animated GIF that contains a location clue. Identify the location, go there (yourself, or ask a friend, colleague or a total stranger) and find a hidden print-out.
Relaunching a large-scale website is always quite an undertaking, especially if the task involves a huge political entity with content accumulated over a dozen years. In this article, we look behind the scenes of the responsive redesign of Kremlin.ru, Russia’s most prominent government website.
We had an opportunity to talk with Artyom Geller, one of the creative minds responsible for the design and UX of the project. We talked about the design process, the challenges and constraints, creative front-end solutions, as well as unusual budgets and stakeholders. —Ed.
The waiting is over. Smashing Book #5 is here, it’s smashing, and it’s shipping worldwide — in fact, all pre-orders have just been dispatched. Think of it as a reliable playbook to master all the tricky hurdles of responsive design, well-tested in real-life projects by respected designers and developers. Ah, sure, you can get the book right away.
Now, a standalone release post would be boring and predictable, so how about bringing another perspective to the magazine instead? Below you’ll find some insights about the writing process by one of the authors of the book, Sara Soueidan, who has contributed an 80-page long compendium of useful techniques, tricks and strategies for dealing with SVG. — Ed.
We love experiments, and trying things out. So what if we published our lovely Smashing Email Newsletter1, with thoroughly collected, written and edited little articles on useful tips’n’bits for web designers, in the magazine as well? This newsletter issue was sent out to 181,631 newsletter subscribers on Tuesday, July 14th. Perhaps you’ll find something useful in there, too. We’d love to see your feedback in the comments. — Ed.
How much data do you actually use per day? What if you go to a remote city, just to discover a few entangled data plans on site — unless you want to stay off the grid? What if you do have to work full day and you can’t rely on a “good enough” Wi-Fi in a coffee house? Also, how do you make sense of the plans if sometimes you are expected to pay a setup price, or pay per 100 Mb, or weekly, or monthly, or perhaps even with a long-lasting contract. Oh nightmare!
As I keep observing my data plan squandering from one month to another, I’ve noticed that even without downloading videos or syncing Dropbox or streaming Spotify (using it in offline mode), I ended up spending around 375 Mb of data per full working day — basically just reading many articles, visiting many websites, and receiving many emails — with an occasional dash of Facebook, Tweetdeck, Instagram and Skype attachments.
Extrapolated for an entire month, it makes up for 8–10 Gb of data per month (if you count weekend for occasional browsing as well). Considering that an average web page is 2.1 MB in size3, it makes sense — with 375 Mb/day, that’s just (well, “just”) 178 web pages a day.
If you still use roaming when travelling, consider purchasing a local SIM-card instead; depending on your work, you might need to sync larger files, so accounting for 375 Mb per working day might make sense — and that without heavy downloads. To save bandwidth, use Opera Turbo4, Opera Mini5 or Tripmode6. In light of this, a 3GB plan doesn’t seem like much any more, yet depending on the country of interest it might be ridiculously expensive — unless you find a savvy café or an open space, that is.
However, it can be difficult to find a strategic approach for writing and maintaining good copy consistently. Nicole Fenton’s article on interface writing22 looks into the fine detail that make up interface copy, and offers a few guidelines and examples of how to get it right. Not enough tips for you? Jonas Downey from 37signals has an article on writing interfaces well23, too. And just in case your clients send their content in Microsoft Word, consider using Writage24, a Markdown plugin for Microsoft Word that converts Word documents into reasonable Markdown plain text. (vf)
2. Dealing With Multilingual Responsive Design
One codebase of one responsive website, shared across dozens of international versions of the website, supporting dozens of different languages. If it doesn’t sound like a complex undertaking to you, it probably should. Creating a scalable design system across viewports and browsers is one thing, but when it comes to languages, web fonts and layouts can easily become a headache.
If you’re looking for more general non-technical issues to keep in mind on multilingual projects, check Jane Robbins’ slide deck27. Now, if a multilingual project comes your way, you’ll be prepared. (vf)
3. Don’t Trust HTTP Cache
When we talk about performance, we tend to talk about the first visit and subsequent visits. The first visit is always expensive because so many assets have to be requested and downloaded; also, the render tree has to be constructed from scratch — not to mention images and web fonts. Subsequent visits shouldn’t be that bad: after all, most of the site’s assets are in HTTP cache at this point. Well, they should be. As it turns out, that’s not really the case most of the time.
Caches don’t stay populated for very long; according to Facebook, on desktop there’s only a 42% chance that any request will have a cache that is, at most, 47 hours old. It’s not surprising when you remember the 2.1 MB weight of an average website31 — keeping caches for a long time just isn’t viable for most devices. If you rely on cache too much, it might be worth reconsidering; in most cases users will have a first-visit experience, so we’d better make it damn fast. (vf)
4. Designing Style Guides And Pattern Libraries
We’re all still trying to figure it out, aren’t we? When crafting responsive websites, how do style guides and pattern libraries fit into the workflow? Are they tools we use when we start off with interface inventories or atomic components? Or are they deliverables, a by-product of what we are building anyway? Well, everybody finds an answer for themselves, but there are a few interesting conversations happening among people like us.
Sönke Rohde and Jina Bolton have recently published33articles34 on their experiences with style guides at SalesForce and beyond. SalesForce applies Theo35, which uses a set of JSON files which contain name/value pairs describing their design properties, and then translates this raw JSON data into a platform-specific format for the style guide.
If you spend a lot of time working remotely, or have to travel to a distant place to work on site for a while, wouldn’t it be useful to know a few general rules of thumb about the remote location so you have the right expectations? Even better if you can actually select the location where you can focus on your work for the next project. Well, NomadList40 has got your back.
Drawing on the expertise of a growing community of creatives travelling and working remotely, the project aims to provide a comprehensive overview of the best cities to live and work remotely. It ranks destinations based on the cost of living, the climate, average connection speed, clean air, safety and friendliness — taking into account whether a destination is female-friendly as well.
Once you select a destination, you can preview the expected costs for a cappuccino or beer, connect with community members staying there, ask questions in a forum or online chat, and check options for working spaces and accommodation. Apparently, if you search for a safe, friendly destination with “super fast” Wi-Fi, warm temperature and clean air, Chattanooga in the US, Timisoara in Romania, and Braga in Portugal are your best options.
Alternatively, be sure to check WorkFrom.co42, an overview of the best coffee shops and co-working spaces to work from while you roam — recommended by people who have actually worked there. Handy? Handy! So, where you are travelling to next now? (vf)
6. Graphics Standards And Instruction Manuals
There is always something alluring about graphics standards manuals — frankly, surprisingly boring documents which describe a design system and provide guidelines on how it should be used in different contexts. Exploring those manuals can be a discovery in itself, especially if you spend a lot of time studying both the design of the manual — the table of contents or the layout — and the building blocks of the system with the connections between these parts.
If you have time over the weekend, why not visit your local library and search for old technical books like these? The experience alone will be worth it. (vf)
7. What’s Around You Now? That’s Your Design!
We all have that one cool friend whose walls are covered with obscure, beautifully designed posters that we wish we had found to hang at home. Yet we tend to see these posters from distance — as something “artsy” that we can’t necessarily apply to our work right away. But perhaps we can. To explore the creative edge, we could think about ways to use pretty much anything around us — a carpet, a bouquet of flowers, an iron shape — to the aesthetic of our next project, to make it really unique and unusual.
We could look into older books or magazines or leaflets or instructions manuals; or we could explore that one artist whose work you really love, and meticulously study the details and ideas of their artworks. Perhaps Birgit Palma’s projects50, such as designing glyphs using stairs as a metaphor of our path in life. Curated collections aren’t particularly loved but they be inspirational, too: Baubauhaus51 or Veerle’s Inspiration Stream52 are a few thoroughly curated streams of illustration, photography, fashion and all else art-related. What’s around you right now? Perhaps that could Look around you, outside or inside the screen. That could be just the inspiration you are seeking, if you think about it creatively. (cc)
8. Keep Calm And Attend A Smashing Workshop!
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 and RWD workshops53 that will help you become better front-end developers and designers, today.
The authors of this newsletter are: Catherine Clark (cc), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Owen Gregory (proofreading), Elja Friedman (tools).
About The Newsletter
We love useful stuff, and we love quality writing, that’s why we send out an editorial email newsletter twice a month with useful tips, tricks and resources for designers and developers — thoroughly collected, written and edited by us exclusively for our readers. Once subscribed, you’ll receive a small token of appreciation — a free eBookjust for you. We’d love to hear your feedback in the comments section!
Every now and then we see discussions proclaiming a profound change in the way we design and build websites. Be it progressive enhancement1, the role of CSS2 or, most recently, web design itself being dead3. All these articles raise valid points, but I’d argue that they often lack objectivity and balance, preferring one side of the argument over another one.
These discussions are great for testing the boundaries of what we think is (or is not) possible, and they challenge how we approach our craft, but they don’t help us as a community to evolve together. They divide us into groups and sometimes even isolate us in small camps. Chris Coyier has published a fantastic post4 recently covering the debate on the role of CSS in light of growing popularity of React.js, extensively and objectively. That’s the quality discussions we need, and that’s what keeps us evolving as a growing and maturing community.
Web technologies are fantastic — we all agree on this. Our tools, libraries, techniques and methodologies are quite fantastic, too. Sometimes they are very different and even contradictory, but they are created with the best intentions in mind, and often serve their purpose well in the specific situations they were designed for. Sometimes they contain mistakes, but we can fix them due to the nature of open source. We can submit a patch or point out solutions. It’s more difficult, but it’s much more effective.
There are a lot of unknowns to design and build for, but if we embrace unpredictability5 and if we pick a strategy to create more cohesive, consistent design systems6, we can tackle any level of complexity — in fact, we do it every single day. We solve complex problems by seeking solutions, and as we do, we make hundreds of decisions along the way. Yet sometimes we fall into the trap of choosing a solution based on our subjective preferences, not objective reasoning.
We tend to put things into buckets, and we tend to think in absolutes. Pro carousels or anti carousels; pro React.js or anti-React.js; for progressive enhancement or against it. But the web isn’t black and white — it’s diverse, versatile, tangled, and it requires pragmatism. We are forced to find reasonable compromises within given constraints, coming from both business and UX perspectives.
Tools aren’t good or evil; they just either fit a context or they don’t. Carousels can have their place when providing enough context to engage users (as Amazon does). React.js modules can be lazy-loaded for better performance, and progressive enhancement is foundational for making responsive websites really8, really9 fast. And even if you have extremely heavy, rich imagery, more weight doesn’t have to mean more wait10; it’s a matter of setting the right priorities, or loading priorities, to be precise.
No, web design isn’t dead. Generic solutions are dead.11 Soulless theming and quick skinning are dead. Our solutions have to be better and smarter. Fewer templates, frameworks and trends, and more storytelling, personality and character. Users crave good stories and good photography; they’re eager for good visuals and interesting layouts; they can’t wait for distinctive and remarkably delightful user experiences. This exactly should be our strategy to create websites that stand out.
There are far too many badly designed experiences out there, and there is so much work for us to do. No wonder that we are so busy with our ongoing and upcoming projects. Proclaiming our craft to be dead is counter-productive, because we’ve shown ourselves and everybody out there what we are capable of. The last fifteen years of web design were nothing if not outstanding in innovation and experimentation. And it’s not about to stop; that’s just not who we are.
If we can’t produce anything but generic work, other creatives will. The web will get better and it’s our job to make it better. It won’t be easy, but if we don’t adapt our practices and techniques, we’ll have to give way to people who can get it done better than we can — but web design itself isn’t going anywhere any time soon.
It’s up to us to decide whether we keep separating ourselves into small camps, or build the web together, seeking pragmatic solutions that work well within given contexts. We might not end up with a perfect solution every time, but we’ll have a great solution still; and more often than not it’ll be much, much better than the solution our client came to us for in the first place.
Well, almost anything. We can’t guarantee space shuttle journeys or going back in time, but we will put on a truly intimate, valuable and memorable event. Taking place on October 20–21, SmashingConf Barcelona1 will be packed with smart solutions ranging from front-end to design to UX — and a few delightful surprises along the way. To the tickets.2
We strongly believe that trends don’t matter, but techniques do. With SmashingConf Barcelona, we keep exploring interesting problems, smart solutions and lessons learned from actual projects. We highlight what has worked and what has failed — and why — so you know what to do next time you encounter similar problems. That’s what makes up the spirit of our conferences, and we take pride in it.
5 This year, the SmashingConf flags will be blowing in the breeze from the Palau de la Música Catalana — an architectural jewel of Catalan Modernism. (Large view6. Image credit: Pug Girl7).
It’s not just about techniques, though. We will also explore how designers and developers work, design and build, how they approach problems strategically and what workflows they use to find solutions. You’ll learn what warning signs and common stumbling blocks to watch out for, how to deal with them, and how to prevent them from happening. Think of it as a little playbook with handy rules of thumb: it doesn’t get more practical than this.
We also want to hear your stories and your experiences. That’s why we also invite you to speak at the meet-up before the event. Taking place on October 20–21, it’s an event that might keep you on your toes for quite some time. Seriously.
We’ve invited speakers passionate about their work and who’ve learned a thing or two from their own experiences. We’re happy to welcome the first confirmed speakers:
8 The first confirmed speakers: Anna Debenham and Chris Coyier.
We’ll also host hands-on full-day workshops23 with practical techniques and strategies taught by practitioners in the industry. So if you are going to attend the conference, why not attend a workshop as well? In fact, if you book a workshop too, you’ll save $100 off the conference + workshop ticket price.
24 If you’ve always wanted to visit Barcelona, or just happen to live around the corner (well, more or less), this is just the opportunity you’ve been waiting for. Image credit: Pixabay25. Grab your ticket.26
Why This Conference Could Be For You
The conference could be for you just because it’s very practical. You’ll learn many valuable techniques for your workflow, and you’ll meet fantastic, like-minded people from the industry. You’ll learn:
Strategies for building fast responsive websites,
Clever psychological techniques for smarter interfaces,
Techniques and guidelines for better mobile UX,
Gotchas and rules of thumb when using SVG and Flexbox,
How to optimize for performance and content delivery,
Techniques for better lettering and interaction design,
Mistakes and lessons learned from real-life projects,
Responsive design patterns for future-ready websites,
Avoid generic solutions with designs that exhibit soul and personality.
Download “Convince Your Boss” PDF
We also prepared a neat Convince Your Boss (PDF)27 (0.15 Mb) that you can use to convince your boss, colleagues, friends, neighbors and total strangers to join you or send you to the event. We know that you will not be disappointed. Still not good enough? Well, tweet us @smashingconf — we can be quite convincing, too!
28 “Eight reasons why you should send your incredibly hard-working, deserving employee to the SmashingConf” (PDF29). Quite self-explanatory, really.
We also welcome sponsors to help us create a truly unique, unforgettable conference experience. And you can be a major part of it. We have quite a number of attractive and creative sponsorship options (PDF)30 for you, and we’d love to adjust them to your needs. So if you’re interested, please contact us via email@example.com — we’d love for you to be involved!
See You In Barcelona!
We are looking forward to seeing you in Barcelona, and who knows, perhaps months after the conference is over, you’ll look back at your workflow, at your projects and at this very article realizing that it wasn’t far off after all. After all, it’s a conference where anything can happen, right? See you there!
No, Mahna Mahna32 has nothing to do with Mañana33 or the SmashingConf, but it might help you guess what to expect in Barcelona once you are there.