Issue #86: CSS meets UX, and ASCII art is back!

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

Issue #86 | Tuesday, June 11th 2013 | 156,423 subscribers | Previous issues Dear Friends, You've probably already heard — the Smashing Conference is on its way! Two single-track conference days, three full-day workshops, 16 excellent speakers, and only 300 available seats. We'll be announcing more information via @smashingconf in the upcoming weeks — be sure to stay tuned via the SmashingConf 2013 website, too! We'd be honoured to welcome you in our home town Freiburg, on September 9–11th 2013, at the foot of the legendary, beautiful Black Forest in Southern Germany. Let us know whether you'll be attending via Twitter using the hashtag #smashingconf! We look forward to meeting you, The Smashing Team Table of Contents 01. CSS Tube Map 02. A Converter Tool For Multiple Mobile Densities 03. Branding Lessons From The Master 04. Hide And Show Passwords On Demand 05. Merging Loading Indicators To Improve UI 06. ASCII Art Is Back 07. 100 Cameras In Pixels 08. Smashing Highlights (From Archives) 09. New on Smashing Job Board 10. Recent Articles On Smashing Magazine 1. CSS Tube Map The iconic Tube Map of the London Underground network can be found on an infinite number of souvenir articles and has also inspired many artists and designers. One of these is CSS Tube Map, which displays a replica built in HTML5 and CSS3 (and a tiny bit of jQuery). It uses no images so even the symbols are styled and arranged with CSS. Each tube line consists of an unordered list, stations and connections (including name and symbol) are list items. The project by John Galantini was completed in five weeks, in about 120 hours of his spare time. All elements are positioned absolutely. It's definitely not be the most practical CSS example to be used in your projects, but the effort is worth commending. Be prepared, though: you probably have never seen so many... creative HTML elements on a website. (ml) 2. A Converter Tool For Multiple Mobile Densities Displays with high densities have been around now for some time and they definitely came to stay. Although this development is greatly enhancing the quality of our screens, at the same time it can create some headache for designers and developers who are determined to provide a great experience for all of their customers using every type of screen resolution. Keep in mind that it is not just about Retina and non-Retina displays; Android devices have evoled from low density, ldpi, all the way to extra high density, xhdpi, as well. Travis from Teehan-Lax has set out to make this task easier. In his article on "Designing For Multiple Mobile Densities", he explains the complexity and the variety of high density displays (just in case you haven't learned that much about the issue so far). It's time to dismiss your calculator! Simply type in height and width of any density and instantly see the dimensions of the other densities. It currently supports the major density groups: non-retina/mpdi, hdpi, retina and xhdpi. (ml) 3. Branding Lessons From Google How exactly does a brand like Google become so strong? What are the secrets behind creating a memorable, consistent brand identity? And in general, how does Google, as a large company, shape their brand? If you'd love to find out, then lucky you! You now have the chance to take a peek at the principles that Google's designers apply when they create their icons, logos and illustrations — the Google Visual Assets Guidelines - Part 1 and Part 2. Geometric shapes, front facing and pixel-perfect icons – these are just some of the formulas that you'll come across in Google's lesson on brand shaping. You'll also be able to see some very interesting examples of how-to's and how not-to's, and even find out about fine details such as Google's icons proportions and color palette. The resource is essentially a case study by Creative Lab, a design agency that has created a set of guidelines which help Google's designers and vendors to produce high-quality work and also helps strengthen Google's identity. A very concise and informative breakdown of guidelines which all serve to maintain Google's branding concept of visual coherence. (ea) Advertisement 4. Hide And Show Passwords On Demand We usually take it for granted that whenever we enter a password the only thing we get to see are little dots instead of characters. Although this can be a a real struggle, especially on a mobile device, most designers still stick to that convention. But perhaps the benefits of this default aren't as high as we thought. As Luke Wroblewski documented last November, masked passwords increase login failures while not providing any further security. So what to do then? A nice alternative for starred out passwords comes from Tyler Sticka and the team at Cloud Four: hideShowPassword. Once implemented (both jQuery and Zepto plugins are available), you can let your users decide whether they want to have their password displayed or not during the login process. What's really nifty about hideShowPassword is the "innerToggle" feature showing a hide/show control inside the input field. You can style it as you like, with some text or even a symbol. The plugin is waiting for you on GitHub. (cm) 5. Merging Loading Indicators To Improve UI You know the drill: A user patiently fills in a Web form, submits the data, and finds herself staring on a grey lightbox with a progress bar, or perhaps a semi-transparent circle that looks a bit like real-time auto-update. What happened to the data? Is it being submitted? Submitting data is a very crucial moment in the user experience, so leaving users wondering what's going on probably isn't a good idea. Perhaps we can do a bit better than that. A perfect example is Hakim El Hattab's Ladda, a UI concept which merges loading indicators into the action that invoked them. This means that when a user clicks on a submit button, the button itself changes, providing users with an immediate feedback upon submit. The tweak might be very subtle, but it does make the experience a bit smoother. Definitely worth bookmarking! (vf) 6. ASCII Art Is Back Have you ever stumbled upon an interesting Easter Egg waiting for you in the source code of a website? Well, this is probably not something you should do in production code, but if you do want to give your code some personality, why not try out something... different for a change? Let's say... adding ASCII art welcome mats for HTML on your own blog or side project? WelcomeMat is a resource dedicated to just that. You can copy and paste ASCII art into your code, and you can also contribute your own ASCII mats. The project came out of an experiment by Zac Halbert on creating a responsive prototype using Jekyll, Foundation and SASS/Compass. And according to him, he learned a lot along the way. Advertisement 7. 100 Cameras In Pixels Take a guy whose desire is deeply rooted in nostalgia and who has a passion for making pixel art and put one and one together. You will get something like The Camera Collection. You got to be serious to come up with these 100 pixelated camera illustrations. You got to be Bill Brown. Bill is a guy who makes long, rambling videos of getting himself a haircut every year. Besides, he's a graphic and Web designer who must be more than loving what he's doing. You can easily kill hours scrolling through all his amazing creations. Besides his camera collection, he also made a New Orleans houses and 8-bit videogames pixel collection. All of them are free to download under a Creative Commons license. You can do anything with them, but please give Bill credit somewhere. (ea) 8. Smashing Highlights (From Archives) Principles Of Minimalist Web Design Minimalism is achieved by reducing a design to only the most essential elements. Expressions of minimalism span multiple disciplines, as well as other art forms such as music and literature. For website designers, though, minimalism can be intimidating and difficult to master. The Process Behind Good Illustration "Art" is something philosophers have spent centuries trying to define, sadly with no satisfactory result (a debate that is far beyond the scope of this article). But illustration, while it covers a broad range of image-making, does have very distinct meanings, and it is very different from just artwork. Applying Interior Design Principles To The Web Web, industrial, interior… You name it and there are designers for it. We're all trained in our particular areas (as we should be), but it would do us some good sometimes to look beyond our borders for new approaches to design problems. This article covers several interior design principles and how to apply them to Web design. 9. New on Smashing Job Board Here are the job openings published recently at our very own Smashing Job Board: Lead Front-End Developer at Mighty Engine (Philadelphia) We are a well-established, Old City-based marketing communications agency seeking an experienced developer to lead the web department of our creative team. Mobile Product Designer at GetYourGuide (Berlin, Germany) We're looking for smart, inspired people to join our international team in the heart of Berlin. If you want to take a front seat in shaping the trajectory of a young company, GetYourGuide is the place for you! Interactive Producer at National Abortion Federation (Washington) NAF is seeking a full-time, in-house, creative, dynamic, and tech-savvy individual to serve as our Interactive Producer. This individual will combine a strong background in web design with a broad understanding of new technologies and online communications. 10. Recent Articles On Smashing Magazine SmashingConf: A Community Event That Will Change Everything Gone In 60 Frames Per Second: A Pinterest Paint Performance Clown Car Technique: Solving Adaptive Images In RWD Desktop Wallpaper Calendar: June 2013 Tips And Tricks For Testing WordPress Themes The State Of Responsive Web Design Open Device Labs: Why Should We Care? The Smashing Magazine 2013 Photo Contest Join our community: follow us on Twitter and join us on Facebook Sent to our truly smashing readers. Thank you for your support. Smashing Media GmbH. Contact us at: newsletter[at]smashingmagazine{.}com. The contributors are: Vitaly Friedman (vf), Iris Lješnjanin (il), Cosima Mielke (cm), Esther Arends (ea), Melanie Lang (ml), Christiane Rosenberger (research). unsubscribe | update preferences | view it in your browser

Issue #85: Have you refactored your code today?

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

Issue #85 | Tuesday, May 28th 2013 | 154,343 subscribers | Previous issues Dear Friends, Over the last few weeks we've been working on performance improvements for Smashing Magazine — optimizing CSS/JavaScript, refactoring and cleaning up the code base. As a result, you will hopefully notice a slight speed improvement and faster loading times. As it is, refactoring usually means that code is being rewritten, so you have to be able to quickly toggle between old and new code snippets to see if refactored code does what it's supposed to do. So how do we do it efficiently? Aleander Brevig has shared his comment toggle trick to solve this very issue. Essentially, by using an extra backslash at the beginning and at the end of your code snippet, you can toggle between two sets of code, by changing one symbol in the code, with no additional short-keys to learn and no tool dependencies. That's a clever technique; however, you do need to remember it first. What tricks are you using for refactoring? P.S. We've also been fixing quite spectacular ePUB bugs using a similar technique for our eBooks when testing them in Nook and on iBooks for our Smashing Library. What problems have you run into and how did you solve them? Share them using the hashtag #smrefactoring! Sincerely yours, The Smashing Team Table of Contents 01. Apps And Tools For Creative Professionals 02. For The Love Of Letterpress 03. Button, Button, Where Goes The Button 04. A Bunch Of Animated Dribbble Shots 05. A Fast And Easy Way To Share Emails 06. Retro Games Reinvented, In The Browser 07. The Secret Colors Of Movies 08. Sqwiggle: Remote Working, Made Awesome 09. Smashing Highlights (From Archives) 10. New on Smashing Job Board 11. Recent Articles On Smashing Magazine 1. Apps And Tools For Creative Professionals Often, creative professions don't involve as much creative play as we might wish, just the more serious business work. Deadlines need to be met, clients want to be satisfied, and project management plans must be arranged — all things art school probably never prepared you for. To simplify these tasks, the team behind 4ormat has put together a great resource filled with apps and tools to help you increase your productivity and creativity: Damn You Art School. The site features six different toolkits, each one filled to the top with productivity and creativity apps, tools and resources. Whether you're a communication designer, illustrator or even photographer, there is a toolbox tailored specially to your profession's needs. The virtual drawers are neatly labeled, covering every possible aspect of your work, from collaboration and client communication to accounting and invoicing. Save time getting the necessary stuff done and spend some more time living out your creative passion. Sounds good, doesn't it? (cm) 2. For The Love Of Letterpress "Nothing you truly care about can be made by a nameless face in a far flung country and left out in the rain on your porch the next day." There are people in this world who truly care about devoting their attention to long-forgotten machines, and paper being squeezed by tons of iron — people who love letterpress. This love is what The Beauty of Letterpress is all about. Brought into life by Neenah Paper, The Beauty of Letterpress features the best and most innovative letterpress work in the industry. Just like a subtle letterpress print, the website reveals all its fine details when you look closer. It features the work of well-recognized designers and also presents you with a number of insightful videos on letterpress process and printing. In addition, The Beauty of Letterpress wants to help the Hamilton Wood Type & Printing Museum in their efforts to relocate and preserve their matchless piece of history. Anyone can donate by ordering a print from one of the site's monthly issues, or lots of other paper goodies. The money will all go to the museum, towards moving palettes, packing and storage materials, sorting and cataloging the museum's inventory and the like. For the love of letterpress. (Quote by Workhorse Printmakers) (ea) 3. Button, Button, Where Goes The Button Common Misconceptions About Touch isn't new guidelines for inter-personal contact, it's the title of Steven Hoober's article on designing for touchscreens. Of course, there are many articles and guides out there that deal with the same subject, yet this one delivers what it promises. In his article, Steven deals with details as simple as thumb size, as well as with logical conclusions, such as that placing the delete-your-account button next to the check-your-messages button is a recipe for disaster. He also includes some very handy size guidelines to use when designing for phones and tablets. All in all, this article is 15 minutes of well-spent reading. (jc) Advertisement 4. A Bunch Of Animated Dribbble Shots If you love animations, then you got to check out GUIFFF, a collection of animated Dribbble shots curated by Jan Cantor. Looking at these designs might turn any animator green with jealous rage, but isn't jealousy so inspiring? If you care to know more about the designs and the people behind, just click on the gif to go to the original post on Dribbble. For those of you who are eager to design something like this, it might be worth checking out the comments section below the original posts. Here, some of the designers tell us which tools and software they used to create the gifs, and in some cases even provide tutorials and project files. GUIFFF is a great source of inspiration for anyone who wants to take UX and UI to the next level. (ea) 5. A Fast And Easy Way To Share Emails Sharing beautiful HTML emails can be a real pain. Simply forwarding them can break the code, screenshots are time-consuming and annoying. Scope is a free tool to solve those problems. It creates a clean, Web-based version of any email and even lets you view the desktop and mobile versions. Simply drag the bookmarklet into your browser toolbar or download it for Mac. It will then present your email in HTML or text-only. But instead of simply providing a clean screenshot, it lets you scroll down like you would on an actual device. Scope is perfect to share great emails or show off your own projects. (ml) 6. Retro Games Reinvented, In The Browser Ah, the good old days! Do you remember those sleepless nights when you eagerly played in front of your Game Boy, trying to move that poor, tireless game character to the next level in the game? Well, if you miss those times, you can easily relive them online, in your browser. Pica-Pic is a digitized collection of handheld electronic games, including the legendary Donkey Kong, Penguin Land, Parachute, Caveman and of course Zelda. Now that's something to save for a slow weekday evening! (vf) Advertisement 7. The Secret Colors Of Movies Remember the first time you watched Amélie by Jean-Pierre Jeunet? That warm, fuzzy feeling accompanying you throughout the film. If you're an art movie buff, you know that this is due to Jeunet's very distinctive color palette style. Always a yellowish, greenish tint. Color creates mood. Now you can let yourself get inspired by the color palettes of iconic movies on Roxy Radulescu' blog. Radulescu's Movies In Color blog features a new movie still every day with its associated color palettes. The idea is to provide inspiration to artists deciding on color palettes for their paintings, films, videos and graphic design. Radulescu chooses a new still every day and, using Photoshop, distills the most worthy colors from it. If you have any requests, feel free to write her. (jc) 8. Sqwiggle: Remote Working, Made Awesome Working from home is pretty trendy right now and is expected to become even more popular over time. Sqwiggle is a handy new tool that promises to make remote working a lot better because it gives your team the ability to to communicate effectively and bond with each other, even if you're physically separate. While Skype and Google Hangout offer a service that is call-based and relies on someone setting up a meeting, Sqwiggle can run the whole day. It takes several snapshots per minute while you're working and your team members can see if you're on the computer or not. This gives you a sense of having a community around you which is as close to an office atmosphere as it can get. You also have the option to display a busy note if you want people to be prevented from contacting you. So far there's a Web version and a Mac client, but Windows and Linux should be supported in the future. Join now and save, with a lifetime 45% discount. (ml) Advertisement 9. Smashing Highlights (From Archives) Modern CSS Layouts: The Essential Characteristics After years of what felt like the same old techniques for the same old browsers, we're finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs. But all of this change can be stressful, too. How do you keep up with all of the new techniques and make sure your Web pages look great on the increasing number of browsers and devices out there? VI Editor / Linux Terminal Cheat Sheet (PDF) This post features a VI Help Sheet, a cheat sheet for the VI Editor, for all web-developers out there who are working on Linux. The help sheet was designed by GoSquared and released for Smashing Magazine and its readers. The Dying Art Of Design Progress is good, but we need to make sure that we're progressing in the right direction. Our fundamental skills and the craft of design have started to take a back seat. Using the right tools and techniques is certainly an important part of design. But do our tools and resources make us better designers? 10. New on Smashing Job Board Here are the job openings published recently at our very own Smashing Job Board: Web Developer at WellnessFX (San Francisco, CA) WellnessFX is looking for an engineer with skills in front-end web development and implementation and a passion for building great web-based user interfaces. You'll be building pages that change consumer behavior and help to productize our cutting-edge diagnostics dashboard for the $50 billion health information technology market. Senior Game Systems Designer (f/m) at YAGER Dev. GmbH (Berlin, Germany) YAGER is currently seeking a talented and experienced Game Systems Designer to join our pre-production team of yet unannounced title. Join us in shaping the direction of the project as a driving force in Systems Design and push the boundaries to deliver a unique user experience. Creative Web Designer at ADP (Cambridge, MA) At ADP we are driven by your success. We engage your unique talents and perspectives. We welcome your ideas on how to do things differently and better. In your efforts to achieve, learn and grow, we support you all the way. If success motivates you, you belong at ADP. 11. Recent Articles On Smashing Magazine The Smashing Magazine 2013 Photo Contest 50 Design Problems In 50 Days: Real Empathy For Innovation Beyond The Button: Embracing The Gesture-Driven Interface Building The New Financial Times Web App (A Case Study) Designing CSS Layouts With Flexbox Is As Easy As Pie Exploring Ten Fundamental Aspects Of M-Commerce Usability Typographic Design Patterns And Current Practices (2013 Edition) Migrating A Website To WordPress Is Easier Than You Think Providing The Best Mobile User Experience Possible Psst! Smashing Magazine Is Looking For A Senior Editor! The Smashing Editor's Choice: A Free eBook Join our community: follow us on Twitter and join us on Facebook Sent to our truly smashing readers. Thank you for your support. Smashing Media GmbH. Contact us at: newsletter[at]smashingmagazine{.}com. The authors are: Cosima Mielke (cm), Esther Arends (ea), Jan Constantin (jc), Melanie Lang (ml), 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

Latest Smashing Releases And Workshops

Our lovely Smashing eBook Library is growing! We've prepared two new eBooks on "Designing Mobile Apps" and "Responsive Web Design". Besides, we also have new full-day Smashing Workshops lined up — this time in the German capital, Berlin! 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 subscription, Immediate unlimited access to all published Smashing eBooks, Vote on the upcoming Smashing eBooks and topics in the Library, for only $99/€89 per year! Sign Up!Great eBooks for great Web designers. Latest Additions To The Smashing Library: "HTML5 Boilerplate Web Development" by Divya Manian "HTML5 Boilerplate Web Development" is a practical guide rich with information on getting the best out of the boilerplate. It takes you through a step-by-step process of creating a website and teaches you to take full advantage of the defaults provided within HTML5 Boilerplate. This eBook is exclusivly available for the Smashing Library subscribers. Read more → "Responsive Web Design" and "Designing Mobile Apps" by Smashing Authors We're happy to present two new Mobile Design eBooks: "Designing Mobile Apps" and "Responsive Web Design". Some step-by-step coding tutorials will take you by the hand, as will exciting new techniques that go beyond the usual. You will also learn how to go from non-responsive layouts to optimized responsive mobile experiences. Read more → Smashing Workshops In Berlin: Eva-Lotta Lamm: Sketching Beyond Boxes and Arrows • (Sep. 30th 2013) Do you think you can't draw? Do you wish you could confidently walk up to a whiteboard and sketch your ideas out in front of your colleagues? Do you wish the users in your storyboards were a bit more lively than just skinny stick men? Vitaly Friedman: Responsive Design, Clever Tricks & Techniques • (Sep. 30th 2013) In this full-day workshop, Vitaly Friedman (editor-in-chief of Smashing Magazine), will present practical techniques, clever tricks and useful strategies one needs to be aware of when working on any responsive design project. Eva-Lotta Lamm: Sketching Interfaces • (Oct. 1st 2013) Sketching is a core skill and tool of any designer. It is a quick and cheap way to ideate, develop and iterate on possible design solutions, both alone and with a group. You will take a closer look at when and how to use sketching in the design process and how to make your sketches communicate more clearly and efficiently. Jonathan Snook: Scalable and Modular Architecture for CSS • (Oct. 1st 2013) This workshop will shift how you think about writing CSS that will simplify your code, make your project easier to manage, and allow it to grow without creating an increasingly brittle system of dependencies. Your code will also be more portable, making it easier to use code on other projects. Join our community: follow us on Twitter and join us in Facebook! Sent to our truly smashing reader. Thank you for your support, Smashing Media GmbH. Contact us at orders[at]smashingmagazine[dot]com. Edit your subscription | Unsubscribe Sorry, but why am I receiving this? If this email is not displayed properly, view the online version.