Issue #56 | Tuesday, April 3rd 2012 | 104,121 subscribers | Previous issues
Editorial
Dear Readers,
In today's newsletter issue, we'll be covering a credit card number validator, a type-matching game as well as a privacy policy generator. In the latest issues, we've focused more on valuable practical tools and techniques, and balanced them with useful inspirational pieces.
In case you still haven't planned anything special to do in the last week of April, we're giving away 3 tickets to the Front-Trends Conf in Warsaw, Poland. Simply tweet us @smashingmag using the hashtag #front-trends and tell us why you'd like to be there! Or, if you'd like to attend MAD 2012 Conf in Spain, tell us why you want to go there! We have 1 ticket waiting for you, too (please use the hashtag #mad2012). The winners will be announced on the 6th of April on Facebook and on Twitter.
By the way, the winner of the RE:DESIGN conference ticket is Jason Kozel from Texas, USA. Congrats, Jason! High five!
Thank you for reading, and we hope that you'll find this issue helpful and inspirational!
Yours sincerely,
The Smashing Team
Table of Contents
01. Free Font: Plastic Type
02. A New Responsive Design Process: Style Tiles
03. jQuery Credit Card Validator
04. Get Smaller JPEGs While Maintaining Quality
05. Privacy Policy Unlimited
06. A One Of A Kind JS Regular Expression Library
07. Publishing Made Easy
08. Type Connection
09. Positive Messages Through Illustrations
10. Smashing Highlights (From Our Archives)
11. New on Smashing Job Board
12. Recent Articles on Smashing Magazine
1. Free Font: Plastic Type
How creative can you become with type design? Since ancient times up to the digital era, many possibilities and techniques were developed to make written communication not only possible, but also effective and versatile. Besides of its functionality, other qualities of typography were spotlighted throughout time. The designers Luis Armesilla and Christian Del Moral chose to explore the "fun" aspect of it, and created the free font PLSTK.
The design was inspired by the plastic industry; the designers wanted to explore how they can use the various forms, shapes and imperfections of plastic within their design. The result of their experiments is a freely available, beautiful, playful font, which is released under Creative Commons Attribution Share Alike license. You can use the font for commercial as well as non-commercial purposes. Explore another playful side of design with this typographic toy. (tt)
2. A New Responsive Design Process: Style Tiles
Responsive design is hard. As Andy Clarke puts it: "Responsive Web design challenges everything we know about Web design for everybody involved in the process." And this relates to wireframes and mock-ups as well. How do you present your responsive design to a client? Do you have to design a plethora of mockups for the different responsive breakpoints? No, you don't.
Samantha Warren has developed a new design process "Style Tiles" to simplify and quicken the visual Web design process for clients. While moodboards are usually too vague for clients, and mockups too precise as well as time-consuming for designers, how about using something in-between? Samantha proposes to use a deliverable design consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the Web. She provides a free PSD template as well.
This way the the designer can have an easier time translating the clients' preferences into a rough design concept, without necessarily going into exhaustive details. As a designer, you won't have to condemn part of your creativity to the recesses of your recycling bin. (jc)
3. jQuery Credit Card Validator
If at some point you'll need to develop a secure payment gateway, you might run into the problem of validating credit card numbers. In fact, implementing such validation isn't that easy, because you need to first understand the different credit card types and then make sure that the number length and Luhn checksum are valid for that type of card. Good news: you don't have to build it from scratch.
jQuery Credit Card Validator is written in CoffeeScript. It attaches to the input event (with a fallback to the keyup event) and so every time a number in the input field changes, it calls a validation function. When a card is recognized, the credit card type is highlighted; and when the credit card number is correct, it is highlighted with a green checkmark as well. The plugin supports American Express, Diners Club, Discover Card, JCB, Laser, Maestro, MasterCard, Visa and Visa Electron. (vf)
Advertisement
4. Get Smaller JPEGs While Maintaining Quality
If you have a website with a lot of large images, you might suffer from slower loading times and high bandwidth usage. There are many optimization tools out there, and often you end up saving your JPEGs at a lower quality with hope that your visitors don't notice. If you need to compress JPEG files often, you might want to give JPEGmini a try.
The developers of the tool claim that their algorithms make images up to 5× smaller than the originals. JPEGmini works by analyzing the input image using a quality detector that imitates the human visual system, and based on this analysis, applies the maximum amount of compression while avoiding visible artifacts. In user tests, it turned out that average users could not distinguish between original photos and JPEGmini photos. Of course, actual results vary based on specific images. But you might want to give this tool a try, and try to reduce the loading time of your Web pages without a significant quality loss. (cc)
5. Privacy Policy Unlimited
It may be one of the most boring things to include in a website, but it's absolutely necessary—the privacy policy. Nobody likes these page-long paragraphs that are set in unreadable, small font sizes. Just ask yourself: have you ever actually read one? Privacy Policy Generator now offers a quick and easy way to get a stylish privacy policy set up—and one that is actually visually appealing.
The offered privacy policies are simple to read, offer multiple language support, and are tailored to your needs by a professional legal team. The only thing you need to provide are the services that your website uses to collect any information from your visitors—be it Google Analytics, Facebook, Disqus or any other service. You can use either the free or the pro version of this service. The generated privacy policies incorporate useful design, usability and information architecture—use it. (sp)
6. A One Of A Kind JS Regular Expression Library
Regular expressions are probably the most powerful tool for dealing with text processing. But have you ever scratched your head over certain features that you miss in regular expressions? Or perhaps you've been running into nasty cross-browser inconsistencies when dealing with them? Well, don't look any further. XRegExp is an open source JavaScript library that solves those inconsistencies for you and also provides new syntax, flags and methods for regular expressions.
The library adds new regex and replacement text syntax, two new regex flags and provides a suite of functions and methods to make complex regex processing easier. Among other things, it has a comprehensive support for capture names (e.g. the characters A–Z, a–z, 0–9, _, and $. It also supports using plugins that add new syntax and flags to XRegExp's regular expression language. XRegExp is fully compliant with the regular expression flavor specified in ES3 and ES5, and works with Internet Explorer 5.5+, Firefox 2+, Safari 3+, Chrome and Opera 9.5+. (cc)
Advertisement
7. Publishing Made Easy
You love to write. You even have your own website, reviewing movies, books or just musical events at your favorite watering hole. In the morning you wake up, sit down to communicate your thoughts, then open your office program, your Web browser, log in to the interface of your CMS, and then realize you forgot that awesome opening line during the tedious log-in procedure. In your funk, you start to notice the little flaws in your design, and it all starts to feel worse.
Andreas Carlsson and Jaan Orvet have created a publishing platform that allows you to auto-publish your articles by simply saving them in your Dropbox. You write in a text-file, you save it and then Skrivr converts it to valid HTML and automatically publishes it. Skrivr lets you create an easy-to-use, adaptive website, with pre-built themes. Thanks to advanced typographic features, you can have a much more responsive website that adapts to screen sizes and orientations. And if you'd rather use your own domain with Skrivr, you can do it, too! All-in-all, Skrivr promises an easier publishing experience, which can make publishing much less daunting. An interesting idea; only a beta-version is available for now. (jc)
8. Type Connection
A good relationship can be characterized as two people that fit together. Aura Seltzer adopted this idea for her game Type Connection, which was her MFA thesis project. In this game, you are a procurer who mates different typefaces. Each typeface is a lonely character searching for love—so your job is to find its perfect partner.
First you choose a base character. Then you take one of four strategies to find a couple for your character. You can choose between various pairing types, such as "rely on family", "seek the similar", "embrace the other" or "explore the past". The first strategy gives you information about the font family. If you use the "seek the similar", you would bring similar looking characters together. "Embrace the other" is for pairing very different styles together. And with "explore the past", both typefaces show a common origin. In the next step you would get three typefaces and must choose one pair for the base character. By playing this game you will not only explore type history, but also learn typographic terms, while actually learning how to pair typefaces. (sv)
9. Positive Messages Through Illustrations
There are many ways to give good advice: nice words, a lovely melody, poetry… and sometimes a simple illustration can help to deliver the message. This project features posters that were designed by artists and designers worldwide with one simple purpose: to send a good message out into the world.
Positive Posters is an Australian-based non-profit organization that aims, with the support of designers, to raise international awareness for global social issues. Among many examples you will see graphics about womens' rights, social equality, anti-smoking, democracy, campaigns against nuclear energy, etc. Each of them is accompanied by a small tagline that makes sure the audience gets the message—beautiful messages presented in a beautiful way. (tt)
Advertisement
10. Smashing Highlights (From Our Archives)
CSS3 vs. CSS: A Speed Benchmark
Trent Walton believes in the power, speed and "update-ability" of CSS3. Not having to load background images as structural enhancements (such as PNGs for rounded corners and gradients) can save time in production (i.e. billable hours) and loading (i.e. page speed). This article elaborates on a fictitious Web page for Mercury Automobiles that was designed to showcase specific widely compliant CSS3 properties that would have had to be achieved using background images in the 1950s.
Free PNG Credit Card, Debit Card and Payment Icons Set
This icons set includes 18 different payment icons in PNG format and has been released free of charge. This set was designed by Phil Matthews and are intended for you to show what types of payment your website accepts.
Web Designer, Be Your Best Promoter
Have you ever had someone flirt with you and they did nothing but demean themselves the whole time? Did that make you attracted to them? Doubtful. Yet, this is how so many individuals seem to handle their business today. In this article, Paul Scrivens names a good number of do's and don'ts.
11. New on Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
UI Designer at Games Mediatonic (London, UK)
Have you ever wanted to work in a central London studio with a bunch of windows, stairs and air conditioning? What about one where you get to make games with a group of talented and hard-working individuals that span a wide range of genres and platforms- from Facebook and Flash to the Playstation Network, Xbox Live and iOS? Send your application to Mediatonic today!
UI Designer/Developer at Sports Technologies, LLC (Collinsville, CT)
Are you passionate about great web design, compelling user experiences, and sports? Are you obsessed with crafting pixel-perfect designs and beautiful CSS and markup? Are you a sports fan who would love the opportunity to work with a tight-knit team building the next generation of online sports applications? If you answered yes to all of the above, then Sports Technologies has an assignment for you!
Web Coordinator at Straight North (Oak Brook, IL)
Straight North is seeking a talented Web Coordinator who would be responsible for working with client-facing project managers to sort out project deliverables and deadlines. If you are extremely organized, deadline oriented and possess project management experience, then wait no longer and submit your resume asap!
12. Recent Articles on Smashing Magazine
No comments:
Post a Comment