Tuesday, May 10, 2011

Smashing Newsletter #33: Font Stacks, UI Guidelines, Animated Photography, Customer Rewards...

======================================================================
You received this email because you signed up for the this newsletter.
Does everything look mixed up? View the online version:
http://us1.campaign-archive1.com/?u=16b832d9ad4b28edf261f34df&id=1f910f225a&e=54cfdd29ef

Annoyed? Unsubscribe at any time:
http://smashingmagazine.us1.list-manage1.com/unsubscribe?u=16b832d9ad4b28edf261f34df&id=62f9f9e407&e=54cfdd29ef&c=1f910f225a
======================================================================

Smashing Magazine Newsletter

Issue #33
Tuesday, May 10th 2011
Readers: 56,020


-------------------------------------------------------------------
Table of Contents
-------------------------------------------------------------------

01. Bulletproof Font Stacks
02. Lorempixum: Placeholder Images for Your Designs
03. Hashify: Store an entire website in a... URL?!
04. Big Collection of Style and UI Guidelines
05. Death to Comic Sans
06. GiftPush: Customer Rewards Creates Loyalty
07. Open Wireless Networks For Everybody!
08. Cinemagraph: Animated Photography
09. New on Smashing Magazine
10. Smashing Network Highlights


We're Hiring!

We're looking for an experienced and creative Web designer to work full-time in our office in Freiburg, Germany. Are you a creative, hard-working Web designer with extensive knowledge of Photoshop (or Fireworks), graphic design, usability, UI design, HTML and CSS? If so, this is a unique opportunity to join our team of 15 and work in a warm, familial and creative environment.

Are you a creative, hard-working Web designer with extensive knowledge of Photoshop (or Fireworks), graphic design, usability, UI design, HTML and CSS? If so, this is a unique opportunity to join our team of 15 and work in a warm, familial and creative environment. Interested? Learn more about the job and get in touch with us!

http://www.smashingmagazine.com/smashing-magazine-is-looking-for-an-experienced-and-creative-web-designer-full-time/


-------------------------------------------------------------------
01. Bulletproof Font Stacks
-------------------------------------------------------------------

With support for Web fonts now widespread among modern browsers, designers are embedding more and more typefaces in their designs. However, in some contexts, a browser might be too old, or JavaScript could be disabled, or the fonts in the font stack are not available on user's machine. This is when you need to think of meaningful and bulletproof fallback fonts.

Ffffallback is a bookmarklet for Webkit browsers (Safari and Chrome) and Firefox that lets you test different font stacks to find the best result. All you have to do is add the bookmarklet to your browser's toolbar, load the page that you want to test, and then click the bookmarklet. It will then scan the page's CSS and create a clone page where you can test and analyze different fallback fonts. (cc)

http://ffffallback.com/


-------------------------------------------------------------------
02. Lorempixum: Placeholder Images for Your Designs
-------------------------------------------------------------------

Hand-selecting and inserting placeholder images in a layout can be a hassle. Lorempixum takes care of that task by providing you with placeholder images for every possible usage, whether for Web design or print layout. Using it is simple: visit the website, pick the URL, define dimensions and category, and insert it in the layout. You can use the "Placeholder Generator", which lets you specify the size, category and color settings of the placeholder image.

Image categories include abstract, fashion, transport, people and food. Seeing how many images Lorempixum has delivered since its launch should convince anyone how useful this little service can be. The provided images are for layout purposes only and each image used for the project is released under the creative commons license (CC BY-SA). (sp)

http://lorempixum.com/


-------------------------------------------------------------------
03. Hashify: Store an entire website in a... URL?!
-------------------------------------------------------------------

What if you could store an entire website in its own URL? What if you didn't have to store anything on a Web server unless the user invoked a script that encoded the URL? This is exactly the idea of David Chamber, creator of Hashify. His tool encodes the entire contents of a page in a URL. As you type HTML into the editor on the website's page, the address bar updates with each key stroke. Only a tiny fraction of all Unicode characters are allowed to be unescaped in a URL. Hashify uses Base64 encoding to convert Unicode input to ASCII output that is safe for inclusion in URLs. Unfortunately, the tool is vulnerable to HTML injection and XSS by design.

The concept itself is interesting, although not very practical at first glance. Still, some unique possibilities exist. For instance, Hashify is an interesting answer to the problem of how to view cached versions of websites. If you added a hash parameter to the URL, Hashify would be able to display the website even if the page was down, and without the page actually being stored somewhere in cache per se. Perhaps you can build something meaningful on top of it? Hashify's source is available on BitBucket. (vf)

https://bitbucket.org/davidchambers/hashify.me


--------------------------
Advertising
--------------------------

There are some professions where showing your work is much more effective than trying to describe it like design, for example. At moo.com you can print an entire portfolio for your pocket. Our high-quality Business Cards give you the option of a different image on every card. So next time someone asks you what you do, show them! Get a half price pack of Business Cards from MOO until 31st May (T&Cs apply).

http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?bannerid=2130__zoneid=44


-------------------------------------------------------------------
04. Big Collection of Style and UI Guidelines
-------------------------------------------------------------------

Every brand needs style and user interface guidelines to inform its designers of how branding elements, colors, and related materials should be used, as well as of any conventions in the user interface. The guidelines prevent confusion among designers, and they make the transition easy when a designer leaves the team and a new one is hired. But coming up with guidelines can be confusing and frustrating. Where to even start?

One place to start would be the big collection of style guides and UI guidelines. The list includes nearly 60 guides from companies like 3M, Apple, BBC, Nokia, Oracle, SAP, Skype and Yale University, among others. It's a great reference, and it will give you plenty of ideas on where to start. (cc)

http://www.theuxbookmark.com/2010/08/interaction-design/a-monster-list-of-ui-guidelines-style-guides


-------------------------------------------------------------------
05. Death to Comic Sans
-------------------------------------------------------------------

Not a day seems to goes by anymore when you don't come across some instance of Comic Sans being used completely inappropriately. Police communications, office memos, church bulletins, restaurant menus: the list goes on. For whatever reason, your average DIY graphic designer thinks that Comic Sans is the perfect font for every occasion.

The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to Comic Sans Criminal, which lays out the reasons why Comic Sans is misused and offers some helpful alternatives. Apparently, the only appropriate uses for Comic Sans are when your audience is under 11 years old, when you're designing a comic and when your audience has stated that they prefer Comic Sans. (cc)

http://www.comicsanscriminal.com/


-------------------------------------------------------------------
06. GiftPush: Customer Rewards Creates Loyalty
-------------------------------------------------------------------

Every successful company knows how vital customer rewards are. In today's market, customers are smarter and more demanding than ever, and they are accustomed to getting rewards in myriad forms from businesses large and small. Retaining customers is much easier than attracting new ones, and while rewarding customers does foster loyalty, starting a full-blown rewards program can be a bit much to handle.

Thankfully, GiftPush takes the pain out of rewarding your customers with gifts. Put a stop to endless email threads about addresses and shirt sizes. GiftPush does all the hard work, including creating the products, obtaining addresses, shipping the goods and running a dashboard to manage your recipients. You also have the option to send your own promotional gifts. So, you can now keep your customers happy! Unfortunately, the service is invitation-based (although you can request an invitation). An excellent idea with a lot of potential. (ar)

http://www.giftpush.com/


-------------------------------------------------------------------
07. Open Wireless Networks For Everybody!
-------------------------------------------------------------------

The gradual disappearance of open wireless networks is a tragedy of the commons, representing a perplexing twist in the privacy and security debate. The Electronic Frontier Foundation intends to reverse the degradation of this indispensable component of the Internet's infrastructure with its Open Wireless Movement. The movement is meant to remind people that opening their Wi-Fi is a socially responsible act, and it explains that individuals who choose to do so can enjoy the same legal protections against liability as any other Internet access provider.

Fon is an initiative with the goal of an open wireless network built by people. Each member of the Fon community agrees to share a bit of their Wi-Fi at home, in return for free roaming at millions of Fon spots worldwide. Why don't we all contribute a bit to make open Wi-Fi everywhere a reality? (tb)

http://www.eff.org/deeplinks/2011/04/open-wireless-movement


-------------------------------------------------------------------
08. Cinemagraph: Animated Photography
-------------------------------------------------------------------

If you ever feel drained, Jamie might be able to help. Jamie collects vintage cameras and old typewriters, and he makes a living off of his photography in New York City, occasionally using film. From Me To You is his impressive photography blog, a collection of scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs.

The author's experimental cinemagraph posts not only seem to come alive, they really do! Your jaw may drop as you scroll through the colorful entries, perhaps catching a model winking at you or seeing those curtains rustled by the wind. Just sit back for a moment and let Jamie take you on a journey. Did a taxi really just drive by? Did this girl in the right upper corner really smile?...

If From Me To You has aroused your interest in the Cinemagraph technique, then pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality. (sp)

http://www.css-101.org/articles/two-layer-image/animated-gif-with-a-jpg-background.php


-------------------------------------------------------------------
09. New on Smashing Magazine
-------------------------------------------------------------------

New WordPress Tips For Template Developers And Consultants
http://www.smashingmagazine.com/2011/05/10/new-wordpress-power-tips-for-template-developers-and-consultants/

Hardware Giveaway: 7,500 Comments Challenge!
http://www.smashingmagazine.com/2011/05/09/hardware-giveaway-7-500-comments-challenge/

How To Get Sign-Off For Your Designs
http://www.smashingmagazine.com/2011/05/06/how-to-get-sign-off-for-your-designs/

Innovative Techniques To Simplify Sign-Ups and Log-Ins
http://www.smashingmagazine.com/2011/05/05/innovative-techniques-to-simplify-signups-and-logins/

Useful Photoshop Tools and Techniques For Your Workflow
http://www.smashingmagazine.com/2011/05/04/useful-photoshop-tools-and-techniques-for-your-workflow/

Using CSS3: Older Browsers And Common Considerations
http://www.smashingmagazine.com/2011/05/03/using-css3-older-browsers-and-common-considerations/

A User-Centered Approach To Web Design For Mobile Devices
http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/

Desktop Wallpaper Calendar: May 2011
http://www.smashingmagazine.com/2011/04/29/desktop-wallpaper-calendar-may-2011/

-------------------------------------------------------------------
10. Smashing Network Highlights
-------------------------------------------------------------------

55 T-Shirts Made Just for Designers
http://designshack.co.uk/articles/graphics/55-t-shirts-made-just-for-designers

How to Use Your iPad for Real Design Work
http://sixrevisions.com/tools/how-to-use-ipad-design/

Python from Scratch: Getting Started
http://net.tutsplus.com/tutorials/other/python-from-scratch-getting-started/

Masonry CSS or Getting awesome with CSS3
http://sickdesigner.com/index.php/2011/html-css/masonry-css-getting-awesome-with-css3/

Creative Brainstorming: 50 Examples of The Logo Design Process
http://www.noupe.com/design/creative-brainstorming-50-examples-of-the-logo-design-process.html

Responsive Data Tables
http://css-tricks.com/responsive-data-tables/

Understanding and Using Embedded Fonts: What, Why and How?
http://www.onextrapixel.com/2011/05/03/understanding-and-using-embedded-fonts-what-why-and-how/

15 Useful Twitter Plugins For WordPress
http://webdesignledger.com/tools/15-useful-twitter-plugins-for-wordpress

Object-Oriented PHP: Delving Deeper into Properties and Methods
http://www.elated.com/articles/object-oriented-php-delving-deeper-into-properties-and-methods/

Creating A Rocking CSS3 Search Field
http://www.hongkiat.com/blog/css3-search-field/


-------------------------------------------------------------------
11. Smashing eBooks
-------------------------------------------------------------------

eBook #8: Mastering Photoshop for Web Design VOL 2, $9,90 (new)
https://shop.smashingmagazine.com/smashingbook-dispatcher.php?d=smashing-ebook-photoshop2

The Smashing eBook Super Bundle, $69,70
https://shop.smashingmagazine.com/smashingbook-dispatcher.php?d=smashing-ebook-super-bundle

The Smashing Book #1 | Digital Edition, $14,95
https://shop.smashingmagazine.com/smashingbook-dispatcher.php?d=the-smashing-book-1-digital-edition

eBook #7: Professional Web Design, Vol. 2, $9,90
https://shop.smashingmagazine.com/smashingbook-dispatcher.php?d=smashing-ebook-web-design-2

Smashing eBook Bundle (3–7) - $39.50
https://shop.smashingmagazine.com/smashingbook-dispatcher.php?d=smashing-ebook-bundle-3-7

eBook #2: Successful Freelancing - $4,95 (reduced price)
https://shop.smashingmagazine.com/smashingbook-dispatcher.php?d=smashing-ebook-successful-freelancing

eBook #1: Professional Web Design - $4,95 (reduced price)
https://shop.smashingmagazine.com/smashingbook-dispatcher.php?d=smashing-ebook-series-1-professional-web-design


-------------------------------------------------------------------
About and Contact
-------------------------------------------------------------------

Please do not reply to this newsletter. Newsletters are processed automatically. Our software will not understand your concern. Please use the contact form instead.

The authors are: Iris Kopic (ik), Christina Sitte (cs), Stephan Poppe (sp), Thomas Burkert (tb), Cameron Chapman (cc), Robin Schulz (rs), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Andrew Lobo (proofreading).

Unsubscribe
http://smashingmagazine.us1.list-manage1.com/unsubscribe?u=16b832d9ad4b28edf261f34df&id=62f9f9e407&e=54cfdd29ef&c=1f910f225a

Change address
http://smashingmagazine.us1.list-manage.com/profile?u=16b832d9ad4b28edf261f34df&id=62f9f9e407&e=54cfdd29ef

Online archive
http://us1.campaign-archive1.com/?u=16b832d9ad4b28edf261f34df&id=1f910f225a&e=54cfdd29ef

Produced by Smashing Media GmbH - Werthmannstr. 15 - 79098 Freiburg - Germany - Amtsgericht Freiburg: HRB 704836.
http://www.smashingmagazine.com/about/

0 comments:

Post a Comment