Tuesday, July 14, 2015

Smashing Newsletter #140: Front-End Performance and Instruction Manuals

Performance, responsive design and eye candy. Issue #140 Tuesday, July 14th 2015 181,631 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

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 size, it makes sense — with 375 Mb/day, that's just (well, "just") 178 web pages a day.

If you still use roaming when travelling, obviously 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 Turbo, Opera Mini or Tripmode. 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.

Ah, and before you get that cappuccino in a coffee shop, speed test the Wi-Fi using apps like SpeedSmart on iOS or Speedtest on Android.

— Snappy browsing!
Vitaly (@smashingmag)

Table of Contents

1. Better Interface Copywriting
2. Dealing With Multilingual Responsive Design
3. Don't Trust HTTP Cache
4. Designing Style Guides And Pattern Libraries
5. Where Are You Travelling Next?
6. Graphics Standards And Instruction Manuals
7. What's Around You Now? That's Your Design!
8. Keep Calm And Attend A Smashing Workshop!
9. Smashing Highlights (From Our Archive)
10. New On Smashing Job Board
11. Recent Articles On Smashing Magazine

1. Better Interface Copywriting

A good interface is all about great copywriting. The tone, the voice, the language all define how messages are perceived, but also how exactly they are communicated, shaping the atmosphere and experience for users. Particularly when we design interfaces for tiny screens, being precise yet delightful is crucial. No wonder that some designers go as far as starting to design their interfaces in a text editor, outlining interactions and copy in plain text first. Often, adjusting microcopy is a quick win.

Better Interface Copywriting

However, it can be difficult to find a strategic approach for writing and maintaining good copy consistently. Nicole Fenton's article on interface writing 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 well, too. And just in case your clients send their content in Microsoft Word, consider using Writage, 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.

Dealing With Multilingual Responsive Design

Tom Maslen from the BBC team has summed up the lessons they learned when building the multilingual BBC website. You won't find any obvious statements, but practical tips, from creating JSON configuration files with language attributes, to translation files for the critical UI components — as well as dealing with web fonts and bidirectional layouts. Certainly an article worth reading.

If you're looking for more general non-technical issues to keep in mind on multilingual projects, check Jane Robbins' slide deck. 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.

Don't Trust HTTP Cache

Following up on Yahoo's cache persistence study from 2007, the Facebook team has re-created and rerun the study. The result wasn't particularly good: 25.5% of all logged requests that were supposed to be coming from cache were missing the cache entirely.

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.1MB weight of an average website — 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.

Designing Style Guides And Pattern Libraries

Sönke Rohde and Jina Bolton have recently published articles on their experiences with style guides at SalesForce and beyond. SalesForce applies Theo, 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.

Robert Haritonov has recently provided an overview of living style guide tools on our very own SmashingMag; Brad Frost provides a few style guide best practices; while Chris Coyier discusses where style guides fit into the process. And just in case you have it figured out already, you can use a CSS style guide audit tool to see what elements use styles from the style guide and which styles are overriding them. Food for thought for your current or next project. (vf)

5. Where Are You Travelling Next?

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, NomadList has got your back.

Where Are You Travelling Next?

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.co, 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.

Graphics Standards And Instruction Manuals

While the New York City Transit Authority Graphics Standards Manual is an affirmation of bold typography and grid systems, the NASA Graphics Design Manual appears to be more open and less conservative. Not to mention the geometric consistency of the 1976 Montreal Olympics Graphics Manual or, expanding your area of interest, the Kodak Retina IIIc instruction manual or even more vintage camera guides, collected by Gareth Wonfor.

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.

What's Around You Now? That's Your Design!

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 projects, 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: Baubauhaus or Veerle's Inspiration Stream 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 workshops that will help you become better front-end developers and designers, today.

Keep Calm And Attend A Smashing Workshop!

Upcoming Online Workshops

Upcoming Smashing Workshops and Meet-Ups:

You can also check more workshops coming up later this year. Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — we'll find a fair price for sure. Get in touch — it's that easy!

Workshop image credits: Marc Thiele (vf)

9. Smashing Highlights (From Our Archive)

10. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • Senior Product Manager at InterNations (Munich, Germany)
    As a product manager, you share the strong belief that business success is driven by a great user experience — and that a great user experience is based on a user-centered and data-driven product development approach.

  • UX Designer at Blue State Digital (San Francisco, CA)
    You'll be part of a small team of UX designers where each member is a huge contributor to the projects they lead, as well as the team's culture and evolving design practice.

  • Front-End Engineer at GoGuardian (Los Angeles, CA)
    As a Front-End Engineer with GoGuardian, you will have the opportunity to develop responsive and elegant web applications that enhance education for millions of students and educators around the world.

11. Recent Articles On Smashing Magazine

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Catherine Clark (cc), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Owen Gregory (proofreading), Elja Friedman (tools).

unsubscribe update preferences view in your browser

No comments:

Post a Comment