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!
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
Upcoming Full-Day Workshop in London, UK:
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
No comments:
Post a Comment