вторник, 26 марта 2013 г.

Smashing News: Latest eBook Releases And Upcoming Smashing Workshops

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

The Smashing Library

• Save up to 70% with the Smashing Library annual subscription,
• Get immediate unlimited access to all published Smashing eBooks,
• Vote on the upcoming Smashing eBooks and topics in the Library and even more for only $99/€89 per year!

Sign up!

Latest Additions To The Smashing Library

The Content & Copywriting Bundle

If content is king, then the art of messaging is what will drive your product, business or idea forward. Learn what writing for the Web is all about and explore its facets. Read more →

The WordPress Bundle

One of the great aspects of WordPress is its incredible adaptability. Understand the WordPress economy and explore some useful tricks and techniques this CMS has to offer. Read more →


April 5th, 2013

Paul Boag: Guerilla Marketing

Read more →

May 5th, 2013

Brad Frost: Everything You Wanted to Know About Responsive Design... And Less!

Read more →

June 25th, 2013

Andy Clarke: CSS3 for Responsive Design

Read more →

вторник, 19 марта 2013 г.

Smashing Newsletter #80: CSS Creatures - Photoshop - Sketching - Stylesheets

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

The Smashing Email Newsletter

Issue #80 | Tuesday, March 19th 2013 | 136,487 subscribers | Previous issues

Dear Friends,

If you've been a Smashing Newsletter subscriber for a while now, you most probably already know that we've started introducing a series of thoroughly selected high-quality eBooks in the Smashing Library. Paul Boag's "Client Centric Web Design" eBook will be available in the first week of April 2013 in PDF, EPUB and Kindle (DRM-free) formats!

Editorial

Further updates concerning eBooks written by well-respected designers and developers in the industry will be announced in our newsletters, mailings and on Twitter. Also, we've been busy organizing a variety of full-day workshops for you. Be sure to stay tuned — we're sure you won't be disappointed!

Yours sincerely,
The Smashing Team

Table of Contents

01. Your Own CSS Creatures
02. Type It Right: Quotes and Accents
03. The Secret UX Ingredient
04. Double, Triple (Or More) Your Conversion Rates
05. Free Printable Paper Templates For Sketching
06. StyleDocco: A Tool For Creating Stylesheets The Easy Way
07. Isometrify: A Free Custom Panel For Photoshop
08. Shapes Of Cities
09. What Would Responsive TV Look Like?
10. Old Handcraft Meets Rock
11. Smashing Highlights (From Archives)
12. Recent Articles on Smashing Magazine
13. New on Smashing Job Board


1. Your Own CSS Creatures

Can you imagine a colorful set of animated confetti, in which each one has a color, a personality and other striking attributes? What if you could create your own little round buddy to be part of this fiesta?

Your Own CSS Creatures

In fact, you can: Bennet Feely's project CSS Creatures allows you to simply send out a tweet with your chosen characteristics, and, in less than 20 seconds, your new friend will appear among his siblings. Apparently, the creatures are generated from 100% all-natural HTML5 and fresh-squeezed CSS3, so if you really love the characters, you can take them home with you and add them to your personal site! (tts)


2. Type It Right: Quotes and Accents

Here's a treat for all Mac-using copy-cats out there. Jessica Hische really has the best tidbits for all those who crave a solid quick reference on typography but just haven't realized it yet.

Type It Right: Quotes and Accents

Quotes & Accents is a wonderful guide on all the useful Mac keyboard shortcuts that crown your letters with accents and frame them with the right quotation marks. Now you won't have to go on a long, exhaustive search if you want write "El Niño" the right way — that is, if you have any wish to so. And, by the way, you can type em-dashes and smart quotes by pressing on a "hyphen" and a "quote"-character on your iOS devices, too! (jc)


3. The Secret UX Ingredient

What do the creators of Clear, Mailbox and Sunrise have in common? They've discovered a simple formula that works for their apps and keeps users interested, despite their simplicity. How did they manage that?

The Secret UX Ingredient

Matthew Moore wrote a fascinating short article on "branded interactions". He describes how some simple interactions become almost synonymous with the app they were most successfully used in. As Matthew writes, "when the interaction is unique, your users can begin to associate that interaction with your product." If you can own an interaction, that's a very strong level of branding in today's interface-filled world. It wouldn't hurt to take a look at his other articles, either. They are well-written, witty and thought-provoking. (jc)


4. Double, Triple (Or More) Your Conversion Rates

If you design websites for a living, it's very likely that at some point you've dealt with (and maybe struggled with) building a well-performing landing page. You may have racked your brain to find the best strategy to increase conversion rates. Would you like to see how others have tackled this? In Step-by-step landing page copywriting, Nathan Barry takes you through the process of writing and designing the landing page of ConvertKit.

Double, Triple (Or More) Your Conversion Rates

There's a lot of value to take away from Nathan's post: you get detailed insights into a real-life landing page design — a learning process with lots of advice and feedback on conversion rate optimization and copywriting. Plus, you can follow up by reading dozens of comments which are just as interesting. Many relevant and important points and questions are raised here, such as the advantages of A/B testing, what psychology says about appealing pricing schemes and whether or not you can actually build trust if you ask for your visitors' email addresses prematurely. (ea)


Advertisement

5. Free Printable Paper Templates For Sketching

Thinking of graph paper (also known as grid paper or millimeter paper), most of us will probably remember math class. Graph paper is printed with fine lines arranged in a regular grid and works well for drawing, sketching or plotting functions. It's commonly used in engineering but can come handy for many other purposes as well. It's a great way to align your art project sketches or wireframes, for example.

Free Printable Paper Templates For Sketching

Graph paper is available in stationery shops, but — as is the case with so many other things — you can also get it online. Paperkit is a set of free printable graph paper templates. Highly customizable, the set has its own toolbar which lets you adjust settings such as grid lines, margin size, stroke color and width, as well as paper size, to generate the exact type of graph paper that you need. Once you've chosen your settings, you can download your customized template and immediately print it, or save it for your next project. Paperkit is available as dotted or lined paper, too. (ea)


6. StyleDocco: A Tool For Creating Stylesheets The Easy Way

You probably came across style guides recently, yet have you thought about a simple and quick way to generate them right from your code, especially if you develop in the browser anyway? StyleDocco generates style guide documents from your stylesheets by parsing your stylesheet comments through Markdown.

StyleDocco: A Tool For Creating Stylesheets The Easy Way

You can simply write example HTML snippets in your stylesheet comments, prefixed with 4 spaces or between code fences (```). StyleDocco will then display a preview using the applied styles on your example HTML code. The previews are displayed in a resizable iframe, so that you can display your responsive design at different viewport sizes. StyleDocco is free open source software, and can be download from GitHub. It was inspired by original Docco by Jeremy Ashkenas and Knyle Style Sheet. (ml)


7. Isometrify: A Free Custom Panel For Photoshop

Some people love to make others' lives easier, and Kamil Khadeyev is certainly one of those people. On his blog, he shares a custom panel for Photoshop that helps to transform objects with isometry and generate a custom-sized grid for them. Right now it uses an angle of isometry of 26.565 degrees, which is common for most pixel art work, but Khadeyev is working on an option to let the user define the angle. The panel is intended to be used with shape layers only, which means that you can use raster graphics but the result will not be perfect. The pixel grid snapping also still has some minor issues, but moving them manually shouldn't be a problem.

Isometrify: A Free Custom Panel For Photoshop

So far, the panel has three buttons for transforming shapes either to the right, the left or the top. There is also a button for an isometric grid pattern. But that's not all. Khadeyev has already planned for more options such as extruding and moving shapes. You're welcome to suggest more ideas. (ml)


8. Shapes Of Cities

Every large city around the world has some architectural monuments which differentiates it from other cities. These monuments are so strongly associated with the cities that it's possible to recognize them just with a simple silhouette.

Shapes Of Cities

In Yoni Alter's project Shapes of Cities you can explore the overlapping outlines of many buildings. The artist used different colors to enable you to distinguish one from another, and the result is a flashy collection of city postcards. It might be a fun game to try to recognize a city from its shapes. Try it out! (tts)


9. What Would Responsive TV Look Like?

What if your TV responded to your viewing habits, adapted to the screen size and even detected your accessibility needs? For one, you might never get off your couch, but you might also leave your kids in front of the TV without being too worried about nightmares over bedtime.

What Would Responsive TV Look Like?

In his article on Responsive Television Bryan Clark proposes a vision of what a TV version of responsive design could be. Adaptation to different screen sizes is the least of it — and most likely the easiest part to implement right now. Clark imagines a much wider range of customization options for the different elements on the screen — such as a bigger sports ticker — as well as smarter accessibility detection and HAL-like awareness. Kids won't be able to watch the horror movie from behind their parents' backs anymore because the TV detects what they are trying to watch and pauses (oh, the injustice!). An interesting read, whether you approve or not. (jc)


10. Old Handcraft Meets Rock

There is probably nothing more inspiring than watching other creative designers and craftsmen in their creative process. Designer and traditional sign-writer David A. Smith is one of these passionate artists whose enthusiasm is contagious. Filmmaker Danny Cooke has captured Smith's love for the special but nearly forgotten turn-of-the-century craft of creating reverse glass signs and gilded mirrors in a stunning 20-minute film.

Old Handcraft Meets Rock

The film accompanies Smith as he creates the cover artwork to John Mayer's "Born and Raised" album. Sneak a peak into his creative routine from the first hand sketches to the application of fragile gold leaf on a finished glass panel. Watching this ephemera trading card-style work of art come to life is a magical and inspiring trip back in time. A definite must-see for every artist! (cm)


11. Smashing Highlights (From Archives)

  • iCandies: Free Icon Set For Your User Interfaces and Apps
    We are glad to release iCandies Icon Set, a set with 60 high quality icons in 64×64px, 48×48px and 32×32px, available in .EPS, .AI and .PNG. The set is designed to give your projects a sleek and geeky style or provide crisp, attractive icons for your modern and fashionable-looking interfaces.

  • Why User Experience Cannot Be Designed
    A lot of designers seem to be talking about user experience (UX) these days. We're supposed to delight our users, even provide them with magic, so that they love our websites, apps and start-ups. User experience is a very blurry concept. Consequently, many people use the term incorrectly.

  • Speeding Up Your Website's Database
    Website speed has always been a big issue, and it has become even more important since April 2010, when Google decided to use it in search rankings. However, the focus of the discussion is generally on minimizing file sizes, improving server settings and optimizing CSS and Javascript.


12. Recent Articles on Smashing Magazine


13. New on Smashing Job Board

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

  • Front-End Developer at Album Agency (San Clemente, CA)
    Album is a 10-year strategic branding partner for emerging consumer brands, located in San Clemente, CA. We're looking for a freelance Front-End Developer with 2-3 years experience and a strong understanding of UI/UX to help streamline our workflow and build awesome web experiences for our clients.

  • Interactive Producer at nFusion (Austin, TX)
    We are seeking an interactive producer that will manage the development and production of our interactive technology solutions. The ideal candidate will possess a strong work ethic with excellent attention to detail, possess knowledge of core interactive technologies and technical development processes, possess solid communication skills (written and verbal) and have a hunger for responsibility and learning.

  • Software Architect at arvato (New York, Chicago, San Francisco)
    Arvato Systems North America is looking for a Software Architect/Team Lead to support the design process for eCommerce stores with a focus on reusability. This position will be involved in all phases of product development from review of functional specifications through assisting with the design and oversight of the development activities.


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

The authors are: Talita Telma-Stöckle (tts), 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

вторник, 5 марта 2013 г.

Smashing Newsletter #79: Fonts - UX - Photoshop - Icons - Oscar

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

The Smashing Email Newsletter

Issue #79 | Tuesday, March 5th 2013 | 135,434 subscribers | Previous issues

Dear Friends,

Three years ago, the Smashing Newsletter was launched and since then our love and appreciation for the good ol' Web has grown even more. We keep improving the quality of our bi-weekly newsletter and present to you only with the most useful and interesting tips and tricks for designers and Web developers. Today, we can't imagine a better way of informing and communicating with our fans and readers! Thanks for staying with us — we appreciate it.

Editorial

In today's newsletter issue, we'll be exploring a cool app, a type compatibility table, custom-designed icons to represent headlines, products we all wish would exist, a handy little Photoshop script, posters that tell the Oscar history in a very unique way, explore interviews with well-respected professionals, and last but not least, present to you Jonathan Snook's "SMACSS" eBook that is now available in the Smashing Library!

Yours sincerely,
The Smashing Team

Table of Contents

01. Breaking Icons Of Breaking News
02. Products I Wish Existed
03. Tinytype: A Comprehensive Table For Default Fonts On Mobile
04. Remove Unused Layer Styles In Photoshop
05. SMACSS eBook Now Available In The Smashing Library!
06. Seesaw: Social Decision-Making
07. The Interface Question: Your Settings Vs. My Settings?
08. Third-party Library Update Tracking
09. Personified Oscar Statues
10. The Gently Mad
11. Smashing Highlights (From Archives)
12. Recent Articles on Smashing Magazine
13. New on Smashing Job Board


1. Breaking Icons Of Breaking News

It's relatively easy to create icons for folders, arrows, download buttons or calendars. But what about creating an icon for a... headline? It's probably much more of a creative challenge, but ultimately a bit more exciting too. Icons Times uses custom-designed icons to represent the headlines of the main breaking news of the day. On the site, instead of headlines, it's icons that catch your first attention.

Breaking Icons Of Breaking News

The creators of the project (who prefer to stay anonymous) scan news channels for the most interesting and important news, design icons that illustrate those news stories and put them on the site. The headlines are categorized into sections: business, entertainment, sports, technology and world. Can you figure out the idea of each icon before reading the actual headline? (ea)


2. Products I Wish Existed

How many million times have you dropped an idea? You had a flash of wit but this flash never turned into anything else, for whatever reasons (e.g. thoughts like: What the heck! Nah! Forget it! It's not good enough. It's difficult.)? We tend to underestimate the potential of our ideas and our capability to implement them.

Products I Wish Existed

We often stop at a very early stage: we don't even make our ideas tangible. But perhaps we should. On Products I Wish Existed, designers and developers submit ideas for fantastic products they wish existed. If you are looking for the next big thing, perhaps it's worth checking the ideas and building a solution to a real problem that people have. Or perhaps you'd like to add your own idea and see how it gets picked up and developed by the community? (ea)


3. Tinytype: A Comprehensive Table For Default Fonts On Mobile

Today we're spoiled with choices when it comes to creating a website with beautiful typography. However, the rise of mobile devices and the need for a lighter page weight are important considerations when using Web fonts. It doesn't make life easier that all those device operating systems are very different from each other, and often you might want to fall back on already available fonts in case Web fonts don't load for some reason. Luckily, Jordan Moore spent some time putting together a type compatibility table showing available default system fonts across different mobile platforms.

 Tinytype: A Comprehensive Table For Default Fonts On Mobile

The table shows the state of default system fonts across popular platforms: iOS, Android and Windows Phone 7. Jordan put it together as a way of finding alternatives to Web fonts when the page weight starts to get too heavy. You're welcome to improve it and contribute to the project on GitHub. (ml)


Advertisement
inspectlet


4. Remove Unused Layer Styles In Photoshop

You probably know the drill: you want to remove unused layer styles in Photoshop, but apart from click-dragging empty layer style options manually to the trash, the application is actually missing an efficient way to do so. Here's where the power of the community comes in.

Remove Unused Layer Styles In Photoshop

After a huge demand in a Photoshop support forum, Paul Riggot has developed a handy little Photoshop script that solves exactly this problem and removes layer styles you no longer need without too much clicking involved. You can download the script for free. If the link has already used up its bandwidth, you can still find the script on the original post in the Photoshop forum. (cm)


5. SMACSS eBook Now Available In The Smashing Library!

If you've been a subscriber of the Smashing Newsletter for a while now, you probably know that we publish selected quality eBooks regularly in the Smashing Library, our truly smashing eBook subscription. To provide even more value to our subscribers, we will also make available thoroughly selected eBooks from well-respected designers and developers in the industry.

SMACSS eBook Now Available In The Smashing Library!

Jonathan Snook's "Scalable and Modular Architecture for CSS" is the first, and more eBooks will be coming soon. Of course, we will announce them in our newsletters, but you can also follow our updates on Twitter. And if you haven't voted for the next eBook bundle to be released yet, make sure to vote now in your personal dashboard. (il)


6. Seesaw: Social Decision-Making

Life is full of decisions: what to plan for dinner tonight, what's the perfect birthday gift for a friend, or which color should you paint your kitchen? Asking friends for their opinions often makes things easier, but what do you do when they're not around the moment you have to decide? What about just starting a poll?

Seesaw: Social Decision-Making

The Seesaw app could help you with this. Just take photos of your options and notify friends and family with a text or via Twitter/Facebook so they can cast their votes. Seesaw then provides you with real-time results of their opinions. The app is currently available only for iPhone. With a bit of support, big and small decisions will be easier — and probably even more fun! (cm)


7. The Interface Question: Your Settings Vs. My Settings?

Fancy a little mental experiment? Please have a look at the interface of your favorite website or app and now try to analyze: is it easier for you to see this interface as an extension of yourself, which is communicating for you, or as a separate personality — like a buddy — who is communicating with you? In other terms, should the interface use "your" or "my" when talking about your stuff? Should it be "your settings" or "my settings"? Which is right?

The Interface Question: Your Settings Vs. My Settings?

You never thought you cared? Your subconsciousness probably does, as well as Dustin Curtis; for him the question definitely matters. Thinking about the answer and its possible implications (nearly) ate his soul. If you are curious about the outcome, pay a visit to Yours vs. Mine. According to Curtis, interfaces should mimic social creatures and they should have personalities. In the article, you'll learn about two interesting neurological adaptations which might support each one of the two approaches, and you can make your own choice. (ea)


Advertisement


8. Third-party Library Update Tracking

Staying informed about the latest API changes and security updates is essential for any developer. But keeping track of all of these changes can be quite time consuming. You're probably subscribed to a few mailing lists, have a couple of sites you are checking frequently, or run npm update and pip Install -U on a regular basis. In case you don't want to remember all of these little time-eaters, there is a new service waiting to be explored: meet Bundlescout.

Third-party Library Update Tracking

Just like the name implies, Bundlescout bundles the data about package updates, that you used to collect tediously from different sources, in one place. It monitors changes and sends you a notification e-mail with a list of packages once a day, so that you instantly know when an important update is released for one of your libraries. At the moment, Bundlescout supports Python's PyPI, Node.js' npm, and Ruby's RubyGems with all of their 100,000 packages — and the number is constantly growing. Bundlescout offers both free and commercial plans. Now, that's a little service that helps to simplify a developer's life! (cm)


9. Personified Oscar Statues

February is the most exciting month for the movie industry: only the best in each category receive the biggest award, the Oscar. But after a couple of years have passed, do you still remember which movie was crowned with the golden statue, and in which year?

Personified Oscar Statues

To celebrate the most remarkable winners every year, the designer Olly Moss was commissioned to create a poster called 85 Years of Oscars. According to the brief, Olly had to find a way to reference every single Best Picture winner from the last 85 years. The result? The poster tells the Oscar history in a very unique way: each of 85 statues is characterized with motifs related to the winning movie for that year. There are statues for American Beauty, Titanic, Forrest Gump… well, which movies can you actually recognize? (tts)


10. The Gently Mad

Have you ever wondered what people you admire professionally are like in private life? What are their hobbies, what do they like to eat, what are their views on random issues and concerns from our society?

The Gently Mad

In the podcast The Gently Mad, you can explore interviews with well-respected professionals — mostly Web designers and developers — who share their experiences, thoughts and interesting asides with curious people like you and me. If you pay attention, you will notice that your colleague or a designer/developer you aspire to be like has more in common with you than you thought! (tts)


11. Smashing Highlights (From Archives)

  • Avoiding The Pitfalls Of Free
    This article examines how the desire to build a large audience by giving away your products and services free of charge can cause conflicts of interest, which in turn can lead to dubious compromises in the design process that limit the full potential of your work.

  • New High-Quality Free Fonts (July 2012)
    Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice out there is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don't have to.

  • MUD: Minimum Usable Design
    There is a paradox that fits my life. Doesn't matter what aspect of my life I am talking about because it always seems to apply. Even more so when I think about this paradox and the design of this website and other websites. I really hate this paradox.


12. Recent Articles on Smashing Magazine


13. New on Smashing Job Board

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

  • Web Designer at Oxford Computer Consultants Ltd (Oxford UK)
    We are looking for an experienced web designer with an established portfolio of work to help us deliver attractive, engaging websites and web applications to our clients.

  • Front-End Web Developer at Horizon Productions (Durham, North Carolina)
    We are currently seeking a creative and proven Front-End Developer to join the Horizon Productions team. You'll help us create websites, wrangle content management systems, build interactive experiences, and develop solutions that marry function and form. The position requires a strong work ethic and exceptional communication skills.

  • Front-end Developer at Sparkart (Oakland, CA)
    Sparkart is a digital agency with HQ in Oakland, California. Since 1999 we've steadily grown to become a leader in the world of music and sports. The current client roster includes America's Cup, Bon Jovi, Keith Urban, Lil Wayne, Microsoft etc.


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

The authors are: Esther Arends (ea), Melanie Lang (ml), Cosima Mielke (cm), Talita Telma Stöckle (tts), 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