вторник, 30 апреля 2013 г.

Smashing Newsletter #83: Galaxies, Chairs and Free Fonts

The email is not displayed properly? View the online version.

The Smashing Email Newsletter

Issue #83 | Tuesday, April 30th 2013 | 141,533 subscribers | Previous issues

Dear Friends,

You know how it feels when somebody makes you do stuff that you don't really want to do. Well, the same thing happens in the browser when your patient visitors realize that clicking on a harmless link has just prompted their browser to download a 50 MB PDF file on their limited and shaky EDGE connection. Of course, what we as designers should do in these situations is to indicate that the link is a PDF download and provide instructions on how users can download the file if they want to — "Right click and save as," that is. But is it really an optimal solution? Can we do better than this?

Right click and save as

Yes, Jonathan Svärdén has a better solution. We can use the HTML5 download attribute to make it clear to the browser that the file shouldn't be displayed, but should instead only be downloaded:

<a href="9fd-f32ff322.pdf" download="snell-invoice-may13">Download file</a>

In fact, if you're serving up a dynamically generated file with a randomly generated filenames like 9fd-f32ff322.pdf, the markup will tell the browser to name the file appropriately, i.e. snell-invoice-may13.pdf.

The support for the download attribute is still quite limited — with Chrome and Firefox 20+ supporting it, and Jonathan provides a couple of fixes and workarounds for this. However, since the feature is an add-on for capable browsers and doesn't have any drawbacks, we can and should start using it right away. Your users might really appreciate it!

— Vitaly

Table of Contents

01. Learn How Things Might Work
02. With The Warp Speed Through Space: CSS3 Galaxy
03. The Stars Among The Chairs
04. Aleo: Sleek Free Font With Personality
05. The Grid Bookmarklet For Vertical Rhythm
06. The Perfect Shade Of Color
07. Going Back In Time: With Retro Vector Goodies
08. It Takes Only Five Words
09. Smashing Highlights (From Archives)
10. New on Smashing Job Board
11. Recent Articles On Smashing Magazine


1. Learn How Things Might Work

Have you ever wondered how the devices that you use every day work? Such as your everyday companion, your mobile phone, the coffee cup that provides you with the fresh goodness of caffeine throughout the day or the toaster that delivers your favorite breakfast foundation in the morning? Jing Zhang has put together some nice Imaginary Factory infographics that explain how things might be made, with some interesting insights into your everyday products.

Learn How Things Might Work

A similar idea came to Matt Stephens, who has a passion for both type and automotive manuals. Stephens took apart the pieces of his favorite typefaces and displayed them like furniture in a construction manual. They even include drill holes and screws. See how your favorite letter would be constructed in the Exploded Alphabet and what material it would be made of. (ml)


2. With The Warp Speed Through Space: CSS3 Galaxy

You know the drill: when it comes to CSS3, there is some really good practical stuff out there, as well as some pretty nifty eye-candy demos which are hardly useful in practice at all. Still, sometimes these demos challenge what we can do with CSS today, and by pushing the boundaries they prompt us to take a different perspective on what we usually do with our humble stylesheets.

With The Warp Speed Through Space: CSS3 Galaxy

Noah Blon has put together a Hyperspace CSS3 demo, an infinite exploration of space, implemented using a background image, a couple of transforms, perspective origins and animations. The visual effect is astonishing, and works pretty well with CSS gradients as well. Now, this must have taken quite some time and experimentation. If you're looking for more CSS experiments, make sure to check Blon's other demos as well. Now, what about your next experiment in CSS? (vf)


3. The Stars Among The Chairs

Doesn't every designer's home or workplace need at least one special piece of furniture? Even if you are not a designer — fine furniture makes fine people… So, how about a new chair? Need some inspiration? Iconic Furniture lets you look at some of the most iconic furniture pieces of the past century. Imagine having some of these at home or in the office! Wouldn't it be fancy to offer your client a seat in the coconut chair?

The Stars Among The Chairs

The coconut chair got its name from its distinctive shape resembling a coconut cut into eight pieces. It was designed by George Nelson and George Mulhauser — two of the most important designers of the last century.

Iconic Furniture is worth a visit, but not only for the pieces it showcases. The elegant way in which the website lets you scroll from one chair to the next makes this guide a beautiful masterpiece in itself. (ea)


4. Aleo: Sleek Free Font With Personality

Alessio Laio has designed a wonderful and versatile free font: Aleo Font Family. This contemporary typeface comes with a sleek overall look, giving it an unobtrusive yet strong personality. It's distinguished by its semi-rounded details. Does Aleo look familiar to you? Could be. It was designed as the slab serif partner to Łukasz Dziedzic's Lato font (which is freely available as well). Aleo comes in three weights (light, regular and bold), each accompanied by corresponding true italics. Ligatures ensure an improved reading flow and diacritics support multi-language use.

Aleo: Sleek Free Font With Personality

As Aleo is released unter the SIL Open Font License, it is free for both personal and commercial use. If you want to show your appreciation for this well-crafted typeface, you can make a donation to the designer. So, do you already have in mind what you could use Aleo for? (cm)


Advertisement
Ad


5. The Grid Bookmarklet For Vertical Rhythm

If you tend to develop your websites in the browser, it's often handy to have a grid overlay that can inform your design decisions as you iterate your designs. And in fact, there are quite a few tools out there, but only a few of them allow you to adjust vertical spacing and offset on the fly, as you code.

The Grid Bookmarklet For Vertical Rhythm

Gridwax is a browser bookmarklet that you can drag into your bookmarks toolbar and activate to overlay the current page. To adjust vertical spacing, just press Shift + DownArrow/UpArrow, and for the offset Shift + LeftArrow/RightArrow. Easy. Another helpful tool to make the design process in the browser just a tiny bit easier! (vf)

6. The Perfect Shade Of Color

You found almost the perfect hex color value for your design, but you want the shade to be a tad lighter or darker? So what do you usually do? Probably open Photoshop and start dragging the color picker until you have found your desired tone. Web designer and developer Dennis Leblanc has created a much more convenient way to do this: HexColorTool.

The Perfect Shade Of Color

All you have to do is enter the six-digit hex value of your color and choose whether the tool should find lighter or darker hues of it. HexColorTool lets you select a percentage range between 0 and 20%. And the best thing: you don't have to install anything, as you can access the tool from any browser. It is even responsive. Alternatively you can use the good old Color Blender by Eric Meyer. Time to improve your workflow! (cm)


7. Going Back In Time: With Retro Vector Goodies

Remember the '80s, when commercials were crazy and cell phones gigantic? People spent their Saturday afternoons in the arcade or in front of their home gaming systems. The '80s were like living in the future, and so were the designs of the time. If you're into graphic design elements from this or other past eras, you must check out Retro Vectors, a great source of vintage vector goodies from the good ol' times — 1880s to the 1980s.

Going Back In Time: With Retro Vector Goodies

Besides futuristic gaming and computer design, you'll find Gothic-style ornaments from the Victorian era, as well as small ad clipart from the '50s and '60s — the golden age of advertising. Original materials that have fallen out of copyright have been scanned at the highest resolution possible. The content includes graphics from 100-year-old newspapers and other printed materials such as shop catalogs, calling cards and posters. All files are free to use for commercial or personal work. (ea)


8. It Takes Only Five Words

Every once in a while we need some words of motivation to keep us going, to lift our mood or simply to provide us with some inspiration. Often it takes just a little quote to put a smile on our faces. On their website Five Words, Australian design duo Skye Dwyer and Melissa Lee provide a new inspiring message every day, each one nicely packed into a unique typographic work of art. What's special about the more than 700 designs is that they all consist of exactly five words — no more no less.

It Takes Only Five Words

Clicking through the pages feels like sitting in front of a pile of fortune cookies, slowly cracking one at a time, always wondering what comes next. A wonderful place to forget time. For typography aficionados and word lovers alike. (cm)


9. Smashing Highlights (From Archives)

  • Useful Typography Tips For Adobe Illustrator
    Typography is not only an all-important aspect of design, it is also an art form in and of itself. Choosing the right font, the perfect spacing and even the correct shape of text can be an important factor as to whether a project fails or succeeds.

  • Five Useful Interactive CSS/jQuery Techniques Deconstructed
    With the wide variety of CSS3 and JavaScript techniques available today, it's easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience. In this article, we'll walk through five interactive techniques that you can start using right now.

  • Elements Of A Viral Launch Page
    In this article, we'll outline some best practices and examples of successful viral launch pages. Let's define a viral launch page not only as a "Coming soon" landing page, but also as a usable beta page or even in some cases a finished product page.


10. New on Smashing Job Board

Here are the job openings published recently at our very own Smashing Job Board:

  • Front End Web Developer/Designer at Sifteo, Inc. (San Francisco, CA)
    Sifteo, a venture-backed start-up creating a next-generation game system for families (Sifteo Cubes), is seeking a visual designer with front-end web development chops to join our small-but-mighty marketing team. We like generalists here at Sifteo, and this position is no exception. This is a "do both" role.

  • Interaction Designer at oDesk (Redwood City, CA)
    oDesk is looking for a thoughtful Interaction Designer to join our quirky, fun-loving UX team. You'll be a valued collaborator in our work to research, envision, design and help build a kick-ass user experience for our global user community. You're an excellent communicator with a strong design sense, a technical background, and the ability to effectively present and advocate for your ideas.

  • Web & Mobile Designer at Clarimont (Brisbane, Australia)
    We're now looking to add a new member to our team that is passionate about creating cutting edge user experiences. While this is initially a contract role, we would be looking to transition the suitable candidate to a full time position.


11. Recent Articles On Smashing Magazine


Join our community: follow us on Twitter and join us on Facebook

The authors are: Melanie Lang (ml), Esther Arends (ea), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).

unsubscribe | update preferences | view it in your browser

вторник, 23 апреля 2013 г.

Smashing Book #4 Is On Its Way: New Perspectives On Coding And Design

The email is not displayed properly? View the online version. Sorry, but why am I receiving this?

The Smashing Book #4 is on its way.
Two hardcover books in a gorgeous slipcase.

Dear Friends,

We took up the challenge of getting the best authors on board and covering important topics that haven't been thoroughly discussed and adopted by the community yet. This time we're working on two books instead of one to deliver only the best practical techniques, strategies and approaches in Web design and development — just for you.

Smashing Book #4

New perspectives in today's Web design world will be covered by Addy Osmani, Harry Roberts, Christian Heilmann, Dan Mall, Aarron Gustafson, and many others. The covers were designed by Anna Shuvalova.

We aim to make the Smashing Book #4 a unique piece of artefact — neatly packed in a beautiful slipcase. Get the most valuable tips, tricks and techniques for your work!

Pre-Order Options:

If you're quick enough, you can grab a couple of extra (and exclusive) goodies! Please note that every print option includes all eBook formats. Have a look at the three different options below:

Smashing Book #4 (Print + eBook)

Smashing Book #4 +
eBook Version

Get the Smashing Book #4 print edition including the handcrafted, beautiful slipcase and all eBook formats of New Perspectives on Coding and New Perspectives on Design.
Read more...

Smashing Book #4 (Print + eBook Library)

Smashing Book #4 +
Library (save $20!)

Get both hardcover Perspectives of the Smashing Book #4 in the beautifully handcrafted slipcase and an annual subscription to the evergrowing Smashing Library, including all eBook formats and consisting of more than 55 further quality eBooks on Web design! Be quick — the number of packages is limited! Read more...

Smashing Book #4 (Print + eBook Library + Fan Bundle)

Smashing Book #4 + The Fan Bundle

This option includes the printed Smashing Book #4 in the slipcase, an annual subscription to the Smashing Library, a stylish Smashing t-shirt, a Smashing laptop bag, and your own personal Smashing caricature by our illustrator Ricardo Gimenes. Grab it now — the number of packages is limited!
Read more...

So what are you waiting for? Get your package while it's available! We're looking forward to taking this journey with you!

— The Smashing Team


вторник, 16 апреля 2013 г.

Smashing Newsletter #82: How To Disable Autoplay and Get The UI Flow Right

The email is not displayed properly? View the online version.

The Smashing Email Newsletter

Issue #82 | Tuesday, April 16th 2013 | 139,261 subscribers | Previous issues

Dear Friends,

You probably have been there at some point. You end up with dozens of open tabs in your browser, some work-related, others not so much — and usually distributed across a few browser windows, too. Yet suddenly something happens that profoundly changes the course of action of that day, and easily sucks you out of your creative flow. What happens? One of the numerous tabs starts playing music automatically — courtesy of the designer of the website.

Editorial

Especially if you work with a quite distinctive (and loud) music playing in the background, this can be extremely annoying and disturbing. Yet if you have lots of tabs, you have to muddle through each of them and search for any indication that music is being played. Wouldn't it be nice to have some sort of a detector (or blocker) for auto play? What if browsers integrated some sort of the which tab is playing audio-feature, with an icon indicating audio displayed right next to the favicon in the tab (see the image above)? Wouldn't it make a great UI feature? It would definitely make searching for the pundit much easier!

But since the feature isn't available in most browsers yet, in the meantime you might be well served with the article How To Disable Annoying Autoplay in Chrome, Firefox and Safari which provides quick tips on how to disable auto play in all major browsers. Hopefully, this will help you keep unwanted interruptions away from your workflow.

Have a truly productive (and hopefully exciting) week!

— Vitaly

Table of Contents

01. TimeJump: Deep Linking For Audio And Video
02. Coffee For Your Ears
03. Getting The UI Flow Out Of Your Brain
04. Forecast.io: Your Weather Service In Your Browser
05. Exploring Undiscovered Young Talent
06. Turn Illustrator Graphics Into Code
07. Slide In... As You Scroll Down
08. Diving Into iOS Development — Workshop With Johannes Fahrenkrug
09. Free Artistic Wallpapers By Nathan Yoder
10. Take Me To A Sunny Sunday
11. Smashing Highlights (From Archives)
12. New on Smashing Job Board
13. Recent Articles On Smashing Magazine


1. TimeJump: Deep Linking For Audio And Video

If your website features lots of audio fragments, videos or podcasts, you may have wished you could provide a simple link that would send your visitors directly to a specific part of the audio or video file rather than having to ask them to jump forward to a specific timeframe. There are some workarounds for major platforms, but what about a more universal solution?

TimeJump: Deep Linking For Audio And Video

TimeJump, by Chris Coyier and the creative minds from Paravel, adds deep linking capabilities to HTML5 audio and video podcasts. Essentially, the library reads out the time parameter in your URL and starts playing the file at the specified timeframe. The syntax is straightforward: e.g. http://pdca.st/first-episode/#t=1:23:45. Easy. Another little design problem solved even before you thought of considering it for your next project. (vf)


2. Coffee For Your Ears

Try to remember these two situations: In the first, you were in your office working on a complicated problem. You finished after a few hours, but you just knew you hadn't done your best work. In the other situation, you were doing some work over the weekend, and you decided to get it all done in the morning while having a wake-up beverage at your favorite café. Despite all the distractions, you finished in record time.

Coffee For Your Ears
Image credit: Derrick Collins.

According to the folks at Coffivity, the café has just the right amount of noise and movement to inspire creativity. So Justin Kausler, Nicole Horton and ACe Callwood set up a little website to help you out at work. It pipes café sounds into your headphones, which you can mix with your music. Try it out and prove them wrong. I couldn't. (jc)


3. Getting The UI Flow Out Of Your Brain

If you've designed a website, app or software product, you've certainly spent some time tweaking the interactions the user will have with your product — the UI flow. UI flows are as important to good interfaces as individual screens are. But how do you communicate these flows? How do you visualize the interactions? You might use storyboards, flowcharts, or mindmapping software. Curious to try out a new technique? Then check out Ryan Singer's shorthand for designing UI flows.

Getting The UI Flow Out Of Your Brain

Singer's sketch demonstrates each state of the flow like a coin with two sides: what the user sees, and what they do. An arrow connects the user's action to a new screen with another action. With some interesting examples, Ryan demonstrates how this shorthand can illustrate a lot of user behavior. Sure, most diagrams might end up in the garbage — as Ryan also notes. Yet a good sketch can help you to get the flow out of your brain and communicate your work properly along the way. (ea)


Advertisement


4. Forecast.io: Your Weather Service In Your Browser

When you have nothing to talk about, talk about the weather. Forecast.io is a friendly online weather service that might save your next awkward small talk situation. Unlike other services, it's pretty comprehensive but not cluttered. The map (with global and local views) shows rain animation for your location and all over the world. You can easily navigate to other locations by dragging the pin.

Forecast.io: Your Weather Service In Your Browser

Furthermore, the service presents minute-by-minute forecasts for your exact location. Instead of simply giving an icon or a single word, the tool generates text summaries that consider usual and unusual behavior in your area. You can choose between Celsius and Fahrenheit. You can also use the time machine feature and view weather observations/predictions for the past and the future.

Forecast is powered by 16 data sources, which are aggregated together statistically to provide the most accurate forecast possible for a given location. It also provides a custom-developed API that is freely available for developers to use, e.g. to integrate weather in your own app or to help users make some UI flow decisions based on the current weather. (ml)


5. Exploring Undiscovered Young Talent

Isn't it always exciting to work with passionate, creative minds who have lots of ideas and are not yet discouraged by the (sometimes) harsh reality of unfair deadlines and political decision-making? Undercoat celebrates the most beautiful, inspiring and innovative content produced by students. It specifically features the artwork of young newcomers to the industry who are coming out of universities, art schools and design schools — working their way towards a career in a creative field.

Exploring Undiscovered Young Talent

The archive encompasses student work from designers all around the world, categorized by institute and also searchable. Most original designs are featured in a regular (quarterly) Overcoat Magazine, with large feature interviews with artists, discussing their design thinking and, of course, their work. A great source for inspiration and yet undiscovered talent. (vf)


6. Turn Illustrator Graphics Into Code

Turning your Illustrator graphics directly into code can simplify your coding work a lot. With Drawscript, Tom Krcha has released an extension for Illustrator that generates code from vector shapes in real time. Drawscript supports OBJ-C, C++, JavaScript, Processing, ActionScript 3, JSON and Raw Bezier Points — and as such it is great for user interfaces or creating vector assets for gaming.

Turn Illustrator Graphics Into Code

Since it transforms your graphic into code the moment you draw it, Drawscript might also come in handy when learning or even teaching creative coding. You can install the free extension via the Adobe Extension Manager. The project is currently available in its third beta version. Once the final version is released, it will be open-sourced. (cm)


Advertisement
Ad


7. Slide In... As You Scroll Down

Subtleties matter, and especially in design, a little attention to transitions in interfaces can go a long way, especially to introduce small kindness (as Aarron Walter puts it) into your UIs — little niceties that embrace and define your personality and make the interface just a tiny bit more pleasant to use. For example, if your website provides a list of items in an overview, or loads update on the fly, what about allowing new modules of content to softly slide up into place as the user swipes down?

Slide In... As You Scroll Down

In the article Slide In (As You Scroll Down) Boxes, Chris Coyier explains a simple technique for creating this small kindness using jQuery. Make sure to read the comments on the article as well: they feature other solutions and links to forks and extensions of the script. (vf)


8. Diving Into iOS Development — Workshop With Johannes Fahrenkrug

Before we launched a series of Smashing Workshops a couple of months ago, we approached the selection of workshop coaches very thoroughly, very much like we do it with our editorial work. We care about quality and we care about delivering value to our audience. That's why we are honored to welcome Brad Frost (sold out), Andy Clarke and now also Johannes Fahrenkrug to our hometown Freiburg, Germany, to host a full-day workshop.

Diving Into iOS Development — Workshop With Johannes Fahrenkrug

Johannes has been developing on Apple's platforms since 2007. He has co-authored the book "Objective-C Fundamentals" and actively contributes to the open-source community. Through lots of practical hands-on examples, Johannes will help you master the steep learning curve of the "cryptic" Objective-C programming language and make you feel right at home with the tools, the language, the frameworks and the concepts that you need for building iOS apps. The workshop will be held on May 21st 2013. The number of seats is limited, so make sure to grab your ticket now!

PS: We also would love to welcome you in our hometown for our upcoming Smashing Meetup on Responsive Design on April 29th, too — so if you happen to be in the city, let's grab a beer or two! (vf)


9. Free Artistic Wallpapers By Nathan Yoder

Every artist and designer needs a personality — a unique signature that is prevalent in their work, that makes it recognizable and distinguishable from the crowd. Whenever you stumble upon Nathan Yoder's work, you'll notice his signature and his unique visual and typographic style written all over it.

Free Artistic Wallpapers By Nathan Yoder

In fact, Nathan provides a series of beautiful wallpapers in various resolutions for desktop and mobile. Each wallpaper is an artwork of its own, and they are definitely a nice accessory for your working environment. What about you releasing a set of nice freebies or goodies for your visitors? They would surely appreciate it. (vf)


Advertisement
Ad


10. Take Me To A Sunny Sunday

Your work week is half over, the weekend lies ahead of you, but you feel stuck in your city. The thought of staying at home is suffocating, and your heart is shouting out, "I want to get away!" Most often, we don't. What stops us? It could be lack of money — but definitely not always. Maybe, quite often, it's just comfort?

Take Me To A Sunny Sunday

So, what's uncomfortable about getting away? Arranging your getaway, for example. You start browsing the Web for flights and you see so many offers, but in the end you can't seem to find what you're looking for. You are frustrated and reject the idea.

Don't be disheartened. There comes hope for your much longed-for sunny getaway: Escape Flight, a clever one-stop travel agent that wants to help you escape without the hassle. The free service works with an algorithm that does the thinking for you. It considers cost, travel time, activities and the weather, and filters the results to give you only the best options: direct flights, Friday to Sunday, no more than three hours away. The service currently only lets people from London escape. Adding more cities is in the works, so let's hope that yours will be added soon as well! Or perhaps that's a nice idea to work on for your local community on a lazy weekend? (ea)


11. Smashing Highlights (From Archives)

  • "But The Client Wants IE 6 Support!"
    We got ourselves into this. We are the ones who caused this problem for our industry. We are the ones giving ourselves this trouble and making our profession less creative and enjoyable than it could be. It's entirely our fault and no one else's.

  • Five and a Half Habits of Highly Effective Designers
    We humans love theories. Yet as a wise person once said, "In theory, theory and practice are the same. In practice, they are not." This article is about practice. It's about five and a half habits which I've observed first-hand in the complicated, non-theoretical, absolutely real world. If practice is your thing, keep reading.

  • Exporting From Photoshop
    It's probably the least interesting part of designing software, usually entailing hours of grinding. Saving images to multiple scales — as required by iOS and other platforms — adds complication to the process. But there are ways to streamline or automate the exporting process.


12. New on Smashing Job Board

Here are the job openings published recently at our very own Smashing Job Board:

  • Front End Web Designer at Information Management Services, INC. (Beltsville, MD)
    We are currently seeking a full-time, entry level, creative front end web designer to collaborate with IMS staff and clients to support their public-facing websites and collaborative research sites. Design and layout websites using current design techniques with special emphasis on usability and accessibility.

  • Front End/UI Developer at Publishers Clearing House (Port Washington, NY)
    Publishers Clearing House (PCH), headquartered in Port Washington, NY is a multi-channel direct marketer of value-based merchandise, magazines and promotional offers and a leading provider of digital "play and win" entertainment.

  • Website/Graphic Design at QScend Technologies, Inc. (Waterbury, CT)
    We seek a professional, experienced graphic designer with 3+ years experience in print and website design for a full-time position in Waterbury, CT. The individual filling this position should be independent and be able to complete work quickly and efficiently.


13. Recent Articles On Smashing Magazine


Join our community: follow us on Twitter and join us on Facebook

The authors are: Jan Constantin (jc), Esther Arends (ea), Melanie Lang (ml), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).

unsubscribe | update preferences | view it in your browser