Dear Friends,
Responsive PDF. Yes, you've read it correctly. We spend a lot of time talking about removing all render-blocking resources from the critical rendering path, but I believe we don't spend enough time discussing how to deal with good old-fashioned PDFs. They are often heavy in file size, sometimes uncompressed, and difficult to read on a mobile screen.
If your users are on a slow connection, the chances are high that they won't even bother downloading the PDF file. But what if a user knows that the content she needs is on page 17? There is no way of accessing it before the first 16 pages have been downloaded and rendered.
What if instead of providing only a link to PDF, we generated thumbnail preview for all pages, compressed them heavily and made them available to users additionally to the PDF view? If users want to jump to page 17, they can do it via a thumbnail view. The image will not look particularly impressive, but it will load very fast and it will contain the information users need. And if they decide to download the PDF file after all, that option is always available. This is exactly what Energy Made Clear does with their interactive energy bill, and it does it very well indeed.
That's an approach that you could apply to other components as well — e.g. maps or lightboxes or iframes. We cover many similar clever techniques in the "Responsive Design Patterns" chapter in our shiny, new Smashing Book #5: "Real-Life Responsive Web Design". The first edition is almost sold out, and we are printing a second run already, so if you don't have it yet, do get it — you will not be disappointed. You can also check the first detailed book reviews.
And if you have a book already (it has reached Australia already!), please post a photo on Twitter — it'll put a smile on our faces, you know.
— Stay smashing!
Vitaly (@smashingmag)
Table of Contents
1. Smart Front-End Tricks And Techniques
Sometimes styling forms can be annoying and frustrating, and in these cases knowing a few techniques or JavaScript patches to make sure things work as intended, can be quite useful. For instance, how do you avoid annoying scrollbars for textareas? You can use Lea Verou's Stretchy, which provides form element autosizing. If the input is lengthier than expected, the input field or textarea just grows automatically — a library without any dependencies!
And sometimes dealing with tables can be tricky. Default styling of tables is quite weird and counter-intuitive, as cells occupy space arbitrarily based on the content inside. But what if you want to keep a uniform row height in your table, perhaps by using an ellipsis to cut off lengthy entries without creating noise in the table? Well, that's where table-layout: fixed applied on a table becomes handy. With it, the layout is fixed based on the first row. Set the width of those, and the rest of the table follows.
Need more CSS tricks? Well, Louis Lazaris has published two articles on little-known CSS facts, both worth reading. You might discover an unknown gem or two! (vf)
2. E-Commerce Insights From Customer Ratings
Customer ratings influence a user's buying decision tremendously. They act as a social proof for quality or a good value for money and are one of the most applied sorting direction users choose when shopping online (right after lowest price). But did you know that when it comes to sorting products by customer rating, users expect an entirely different sorting logic than the one that is currently implemented on most major e-commerce websites? As the Baymard Institute found, people prefer products that have a higher number of ratings even if competing ones scored a slightly better average. Probably a fact we should take into account when implementing a products' sorting logic.
Another interesting insight into customer ratings comes from UI/UX designer Ravi Teja. He examined three popular Indian e-commerce websites to deduce patterns in customer ratings. His key finding: ratings have a very distinct pattern or shape. People are more likely to complain than to praise (obviously), but how can we circumvent this for our own products? Build a great product, and, most importantly, don't annoy your users and don't beg them to leave a review. Ask politely and at the right time. Sounds too simple? Well, that's essentially the strategy behind the Circa News app, and with 90% 5-star ratings in 1,000 reviews it did indeed prove right. (cm)
Advertisement
3. Love Helpful Photoshop Plugins? Ditto.
You've been there: occasionally you stumble across a tool and just instantly know it's going to make your life easier. That tiny little time-saver that does just what it needs to do, quickly and precisely. Well, here are a few tools like that to boost your productivity in Photoshop on spot.
Ditto is a free Photoshop plugin to let you use variables in Photoshop for elements like colors, strings of text, font sizes, line heights, x- and y-coordinates and, perhaps most powerfully of all, visibility. Also, it's not necessary to have Ditto installed to edit the PSD file, but it might be helpful if you want to keep variables up-to-date.
GuideGuide makes dealing with guides painless; Renamy allows you to find and replace multiple layers' names easily; and Duplllicator clones layers or groups and shifts them horizontally or vertically. Not good enough? You can find even more Photoshop extensions in the article "Photoshop Extensions For Front-end Developers" by Ronalds Vilcins. Now, that's pretty helpful, isn't it? (cc)
4. Redesigning Piano Sheet Music
Whether you play a musical instrument or not, what if you run a creative experiment that aims to redesign something as established as… well, music notation? Obviously, you could attempt to design responsive sheet music with canvas and a bit of JavaScript — but what if you rethought music notation altogether?
Alex Couch decided to do just that. While traditional sheet music relies on symbols, scales and memorization, Alex's new notation uses visual cues by showing "fingers and hands" on a piano keyboard. As Alex explains, it's read from top to bottom, with each circle representing a finger placement (blue for the left hand, green for right), with the trailing colors showing how long you hold the notes. The gray lines are the black keys and the spaces between are the white keys; plus, the C keys are shaded for easier navigation.
Different? Definitely. Easier to manage? Maybe. A great design exercise that forces you out of your comfort zone. Now, what would you like to redesign next? (vf)
5. The End Of The Unconnected
The rise of smartphones not only changed our everyday habits, but also, for a lot of people without easy access to a computer, they are also the entry to the world wide web. It's estimated that by 2020, 80% of adults globally will have a smartphone; in effect, the number of people who remain offline will approach zero — a huge change with impacts on the technology industry, the internet and the broader economy.
In his presentation "Mobile is eating the world" (available as slides and video), Benedict Evans provides a broad view of this development, full of findings and statistics on current and future mobile usage, the changes that are already in progress and the ones we are about to face. A real eye-opener. You can get a bit deeper into the state of mobile in Asia by watching Stephanie Rieger's talk on The Emerging Global Web, too. Worth watching! (cm)
Advertisement
6. Nudge It Gently (Or Not) In Sketch
If you've used Fireworks in the past, the chances are high that you'd feel very comfortable with Sketch. The tool is quite adaptable owing to its flexibility and extensibility, with quite a few plugins you can use with it. In the latest Sketch 3.3 release, a new feature was introduced that adjusts the arrow and Shift + <arrow> nudge increments. That's handy, but normally you have to use a command in Terminal to adjust the increments.
Nudg.it is a free companion app for Sketch that allows you to quickly edit these settings as you go. You can define a small nudge and a big nudge — that's it. A valuable, tiny tool that actually lives up to its golden nugget icon! (cc)
7. The Tiny Designer Inside Of Us
When designers and non-designers work together on a project, two worlds collide. Discussions soon get stuck among the details, like the size of the logo or the font choice, and the bigger picture fades out of sight: a frustrating situation for designers, who feel their expertise isn't respected, and non-designers, who start to doubt the value of professional design. If you find yourself at a dead end and have lost sight of what you set out to do, think of the Tiny Designer. We all have a tiny designer inside us and, well, he could help us calm the waves.
The project was brought to life by Jarrod Drysdale. Its mission: to foster a shared understanding between designers and non-designers to improve their collaboration. To lay the foundation, Jarrod offers two free email courses — one aimed at designers, the other at non-designers. Designers will learn to guide non-designers through the design process so they'll understand what design is all about; non-designers will get to grips with the basics of design to be able to communicate their ideas more clearly. A valuable resource to understand our counterparts and colleagues a lot better, and help build better products. (cm)
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.
Upcoming Online Workshops
Full-Day Workshops, SmashingConf Freiburg, Germany
Upcoming Smashing Workshops and Meet-Ups:
But what about in-house training instead? We can improve your eCommerce checkout and conversion rates right on spot — or performance, accessibility or UX. 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)
Advertisement
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) Front-end Developer at IBM Design (Austin, TX)
At the nexus of engineering and design you will be instrumental in bringing industry-defining software products, cloud services and web applications to users around the world. You will play an integral role in building the next generation of advanced technologies in cloud, mobile, cognitive computing, big data, analytics and social software.
-
iOS Developer at Booking.com (Amsterdam, Netherlands)
We are looking for highly skilled developers to join our mobile team in the vivid city of Amsterdam. Join our international team and help us to make the best travel app in the world.
-
Web Developer at SankyNet (New York, NY)
The Web Developer is responsible for constructing online sites and applications as architected by the Technology Director. In this role the Web Developer will help to share knowledge of best practices and implementation strategies with other members of the team. The ideal candidate will have a strong appreciation for design and an understanding of how to translate this to presentational markup.
11. Recent Articles On Smashing Magazine
No comments:
Post a Comment