Dear Friends,
Ah you remember those sneaky mystery riddles, don't you? Those tough little quests where you have to wander from one animated GIF to another so solve the riddle? Well, we've got a new one coming up, and this one is going to be quite different (and a tiny bit more complicated). Main prize? A roundtrip to Barcelona, Spain for SmashingConf Barcelona 2015, with a workshop + conference ticket, fancy hotel accommodation and a few truly smashing goodies!
Remember, remember: the 8th of September, 2PM CET — on Smashing Magazine's front page. The first person to solve the riddle will win the main prize, but we'll have more prizes as well. Ah, you'd better get your friends and colleagues ready, too — you could use all the help you can get! So mark your calendar, and don't be late!
Happy riddling!
— Vitaly (@smashingmag)
Table of Contents
1. Simple Experiments Can Go A Long Way
Major improvements happen when enough minor enhancements play together in a new interface. Major redesigns are risky and often unpredictable, while iterative improvements can always be built on a good foundation: user research, or data. Sometimes wording on a button can make more difference than the placement and the color of the button. Interface copy matters. Icons matter. In fact, simple and quick experiments can be much more valuable than long-term discussions, and can bring results immediately.
For example, as it turns out, the most universally recognized icon for search isn't a magnifying glass, it's a wide rectangular box. Viget Labs team has tested search box variations, and they discovered that hidden input (behind a "search" icon) always increases task completion time and reduces success rate, while simpler "input field + button" variation always works better. If you hide a search box behind an icon — on narrow or on large views — it might be a good idea to rethink the design if your users tend to use the search a lot. The latter one is actually very likely. (vf)
2. Embedding Videos With A Custom Player? Easy-Peasy!
So, your task is to embed videos on a site, not from Vimeo or YouTube, but actually from your website. Now, you have to consider all the different formats that you'd need to deliver, and how to support legacy browsers, and how to deal with accessibility, and then also how to deal with the brand new requirement: a custom, branded theme for the player controls. What a nightmare!
Well, not really. MediaElement.js provides a cross-browser HTML5 video/audio player with custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API. You can also use a fully skinnable player. Another solution is Amalia.js, an extensible HTML5 player that allows you to view any type of metadata along with your video or audio streams. For more specific requirements, you can check the HTML5 Video Player Comparison by Philip Bräunlich and Gerrit van Aaken. Problem solved! (cc)
3. It's Magic! Perspective Mockups With Sketch 3
Sketch is handy and powerful, and its popularity is growing. However, there are some use cases where it just hits the wall: to create perspective mock-ups that show your app in action on a device screen, you still have to fire up Photoshop to get the job done. Well, you had to go back to Photoshop, that is. To close the gap in Sketch, James Tang created a nifty plugin that transforms Sketch into an all-round mock-up tool: Magic Mirror.
Magic Mirror lets you create perspective-transformed images from an artboard and apply it to any shape, at any angle. The plugin responds to the shape's distortion, delivering crisp and realistic perspective mock-ups without modifying the original bitmap in a destructive way. Magic Mirror is open-source and free for private use, but if you plan to use it for commercial products, please be fair and show your appreciation for James' fantastic work with a small donation. (cm)
Advertisement
4. Smart Front-End Tools For Better Productivity
There are some regular front-end tasks that come up every now and again, yet dealing with them manually every time can be quite annoying — and time-consuming, too. Want to give clients instant access to a file or folder without uploading the files anywhere? srvdir makes any directory a secure public file server with one terminal command. Got a bitmap image, but no time to redraw it in Sketch or Illustrator? px2svg quickly converts raster images to SVG, using color-run optimization.
Need to generate a complex HTML table from CSV or an Excel spreadsheet? HTML Table Generator does the job for you. And if you need to run DNS, HTTP and traceroute tests instantly, TurboByte Pulse does just that. Or what about a workspace manager for tabs in Google Chrome? Well, Spaces is pretty much like Spaces on Mac OS X, for Chrome. Handy! (vf)
5. Do You Have A 'Do Not Disturb' Mode In Your UI?
Do you turn off your Wi-Fi, ever? Have you tried to monitor how your productivity changes if you introduce a few scheduled phases of downtime into your routine? What happens if you set up your Wi-Fi router to automatically turn off after 10PM, and automatically turn on at 6AM? Weekends could be even more restrictive. And if this conflicts with your sense of getting up early in the morning and reaching for your dose of Instagram, what about a scheduled time for "Do Not Disturb" mode, instead — for phone calls, messages, Skype and pretty much anything else?
It's remarkable how much work can be done when you are uninterrupted or just stay offline – and it might be a feature, too. If you are building an app which requires multiuser interaction, what about letting users schedule a "Do Not Disturb" mode, too? Notifications can quickly get annoying, especially if there is no easy way to turn them off, so designing them thoroughly is necessary. Slack, for instance, automatically and immediately disables email notifications after installing the mobile app if push notifications are turned on. So maybe it's worth adding "DND" mode in your application, too? (vf)
6. Extra! Extra! Breaking News In Digital Times
There's a fine line between raising awareness and becoming intrusive. Imagine you have to design a "breaking news experience" for a newspaper site. How could you effectively alert users to a breaking story and keep them covered as the story evolves without marring the experience? The developers behind the Guardian's responsive website saw themselves confronted with exactly these questions. They knew that breaking news alerts were a popular feature with their app users, but how could they bring the convenience of an alert to the Guardian's website?
The process involved a lot of considerations, and is thoroughly described in an article in the Guardian's developer blog. The current solution, by the way, isn't the most prominent visually, but it compensates by staying persistently in view until a user interacts with it. The alert overlay is prominently displayed on the bottom of the screen of every page of the Guardian site. Instead of sending dozens of push notifications, Guardian is thinking on allowing users to "follow the story" and send notification if readers explicitly express interest in the story. A valuable insight into finding the right balance between intrusiveness and awareness. (cm)
Advertisement
7. 3-D Made Simple, For The Web
Would you ever have thought that your browser could host an entire 3-D development environment? Well, it can with WebGLStudio.js, an open-source project brought to life by Javi Agenjo and the GTI Graphics Group at Barcelona's Universitat Pompeu Fabra. WebGLStudio.js is a platform to create interactive 3-D scenes directly in the browser. It lets you edit scenes visually, code the behaviour of every item and edit shaders.
Features include a full 3-D graphics engine that supports multiple light sources, shadow maps, real-time reflections, custom materials and even animation, a visual editor keeping everything in place, and a graph editor to create interesting behaviors and post-production effects. The app is built on components, so if the existing pool is not enough for your needs, you can easily extend it with your own plugins. (cm)
8. Sketching In… Code Doodles!
Can you sketch in code? You definitely can, and the playground for creative experimentation is vast. Code Doodles is dedicated to doodles with code — basically a showcase of curated creative coding sketches, exploring unusual interactions and interfaces. "No loading bars, no GUI, no 5MB 3D models or audio files, just plain and simple doodles with code."
The results are unusual but always interesting, ranging from generated art to motion graphic experiments and playful interactions. Each experiment is featured, explained and credited. The project is community-based, and you can contribute, too. So, what can you come up with? (vf)
9. 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 at SmashingConf Freiburg, Germany
Upcoming Smashing Workshops and Meet-Ups:
- Copenhagen, Denmark: ColdFront Talk/RWD Workshop, Sep 2.
- Freiburg, Germany: SmashingConf RWD Workshop, Sep 14–16.
- Oslo, Norway: MakingWeb Talk/RWD Workshop, Sep 22–23.
- Helsinki, Finland, Reaktor Breakpoint Talk, Sep 24–25.
- Sydney, Australia, Web Directions Talk/RWD Workshop, Oct 28.
- Barcelona, Spain: SmashingConf RWD Workshop, Oct 20–21.
- San Francisco, USA, SmashingConf US, Apr 5–6.
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
10. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
UX Architect at Sonoma Partners (Chicago, IL)
"You'll be working with tablets (iPad and Windows) and mobile phones in addition to enterprise Web applications. Think quick and sleek. We work in both low and high fidelity design — for this position strong graphic design skills are a plus, but not a requirement."
-
UX Developer at Fresh Tilled Soil (Boston, MA)
"The UX Developer will work in a team environment in the design and execution of web and mobile products. We are looking for someone who is excited to learn and improve his or her skillset in the ever-evolving medium of the web."
-
Senior Product Designer at Elegant Themes (San Francisco, CA)
"As Senior Product Designer you will be leading our creative team, building exceptional WordPress products that strive for perfection. We are a design driven company and we hold on tightly to our design-driven values."
11. Smashing Highlights (From Archives)
-
Infinite Scrolling: Let's Get To The Bottom Of This
Human nature demands hierarchy and structures that are easy to navigate. But infinite scrolling sometimes leaves users feeling disoriented as they travel down a page that never ends.
-
Fresh High Quality Free Fonts
Every now and then we look around, select fresh high-quality free fonts and present them to you in a brief overview. We search for them and find them so that you don't have to.
-
Five Useful Interactive CSS/jQuery Techniques Deconstructed
In this article, we'll walk through five interactive techniques such as animated text effects, animated images without GIFs, more engaging drop-down menus, fancier slideshow navigation and animated icons for the hover state of buttons.
12. Recent Articles On Smashing Magazine
No comments:
Post a Comment