Dear Friends,
New year comes with new resolutions, right? So in the spirit of upcoming new year, in December we decoupled third-party scripts from HTTP, revised a strategy to deal with mixed content as well as redirect issues and revisited deployment for HTTP/2. Last week we finally switched to HTTP/2, with our CDN running on SPDY, and — guess what! — the overall performance of the site... decreased, significantly.
These days we are playing hocus pocus with caching, assets loading and HTTP/2 — looking into Service Workers as well. The results vary a lot—ranging from 490ms to 1500ms Start Render time on pretty decent connections. A switch to HTTP/2 is anything but straightforward, and obviously we'll publish a write-up once we have discovered and resolved all the issues.
We are on it! But what about you? Have you figured out HTTP/2, responsive design, design for mobile, pattern libraries, SVG, Flexbox —and all the tricky facets of designing for the web today? Well, we haven't either! That's why for 2016, we've set up SmashingConf New York 2016 to be a conference about failures and successes in front-end and UX today—what worked, what didn't, and why, with lessons learned and practical techniques applicable to your work right away.
Ready? Set. Go! 1 track, 2 full conference days, 6 workshops, 16 curated speakers and just 400 seats, taking place on June 14–15. Early-bird tickets go live on January 26th, 10AM EST.
We'll also have a little new Mystery Riddle on Smashing Magazine's front page at the same time, so stay tuned! We'd love to see you in New York, of course — some of those resolutions do come true in the end after all, don't they? ;-)
Happy and peaceful 2016, everyone!
— Vitaly (@smashingmag)
Table of Contents
1. The Most Hearted Pens Of 2015
CodePen is a treasure chest of ideas, an adventure playground for every front-end developer. To start into a new year full of coding challenges, CodePen came up with a very special goodie: a list of the 100 most hearted CodePens of 2015.
The top 100 include useful solutions for common coding challenges — think login screens or navigation animations —, as well as playful and fun experiments. A nice selection that holds something for everyone. But be warned: you might end up spending more time playing around with the pens as you had planned. (cm)
2. Which UI Ideas Work Best?
A good UI pleases the user and improves conversion. But which UI ideas work best, which less so? And how strong is the effect of a solution on the conversion rate? Good UI Evidence attempts to answer these questions based on data from real-life A/B tests.
19 A/B tests reveal data about form fields, icon labels, attention grabs, anchoring and more. To make it easier to separate the strong from the weak, the effects of each test are color coded. Very insightful, but please keep in mind that what worked in a test, doesn't necessarily have to work for you. (cm)
3. Monkey Testing Tools For More Robust Web Applications
Once a user interacts with your site, you are out of control. Will your design stand up to this real-life stress test? Or will an unexpected input make it break? To prevent the project from the worst, we should test the robustness of the design in advance, way before we let it out into the wild. Two handy scripts help to take your design's tolerance to the test.
Heydon Pickering's forceFeed.js focuses on variable, dynamic content. The script "force feeds" your HTML elements with random text content that varies in length and quantity, just like in real-life, to check how your site will react to it. After setting the script up, you simply refresh your browser until something breaks — and then, well, you fix it.
Gremlins.js works in a similar way. The "monkey testing" library anticipates common user interactions such as clicking anywhere in the window, entering random data in forms or moving the mouse over elements that don't expect it. The goal is to trigger errors or make the application fail, so you know where you need to improve something. These two scripts are definitely worth a spot in your toolkit. (cm)
Advertisement
4. Creative Front-End Experiments
You can do pretty much anything with modern web technologies and enough patience to see things through. If you want a dot to move along a curved path, you don't really need JavaScript and can achieve the effect with layered CSS animations and transitions. Or if you are offering cinema/show tickets, you could use a responsive 3D perspective preview for a selected seat in a cinema room just by using CSS transforms.
Building bulletproof tabs isn't difficult any longer. The same goes for simple accessible inline error message pattern. Not so much into code? Well, what about some interface animation experiments then? The article showcases a few very interesting examples of UI animation, grouping them and explaining what could work in a specific situation. Still not enough? 100 Days of UI provides more UI inspiration. Almost magical! (vf)
5. High-Quality SVG Logos
You need a certain logo as an SVG? Then SVG Logos is a good place to start your search. With currently 749 logos available as SVGs, the collection features an extensive selection that is bound to provide what you're looking for.
The project features logos for developers, DevOps, business, geeks, designers, publishers, bloggers and more. You'll find the usual suspects there — think Google, browsers, social networks — but also logos that are usually neglected such as of collaboration tools, frameworks or preprocessors. To keep track of everything, you can search by name or browse the archive by tags. All logos are (supposed to be) optimized. Definitely worth a bookmark. (cm)
6. Fluid: Create More Constraint-Based Designs In Sketch
For many designers, Sketch is the go-to tool when it comes to creating mockups. For some extra power when designing constraint-based, responsive designs, you might now want to give the new free Sketch plugin Fluid a try. Based on Auto Layout constraints, Fluid lets you pin, offset, center and size elements relative to the parent group, parent artboard, or previous sibling layer.
A nifty feature that helps make your responsive design workflow even more efficient: you can quickly resize artboards by toggling between different presets and even flip its orientation. And with support for percentages and simple mathematic expressions as values, Fluid gets your Sketch really fit for the challenges of responsive design workflow. (cm)
7. Swiss In CSS: When Design Classics Meet CSS
Some design trends disappear as fast as they came, others make history. So the Swiss Design movement that originated in the 40s and 50s and influenced much of the development of graphic design during the mid-20th century. As an homage to its signature International Typographic Style and the designers that pioneered the ideas behind it, Jon Yablonski recreated some of the classics of the movement in CSS. But not only that: a pinch of CSS animation gives the pieces a lovely, modern twist.
Swiss in CSS currently features eight replications, with links to CodePen revealing the code that brings them to life. Just like half a century ago, when they first announced concerts and exhibitions, the graphics live by their simplicity, their geometric shapes and asymmetrical layouts. A harmonious blend of old and new design techniques. (cm)
8. Upcoming Smashing Conferences
We love bringing people together, and creating a friendly atmosphere for everybody to share and to learn. Our community events are for professionals like yourself who want to improve skills and make a difference. No fluff, no theory — just actionable insights applicable to your work right away. In fact, we've listed our next stops in the overview of upcoming Smashing Conferences, with first confirmed speakers and tickets.
We'd love to meet you at SmashingConf Oxford, UK on March 15–16, or perhaps at SmashingConf San Francisco, on April 5–6, 2016 with a tremendous view, right opposite to Golden Gate Bridge and Alcatraz Island. Ah, and New York, too. And just in case you need to convince your manager to send you to the event, we've got a Convince Your Boss PDF ready for you, too. Just sayin'!
Image credit: wigz. (vf)
9. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Marketing Engineer at CloudFlare (San Francisco, CA)
"The right candidate will have the ability to directly impact the the success of the company by helping us achieve our growth targets. The CloudFlare website is ranked ~1500 globally on Alexa with over 200,000 unique visitors per week. With this volume of traffic, you will be able to reach out to millions of users through the different projects you will work on."
-
UX Designer at Adoptive (New York, NY)
"The ideal candidate can translate the requirements and objectives of strategic research into impactful, intuitive user experiences. A bridge between Adoptive's Strategy, Design and Technology teams, the UX Designer will help bring the goals and objectives of our projects to life."
-
Senior Web Developer at Jung von Matt (Stuttgart, Germany)
"If you would like to be part of an agency with 135 colleagues and an innovative digital team of 50 with short decision paths, if you have several years' experience as a front-end developer, are equally at home working in HTML5, SASS, CSS3 and JavaScript and in template development."
10. Smashing Highlights (From Our Archives)
-
The Good, The Bad And The Great Examples Of Web Typography
Choosing typefaces is an integral part of every web design project. With thousands of typefaces available from hosting services such as Typekit, as well an ever-improving collection of free fonts available, there has never been a better time to be a typography-obsessed web designer.
-
Why AJAX Isn't Enough
AJAX calls have moved user interaction on the Web a huge step forward: We no longer need to reload the page in response to each user input. Using AJAX, we can call specific procedures on the server and update the page based on the returned values, giving our applications fast interactivity.
-
Designing With Your Clients
We have all known the pain of a client interfering in the design process. Phrases like "Make the logo bigger" and "Put that above the fold" have become a running joke in the web design community.
11. Recent Articles On Smashing Magazine
