Home > Others > Smashing Newsletter: Front-End Performance and Instruction Manuals

Smashing Newsletter: Front-End Performance and Instruction Manuals

July 14th, 2015 Leave a comment Go to comments
Testing Wi-Fi connections speeds with an Android app.

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.

Editorial

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!

2

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.

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

— Snappy browsing!
Vitaly (@smashingmag)

Table of Contents

  1. Better Interface Copywriting9
  2. Dealing With Multilingual Responsive Design10
  3. Don’t Trust HTTP Cache11
  4. Designing Style Guides And Pattern Libraries12
  5. Where Are You Travelling Next?13
  6. Graphics Standards And Instruction Manuals14
  7. What’s Around You Now? That’s Your Design!15
  8. Keep Calm And Attend A Smashing Workshop!16
  9. Recent Articles On Smashing Magazine17

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 screens18, being precise yet delightful is crucial. No wonder that some designers go as far as starting to design their interfaces in a text editor19, outlining interactions and copy in plain text first. Often, adjusting microcopy is a quick win20.

21

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.

Dealing With Multilingual Responsive Design25

Tom Maslen from the BBC team has summed up the lessons they learned when building the multilingual BBC website26. 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 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.

Don't Trust HTTP Cache28

Following up on Yahoo’s cache persistence study from 200729, the Facebook team has re-created and rerun the study. The result wasn’t particularly good30: 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.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.

Designing Style Guides And Pattern Libraries32

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.

Robert Haritonov has recently provided an overview of living style guide tools36 on our very own SmashingMag; Brad Frost provides a few style guide best practices37; while Chris Coyier discusses where style guides fit into the process38. And just in case you have it figured out already, you can use a CSS style guide audit tool39 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, NomadList40 has got your back.

Where Are You Travelling Next?41

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.

Graphics Standards And Instruction Manuals43

While the New York City Transit Authority Graphics Standards Manual44 is an affirmation of bold typography and grid systems, the NASA Graphics Design Manual45 appears to be more open and less conservative. Not to mention the geometric consistency of the 1976 Montreal Olympics Graphics Manual46 or, expanding your area of interest, the Kodak Retina IIIc instruction manual47 or even more vintage camera guides48, 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!49

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.

Keep Calm And Attend A Smashing Workshop!54

Upcoming Online Workshops

Upcoming Smashing Workshops and Meet-Ups:

Workshop image credits: Marc Thiele62(vf)

9. Recent Articles On Smashing Magazine

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 eBook just for you. We’d love to hear your feedback in the comments section!

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://play.google.com/store/apps/details?id=org.zwanoo.android.speedtest&hl=en
  3. 3 http://httparchive.org/interesting.php
  4. 4 http://www.opera.com/turbo
  5. 5 http://www.opera.com/mobile
  6. 6 https://www.tripmode.ch/
  7. 7 https://itunes.apple.com/us/app/speed-test-speedsmart-wifi/id366593092?mt=8
  8. 8 https://play.google.com/store/apps/details?id=org.zwanoo.android.speedtest&hl=en
  9. 9 #a1
  10. 10 #a2
  11. 11 #a3
  12. 12 #a4
  13. 13 #a5
  14. 14 #a6
  15. 15 #a7
  16. 16 #a8
  17. 17 #a9
  18. 18 http://blog.prolificinteractive.com/2015/05/28/writing-for-apple-watch/
  19. 19 https://signalvnoise.com/posts/3801-writing-first-design
  20. 20 https://blog.intercom.io/writing-an-interface/
  21. 21 http://nicolefenton.com/interface-writing/
  22. 22 http://nicolefenton.com/interface-writing/
  23. 23 https://signalvnoise.com/posts/3633-on-writing-interfaces-well
  24. 24 http://www.writage.com
  25. 25 http://responsivenews.co.uk/post/123104512468/13-tips-for-making-responsive-web-design
  26. 26 http://responsivenews.co.uk/post/123104512468/13-tips-for-making-responsive-web-design
  27. 27 http://www.slideshare.net/JaneRobbinsMBACUA/tips-for-creating-international-multilingual-websites-nova-ux-29916662
  28. 28 https://code.facebook.com/posts/964122680272229/web-performance-cache-efficiency-exercise/
  29. 29 http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
  30. 30 https://code.facebook.com/posts/964122680272229/web-performance-cache-efficiency-exercise/
  31. 31 http://httparchive.org/interesting.php
  32. 32 http://sfdc-styleguide.herokuapp.com/
  33. 33 https://medium.com/salesforce-ux/living-design-system-3ab1f2280ef7
  34. 34 https://the-pastry-box-project.net/jina-bolton/2015-march-28
  35. 35 https://github.com/salesforce-ux/theo
  36. 36 http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/
  37. 37 http://bradfrost.com/blog/post/style-guide-best-practices-presentation/
  38. 38 https://css-tricks.com/where-style-guides-fit-into-process/
  39. 39 https://github.com/straker/css-style-guide-audit
  40. 40 https://nomadlist.com/
  41. 41 https://nomadlist.com/
  42. 42 https://workfrom.co/
  43. 43 https://www.flickr.com/photos/thisisdisplay/sets/72157627467855309/
  44. 44 http://www.thestandardsmanual.com
  45. 45 https://www.flickr.com/photos/thisisdisplay/sets/72157627467855309/
  46. 46 https://www.flickr.com/photos/yearofthesheep/sets/72157627821634720
  47. 47 https://www.flickr.com/photos/mrmorodo/sets/72157640292650234
  48. 48 https://www.flickr.com/photos/mrmorodo/collections/72157628866082811/
  49. 49
  50. 50 http://www.birgitpalma.net/#/yorokobu-numbers/
  51. 51 http://www.baubauhaus.com/
  52. 52 http://veerle.duoh.com/inspiration/
  53. 53 http://www.smashingmagazine.com/smashing-workshops/
  54. 54 http://www.smashingmagazine.com/smashing-workshops/
  55. 55 https://shop.smashingmagazine.com/products/vitaly-friedman-smart-ecommerce-sept-10th
  56. 56 https://hybridconf.net/smashing
  57. 57 https://coldfrontconf.com/
  58. 58 http://smashingconf.com
  59. 59 http://www.webdirections.org/wd15/
  60. 60 http://smashingconf.com/barcelona-2015/
  61. 61 lanyrd.com/2016/smashingconf/
  62. 62 https://www.flickr.com/photos/marcthiele/17106125700/in/set-72157651806544679
  63. 63 http://www.smashingmagazine.com/2015/06/22/qualities-of-good-flux-implementations/
  64. 64 http://www.smashingmagazine.com/2015/06/23/effective-logo-design-geometry/
  65. 65 http://www.smashingmagazine.com/2015/06/25/efficient-image-resizing-with-imagemagick/
  66. 66 http://www.smashingmagazine.com/2015/06/26/rapid-front-end-prototyping-with-wordpress/
  67. 67 http://www.smashingmagazine.com/2015/06/29/design-principles-compositional-balance-symmetry-asymmetry/
  68. 68 http://www.smashingmagazine.com/2015/06/30/desktop-wallpaper-calendars-july-2015/
  69. 69 http://www.smashingmagazine.com/2015/07/02/using-heuristics-to-increase-use-of-your-product/
  70. 70 http://www.smashingmagazine.com/2015/07/03/freebie-smashicons-icon-set/
  71. 71 http://www.smashingmagazine.com/2015/07/06/hunt-for-the-webs-lost-soul/
  72. 72 http://www.smashingmagazine.com/2015/07/08/web-design-is-dead-no-it-isnt/
  73. 73 http://www.smashingmagazine.com/2015/07/08/material-design-icons-templates-tools/
  74. 74 http://www.smashingmagazine.com/2015/07/09/development-to-deployment-workflow/
  75. 75 http://www.smashingmagazine.com/2015/07/11/become-command-line-power-user-oh-my-zsh-z/

The post Smashing Newsletter: Front-End Performance and Instruction Manuals appeared first on Smashing Magazine.

Categories: Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.