Newsletter #135: Freebie, Front-End Techniques and Type Specimens

With free stock photos/videos and advice on design and legal documents. Issue #135 • Tuesday, April 21st 2015 • 180,328 readers • View in the browser

Dear Friends, Have you been hearing Google's drum roll these past few days? Well, starting from today, Google has announced earlier this year that it will be using mobile-friendlinesss as a ranking signal, just like HTTPS. If you already provide an optimized mobile experience, you should be benefiting from it starting today. Google has clearly stated that it's in favour of a responsive design approach, yet two in eight websites are not responsive. To get started, you may want to test your pages, and make sure that your visitors are getting the content that they need, when they need it. It makes you wonder however just how much impact exactly mobile-friendliness is going to have on the overall search results. I guess we'll find it out soon. Happy optimizing! – Vitaly (@smashingmag) Table of Contents 1. Let's Get To The Bottom Of… Git! 2. Exploring The Library Of Type Specimens 3. Free Stock Photos And Videos 4. Common CSS Issues, Creatively Solved 5. Helium: Multitasking With Ease 6. Get Your Accent In Order! 7. Advice On Design 8. Fresh Freebies To Spice Up Your Toolbox 9. An ABC Of London 10. A Free Agreement Generator 11. 9 Designers, 9 Squares 12. Keep Calm… And Attend A Smashing Workshop! 1. Let's Get To The Bottom Of… Git! At first, Git might sound like a complex and difficult beast, but if you've ever overwritten an older version of your mock-up or code, or lost some files, you will appreciate the reliability of version control. In fact, Git has become one of the major tools for dealing with exactly this issue, and if you want to boost your workflow, Git is going to be a massive life- and time-saver. You need to understand a few concepts and commands first, though. So you could start learning version control with Git, perhaps step by step. If you're looking for a solution to a specific problem, you could check first aid git, a searchable collection of the most Git-related frequently asked questions, or check the most common git screwups/questions and solutions; for instance, to find out how to undo commit before push, or combine two or more commits. And if you have to deal with extremely large files, you can use Git large file storage for versioning large files. No more lost or overwritten files! (vf) 2. Exploring The Library Of Type Specimens There is something captivating and almost magical about old type specimens — seeing how a typeface was born and evolved over time. It's great that passionate type designers and type aficionados care about those specimens, bringing them over to one central place and sharing them with all of us. Library of Type is one of those projects: a Tumblr archive of type specimens, ranging from the early 19th century to late 20th century. If you stumble on a specimen yourself, or discover it in a library nearby, submit it — people like you will appreciate it. (vf) 3. Free Stock Photos And Videos What would the web be without images and interactive videos? The answer is quite simple: definitely not as interesting as it is now. But where should you look if you're trying to bring your content to life? Well, why not look into royalty-free image libraries like Pexels (and many others) that has a huge collection of free stock photos. And if that isn't enough, there's also Pexels Videos that offers free stock videos. You can edit or change the videos and use them free for personal and even commercial projects. Another great resource if you're looking for videos to remix, transform and build on for any purpose (even commercially) is Mazwai. All the videos there are downloadable and under an attribution license (CC BY 3.0); all you're kindly asked to do is give appropriate credit, provide a link to the license, and indicate if changes were made. Bookmarked! (il) Advertisement 4. Common CSS Issues, Creatively Solved We always run into front-end issues that require a creative approach. For example, what if you have a complex tax guide with hints, notes and validation errors, but you don't want them to be copied to the clipboard when users want to copy a part of the guide? Is there a way to prevent an element from being selected and copied with CSS alone? Yes, there is: pseudo-elements to the rescue. Content displayed on a page using content is never added to the DOM, which prevents the text from being selected or copied. Unfortunately, screen reader support for the content property is not consistent. And if you want to establish precise control over responsive typography, why not combine calc() and viewport units to create fluid type within a specific viewport range. In some situations, font-size: calc(2em + 3vw); could do just the trick, and avoid maintenance issues down the road. Support for viewport units is getting traction as well. Just two interesting techniques to keep in mind for your next project. (vf) 5. Helium: Multitasking With Ease Everyone loves a nifty tool to improve their workflow. So have you already heard of Helium? Built by Jaden Geller, Helium is a floating, translucent browser window for Mac OS X that allows you to watch media while you work, and the best part: your content won't fall behind other windows, even as you switch tasks. Useful for all kinds of multitasking, Helium stays above the rest, always in sight, but it won't intercept your mouse clicks in the underlying window either, so you can still click, drag and scroll, staying focused on your current work. Watch a tutorial while programming or keep your collaboration tools open while doing video calls — there are many use cases where the translucent window could come in handy. To interact with the browser again, just click the icon in the dock and you're back in control. Nice! (cm) 6. Get Your Accent In Order! Good typography is not only about finding the right typeface but also using the characters properly. Quote marks, dashes and hyphens in particular are often used incorrectly. Jeremiah Shoaf has put together a nice typography cheatsheet that will help you avoid mistakes and use typography properly. The single-page print version displays HTML entities as well as Mac and Windows keyboard shortcuts, and as such is perfect to decorate your office space. The online version offers more comprehensive information such as differences in American and British English. (ml ) Advertisement 7. Advice On Design So many questions, so little time. If you're a design student with questions that keep you up through the wee small hours — well, consider your sleepless nights to be over. Dear Design Student is a platform dedicated to young designers who ponder about all things related to their design studies and career. All you need to do is send an email and the group of well-educated and experienced writers and editors (who are, of course, designers themselves) will be sure to help. You're welcome to ask the experts anything related to design. While they don't guarantee to respond to every question, they do guarantee that any answer given will be a good answer. (il) 8. Fresh Freebies To Spice Up Your Toolbox It's always a good idea to keep a few nifty freebies by your side just in case you run out of time. Here are three useful freebies for your toolbox. The Flagship icon set contains 1,200 icons in five different file formats (PSD, AI, SVG, EPS, SKETCH). Easily customize color and size, and use it in personal and commercial projects. Badhead is a font which could be perfect for branding, greeting cards, logotypes, or any design with a strong and elegant touch. There are 246 glyphs and alternate characters included, with OpenType features. From Rafa Miguel comes Melma, a display font perfect for posters or advertising. It includes three variations – inline, cracked and black – and is available in TrueType format. (ml ) 9. An ABC Of London Every city has its hidden, charming places: a cozy bar, a lovely cinema, a special sight; little highlights which are a bit off the beaten tourist tracks but which make a city all the more unique. The South African design studio Fanakalo has found a beautiful way to honor such little gems: with an alphabetical poster with an A to Z of London. With its fresh yet vintage look-and-feel, the poster beautifully reflects London's venerable yet modern atmosphere. Each letter is elaborately crafted, reminding us of the illuminated initials found in old books: Sherlock Holmes' silhouette adorns the S (representing the Sherlock Holmes museum) with the top part of the S becoming into Sherlock's pipe; and a beer tap merges into the Y for the Ye Olde Cheshire Cheese pub. A lovely piece of eye candy. (cm) Advertisement 10. A Free Agreement Generator No one likes ending up in a tricky legal situation, right? If you've had bad luck in the past you may appreciate contracts more now, especially contracts written in plain language, simple and straightforward. Well, game developer Adriaan de Jongh has found himself in many such tricky situations with contractors and intellectual property right transfers, and he's decided to help others avoid having to go through what he had to. That's why he created contract( ) (pronounced 'do contract'), a site that generates an agreement in plain English, covering most things you want to agree on before working together with someone in the game industry — and it's free. All you need to do is fill in the fields, talk it over with a collaborator (even print out the agreement or save it as PDF), and eventually sign it. If you feel like the contract needs changes here and there, you can toggle the text markup to copy and paste the agreement. If that change could be valuable for others, you can even suggest it via email so others can benefit from it, too. (il) 11. 9 Designers, 9 Squares Take: a four-color palette; a 350px square; an abstract three-second animation in a single GIF loop; and nine designers and animators. Mix them together and you get 9 Squares, an international collaboration which creates abstract GIFs — just for fun. Twice a month, nine designers animate one square each, each one within the predefined conditions. The results are then merged into one 3×3 square to create a bold and mesmerizing GIF. An interesting project that shows how beautifully different personal styles can complement each other to form a harmonious whole. Be sure to check it out! (cm) 12. Keep Calm… And Attend A Smashing Workshop! With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today. Upcoming Online Workshop CSS Animations and Transitions with Rachel Nabors (June 30) Upcoming Full-Day Workshop in London, UK: Smart RWD Patterns and Front-end Techniques with Vitaly Friedman (July 1) You can also check more workshops coming up later this year. Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — we'll find a fair price for sure. Get in touch — it's that easy! Advertisement New On Smashing Job Board Here are the recent job openings published on our Smashing Job Board: Visual/Interaction Designer at Filament Games LLC (Madison, WI) We're looking for a Visual/Interaction designer who will inspire, entertain, and educate our users through innovative, beautiful digital media experiences. Front End Developer/Designer at Berklee College of Music (Boston, MA) We're looking for a talented web developer who will plan and coordinate the design and implementation of web software for the college's internal and public websites. UX Researcher at Ellucian (Salt Lake City, UT or Fairfax, VA) We're looking for a critical thinker who can accurately analyze user feedback, is able to deliver results in a fast paced environment and experienced with testing applications from concept to release. Smashing Highlights (From Our Archive) How To Benefit From CSS Generated Content And Counters Generated content was first introduced in the CSS2 specification. The feature was used by relatively few Web authors due to inconsistent browser support. With the release of Internet Explorer 8 in 2009, generated content was rediscovered, and many interesting implementations were adopted for the first time. Repurposing Photoshop For The Web Like any overzealous teenager aspiring to be a Web designer back in 1999, I found myself in an "Electronic Design" class, behind the wheel of one of those old-school aqua iMacs. If you found yourself in a similar situation, chances are you were given Adobe Photoshop as your vehicle for designing the Web. Stop Wasting Users' Time Our users are precious about their time and we must stop wasting it. On each project ask two questions: "Am I saving myself time at the expense of the user?" and "How can I save the user time here?" What is the single most precious commodity in Western society? I would argue it is time. Recent Articles On Smashing Magazine The Current State Of E-Commerce Filtering Using Sketch For Responsive Web Design (A Case Study) Building A Custom Archive Page For WordPress Putting Mobile Back End As A Service Into Practice (Part 2) An In-Depth Overview Of Living Style Guide Tools Thinking Like An App Designer Web Scraping With Node.js Visual Test-Driven Development For Responsive Interface Design "A free Agreement Generator" image credits: Sarah Joy Workshop image credits: Marc Thiele Sent to truly smashing readers via Mailchimp. We sincerely appreciate your kind support. You rock. Email: newsletter@smashingmagazine.com Follow us on Twitter • Join us on Facebook The authors are: Cosima Mielke (cm), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools). unsubscribe • update preferences • view in your browser

Smashing Newsletter #134: SVG, Interface Design and Clever CSS Tricks

With front-end experiments, style guides and boilerplate patterns. Issue #134 • Tuesday, April 7th 2015 • 179,900 readers • View in the browser

Dear Friends, We sometimes tend to find the smartest solutions when faced with the most difficult challenges, e.g. how do we keep CSS maintainable by avoiding dirty CSS hacks with bulletproof Flexbox solutions? How do we tweak responsive HTML emails to make them work in Gmail? How do we build up a scalable icon system with SVG that works on a large scale? How do we choose a responsive design workflow that is efficient enough to allow us to achieve high fidelity in the shortest amount of time? "Real-Life Responsive Web Design", our new Smashing Book 5, will be released in late May 2015. Over the past few months, I was privileged to work on our new book with our authors — knowledgeable practitioners who have to face responsive design problems every single day. I kept asking difficult and uncomfortable questions to every author, day and night, and over the weekends, too. Most chapters were re-written over and over again, with endless comments and remarks and new challenging questions. But, you know what? I strongly believe that the result is worth it. The answers to all those questions can be found in our new upcoming Smashing Book 5: "Real-Life Responsive Web Design". Although I do spend a lot of time reading on the web and running RWD workshops, those conversations with our book authors have been some of the most useful and enriching discussions on techniques, ideas, strategies, approaches and rules of thumbs in responsive projects. I found them extremely valuable and eye-opening, and, well, perhaps so will you. The final touch-ups are being made this very moment, and the Smashing Book 5 will be released in late May 2015. The pre-order is already available, with 25% off the regular price. If you decide to get it, you will not be disappointed. – Vitaly (@smashingmag) Table of Contents 1. Styleguide And Boilerplate Patterns 2. SVG Patterns For Data Visualization 3. Designing Interfaces For Watches 4. Front-End Experiments 5. Delightful Enhancements For User Interfaces 6. Accessibility Wins! 7. 30 Species In 30 Pieces 8. Pac-Man + Pong + Space Invaders 9. Keep Calm… And Attend A Smashing Workshop! 1. Styleguide And Boilerplate Patterns As designers and developers, we usually have to be pragmatic in our work, i.e. finding smart solutions to given problems within the constraints of the project (be it scope, budget or time). Now, what if you need to prototype an accordion very quickly, perhaps to show the interaction to your client or co-workers? Creating the accordion from scratch would take up too much of your time, so what can you instead? In such cases, Styleguide and Boilerplate Patterns Spreadsheet (which is being maintained by CloudFour) can be quite a time saver. The spreadsheet puts over 200 components against common frameworks (both large and small ones), lists how many frameworks contain it, and also for each of those components lists the frameworks in which it's included. So, if you need to prototype a component, you can look it up in the spreadsheet, find the lightest framework and use it right away, or perhaps skin it first. What works as a quick prototype may not work for the production code, e.g. when you're using your own framework. Still, a handy spreadsheet to keep in mind when building a specific components or reusing a common pattern! (vf) 2. SVG Patterns For Data Visualization So you have some sort of a map (perhaps a data visualization or country states or regions), and you'd like to highlight them differently, e.g. by using patterns like we used to do in good ol' textbooks. Obviously, doing it manually would require quite a lot of work. Luckily, Ricardo Scalco has released Textures.js to manage just this concern of yours. The library is made on top of d3.js, and is a solid foundation for creating and applying SVG patterns for data visualization. You can use lines, circles, paths and custom patterns as well as combine colors and textures. The library is 8.1Kb in size (minified), and is released under the MIT license. (vf) 3. Designing Interfaces For Watches Now that we've spent a few years trying to figure out how to design for those small mobile screens, we have another challenge ahead of us: how do we design smart and usable interfaces for watches? We're used to identifying critical tasks and content and prioritizing them on small screens, and the task is going to be another exercise in doing just that, but what would interfaces look like? The deisgners behind Tack Mobile have shared a few experiments on watch UI design in Pebble Time Design Kit, a blog post which not only provides a few interesting concepts and mock-ups inspired by Pebble Watch, but also a freely available interface kit for Sketch, Illustrator and Framer Studio Project. What if you set aside a few hours to figure out how you would design your app for a watch? (vf) Advertisement 4. Front-End Experiments Experiments are great, but not necessarily because they have a high practical value, but because they push the boundaries of what we think we can do. It holds true for front-end as well; in the end, it's just a matter of how we combine available technologies creatively. For example, we could create a 3D Rings Rotation with Three.js and a bit of JavaScript, or an Apparently Transparent 3D room by using a few transforms and a bit of JavaScript. On a more practical side, we could also combine :nth-last-child, :first-child and :last-child intelligently to create breakpoints based on the quantities of children elements, and perhaps even use the technique with Flexbox to create a grid layout that flexes to visually highlight 1-2 upcoming future events and allows the others to flow in at the default grid size. The solutions are surprisingly simple (well, once you wrap your head around them) and are applicable to a number of problems right away. (vf) 5. Delightful Enhancements For User Interfaces While animations and transitions aren't required for an interface to work, they can be a fantastic enhancement to keep the user engaged and delighted along the way. However, to do that, sometimes we need to entirely reinvent an interface and what the interaction would look like. Profile Animation Gooey Effect is one of those smooth UI concepts that might work well on mobile screens. Folding menu is another one, and so is Morphing Components, Blooping Animation and Two Chats Interaction. If you want to spice up your slider, how about looking into 3D budget/price slider, or an entirely different donation form. We are often afraid of risky innovations, but perhaps we could give it a try another time, and dismantle our skepticism with real data instead? (vf) 6. Accessibility Wins! The web is for everyone and no one should be locked out or miss out on anything for how they interact with it. Luckily, more and more members of the web community are becoming aware of this fact, making it their mission to make (or rather keep) the web accessible. Brilliant examples of how you too can tackle common accessibility hurdles can now be found in a small but precious Tumblr blog: Accessibility Wins. Curated by accessibility advocate Marcy Sutton, this site showcases well-crafted user interfaces that don't surrender to screenreaders or heavy keyboard usage. Icon buttons and autocomplete widgets, focus management and navigation are just some of the accessibility issues that the featured examples have overcome cleverly. A valuable and inspiring source for every web developer. (cm) Advertisement 7. 30 Species In 30 Pieces The Pygmy Three-Toed Sloth, Diademed Sifaka and Wallace's Birdwing all have something in common: they are some of the world's most interesting, but, unfortunately, also endangered species. To remind us of the beauty that we are about to lose, designer Bryan James has dedicated a thought-provoking interactive exhibition to them and to 27 other species who share the same struggle: In Pieces. And, well, it is simply breathtaking. Built with nothing but CSS (CSS polygons, to be more precise), Bryan has created an impressive piece of art. Each shape is being morphed, moved and toyed with by a new set of coordinates, and as they are maintained as triangles throughout, there are always 3 points that link up the movements with some cool CSS transitions. Each species in this showcase is made up of 30 pieces that form a flat, tangram-style portrait of the animal. The pieces then fall apart and assemble again to form the next species — imagine a Hawaiian Crow becoming a Vaquita, a Vaquita becoming a Golden Lion Tamarin. But the project is much more than just eye candy. Information on threats and stats about the population show how much research and love for detail was put into it. Inspiring! (cm) 8. Pac-Man + Pong + Space Invaders Did you know that Pac-Man was once named "Puckman"? The name came from the Japanese word pakupaku which means "to flap one's mouth open and closed". Well, it's obvious that there's no other game to date that has come close to dominating the popular gaming landscape the way Pac-Man did in the early 1980s. It probably even claimed video games for kids, and even the strictest parents could see the game's appeal. With a slight nostalgic tough, Pacapong is a free game that will awaken your childhood memories if you're familiar with not only Pac-Man, but also Pong and Space Invaders. It has been created for two players to try and save Pac-Man from Pong paddles through the well-known maze and get him across to the other side without running into a ghost. At the same time, both players need to battle the Space Invaders with the same paddles — which can be quite a challenge! It's currently available for Windows, OS X and Linux. So, what are you waiting for? Grab a friend and get your game on! (il) 9. Keep Calm… And Attend A Smashing Workshop! With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today. Workshop image credits: Marc Thiele. Full-Day Workshops in Los Angeles, USA: Smart'n'Shiny RWD Techniques with Vitaly Friedman (April 27) Creative Workshop Facilitation with Andy Budd (April 30) Smart RWD Patterns & Front-End Techniques with Vitaly Friedman (April 30) Upcoming Online Workshop CSS Animations and Transitions with Rachel Nabors (June 30) You can also check more workshops coming up later this year. Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the costs — we'll find a fair price for sure. Get in touch — it's that easy! Advertisement 10. Recent Articles On Smashing Magazine "Letters Do Not Stand By Themselves" That's Real-Life Responsive Web Design: Meet The Brand New Smashing Book 5 Desktop Wallpaper Calendars: April 2015 Putting Mobile Back End As A Service Into Practice How To Keep Framework Development Simple And Bug-Free Assessing Mobile Usability With Google Webmaster Tools 11. New On Smashing Job Board Here are the recent job openings published on our Smashing Job Board: Creative Strategist at Blue State Digital (London, UK) We're looking for a collaborative, digitally oriented leader who can rally teams to do their best work across both websites and products, strategies, and digital communications and campaigns. Front-end Engineer at Lesswood GmbH (Frankfurt, DE) We're looking for a front-end engineer to shape the online platform, and solve issues and work out design solutions with the rest of the team. Lead UX Designer at UPS (Mahwah NJ, USA) We're looking for a Lead UX designer who will help in the building of a dynamic user experience team that will integrate high-fidelity UX into our current and future development efforts. 12. Smashing Highlights (From Archives) How To Launch Anything Launching a new product — especially your first — can be incredibly daunting. Even knowing where to turn for help can be hard. So many blog posts are full of free advice on how to successfully launch that I almost didn't write another one. Freebie: Touristic Icons (100 Icons, PNG, SVG) Icons are a lot like real monuments — they can both be easily recognized. This icon set consists of a set of vector icons that represent monuments across the globe, so they can be literally used anywhere. So You've Decided To Open-Source A Project At Work. What Now? Many companies are starting to investigate and participate in the open-source community, and yet few guides for doing so exist. This article focuses primarily on the process of open-sourcing a project at work, which brings with it other concerns and decisions. Sent to truly smashing readers via Mailchimp. We sincerely appreciate your kind support. You rock. Email: newsletter@smashingmagazine.com Follow us on Twitter • Join us on Facebook The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools). unsubscribe • update preferences • view in your browser