Tuesday, December 18, 2012

Smashing Newsletter #74 (Christmas Edition): Facebook Buttons - Photoshop - jQuery

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

The Smashing Email Newsletter

Issue #74 | Tuesday, December 18th 2012 | 127,868 subscribers | Previous issues

Dear Friends,

Time passes quickly, and another year reaches its ending. For us, it was a vibrant, truly smashing year. We've launched the redesign of our site and organized our very first Smashing Conference. We've produced the Smashing Book 3 as well as the brand new Mobile Book. We've also launched our Smashing eBook Library and invested more than ever into our editorial process. It was a busy year, full of discoveries and explorations.

Editorial
Our brand new Mobile Book, available as hardcover and as eBook. We hope you'll love it as much as we do.

We've got big plans for the next year as well. You can expect Christian Heilmann's new book and the very special Smashing Book 4. We've started planning the second Smashing Conference as well as meet-ups and regular workshops. We have a plenty of special, exclusive articles in works, and also something new for our legendary monthly desktop wallpapers.

We'll be honored to take this journey with you! Whether you just discovered us, or have been reading us for a while, we're very excited to get out of the comfort zone and face new challenges and opportunities. Feel free to share your ideas, thoughts, feedback, anything else using the hashtag #sm2012 on Twitter — we'd love to know what you think!

Happy holidays everyone! Enjoy your time with your family, stay offline for a couple of extra days and have a fantastic, successful and a truly smashing 2013!

— The Smashing Editorial Team

Table of Contents

01. "I Really Like Your Style But..."
02. How Do Users Experience Apps?
03. Stop The Social Media Buttons Madness!
04. Taking Office Sports To The Next Level
05. (Photoshop) Learning Never Stops
06. Sticky Captions For Images With jQuery
07. New on Smashing Job Board
08. Smashing Highlights (From Archives)
09. Recent Articles on Smashing Magazine


1. "I Really Like Your Style But..."

As designers, we often have a very unique technical perspective on the way things work and how they are built for the Web. However, many clients do not have the insights that we take for granted. That's not our fault, but it's not their fault either. In fact, it's our job as problem solvers to clearly explain and communicate to our clients why we think they are wrong.

I Really Like Your Style But...

Some of the quotes from clients have become almost legendary, popping up every other project; others reveal common misconceptions and general mistakes that happen as a project develops. Sharp Suits reviews and illustrates some common client quotes in their gallery. The result is an entertaining resource which might even help you resolve a new issue by not taking it too seriously, or by making it clear that design decisions should be in your hands. (vf)


2. How Do Users Experience Apps?

If you want to create a great new app, you want to optimize the path that your users will follow when they use your app. You have to think about user flows, i.e. the initial point from where a user starts, where he ends up, and the transitions in between. In this case, UX Archive might be just what you are looking for: a showcase of user flows in apps. The website takes you on a path through each and every step of the UX experience of some beautiful iPhone apps — in a sequence of interface screenshots.

How Do Users Experience Apps?

The tool looks closely at how these apps handle exploration of features, onboarding, search and sharing. This smart classification helps you compare the different design patterns and get an impression of what might work in your project. It would mean a whole lot of work if you had to get this kind of data by yourself, that's for sure. Drop that effort, lean back and experience some exciting user flows. It's very inspiring and gives you a feeling of being able to travel back and forth in time. (ea)


3. Stop The Social Media Buttons Madness!

Integrating social media widgets such as the almighty "Tweet" badges or Facebook "Like" buttons is a common feature of Web projects. However, when it comes to performance, all those buttons are quite a nightmare, slowing down the sites with HTTP requests and convoluted JavaScript. So if users don't have a good connection or want to read an article on their mobile device, the chances are high that they never actually see the article, all due to the "sharing" buttons.

Stop The Social Media Buttons Madness!

SocialCount by Filament Group is a clever solution to resolve the performance issues for social widgets. The jQuery plugin lets you easily customize the appearance of the buttons, and defer loading of individual native widgets until the user actually expresses intent to share the content with their friends. The library is just 3 KB for the JavaScript and CSS (after minification and gzip).

Alternatively, you could use the Social Share Privacy jQuery plugin by Heise which was developed out of privacy concerns and allows users to select which social network they'd like to keep activated by default. Now, if that's not a good reason to not load "native" social media buttons by default, what is? (vf)


Advertisement


4. Taking Office Sports To The Next Level

Do you play any office sports? Not ringing any bells? Well, here are some examples: foosball, ping pong, pool, Wii…In fact, Nathan Hoad observed that the majority of cool workplaces have some kind of olympic competitions with at least one kind of office sport.

Taking Office Sports To The Next Level

As with many great ideas, this one is simple but effective: he invented the Athletable, an online tool that helps with recording the results and also calculating ranks and scores. The tool costs $10 a month and allows you to add up to 50 players for every sport. You simply enter the names and the kind of game and let the tool do the rest. Sounds more like fun now, doesn't it? (tts)


5. (Photoshop) Learning Never Stops

Are you a Photoshop geek through and through? Are you still cherishing all the great tricks and shortcuts of your favorite application or are you already taking them for granted? Take another look at some of the best Photoshop layers tricks and shortcuts by Veerle Pieters.

(Photoshop) Learning Never Stops

The article reviews 30 useful Photoshop shortcuts and tricks which Veerle learned along her way. These tricks may be familiar to you, or you might have already forgotten them: displaying layers, layers panel preview options, auto-select layers, and many more. Some of the tricks Veerle discovered on Julieanne Kost's Blog, a great source of in-depth tutorials, training, techniques and shortcuts for working with Adobe Photoshop and Lightroom. (ea)


6. Sticky Captions For Images With jQuery

We all know the drill: you have lots of image thumbnails with captions shown on hover, yet they are not visible to the user because the bottom of the image is overflowing the viewport. The user would have to scroll down to see the section of the image with the caption.

Sticky Captions For Images With jQuery

Sticky Captions is a technique by Manoela Ilic that keeps the caption visible by making it stick to the image and "moving" with it. The solution is a jQuery plugin that also uses the jQuery Masonry plugin. Perhaps there is a way to achieve the same result with pure JavaScript as well? (vf)


7. New on Smashing Job Board

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

  • Mathematician Web Developer at Hurricane Electric (Fremont, CA)
    Looking for a great opportunity to learn and grow in knowledge of the Internet and to put your knowledge to use? Looking for a position at a large, stable, and growing technology company? Looking to contribute to a team with worldwide reach and impact? Join our team and grow, learning about leading-edge Internet technology in a fun, interesting environment.

  • Back-end developer (PHP) at Dusted. (London, UK)
    To support our growing digital team, we are seeking a London based, full-time back-end developer that has an unhealthy interest in development, UX and design. For digital projects, we aim to provide the user with a great experience, while meeting project goals and providing clients with easy-to-use content management platforms.

  • Senior Graphic Designer at Promega Corporation (Madison, WI)
    The Area – Marketing Services. Our job is to provide relevant, often times complex, information in a manner which is both easy to access and refreshing to review. Our communications create an avenue for exchange. Our ambition to follow best practices integrates our capabilities in scientific writing, web development, graphic design and marketing.


The Mobile Book

8. Smashing Highlights (From Archives)

  • Free Food and Cakes Icon Set (20 Icons)
    A set with 20 beautiful, original and sweet icons in resolutions 48×48px – 128×128px and formats .png, .ico, .incs and .tif. Also, the vector source (.eps) is available for free download as well.

  • The Z-Index CSS Property: A Comprehensive Look
    z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges.

  • Lessons From Swiss Style Graphic Design
    Also known as International Style, the Swiss Style does not simply describe a style of graphic design made in Switzerland. It became famous through the art of very talented Swiss graphic designers, but it emerged in Russia, Germany and Netherlands in the 1920's.


9. Recent Articles on Smashing Magazine


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

The authors are: Esther Arends (ea), 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

No comments:

Post a Comment