.. stay up to date! Time for a new roundup with last week’s best tutorials and design articles! It’s all about HTML, CSS, PHP, responsive web design, branding, SEO, WordPress and more. A broad scale of topics, but never-the-less the underlying focus is on Design.
Also I see this as my personal bookmarks of great articles from the Community of the last period. These hand-picked articles and tutorials are categorized by their main topics. The best way to keep track of these tweets is simply to follow me on Twitter.
The Fall and Rise of SVG – Now that SVG is widely supported and native to browsers, and now that tools are moving forwards instead of backwards, the art of using SVG is more connected to the surrounding web technologies that it can now interoperate with
The Importance of Writing Code That Humans Can Read – Have you ever finished a project in a single run without ever needing to look at the code again? Neither have I. In this article, I’m going to look at tips and tricks to make your code more readable, as well as pitfalls to avoid.
Why I’m Excited About Native CSS Variables – Native CSS variables weren’t just an attempt to copy what CSS preprocessors could already do. In fact, if you read some of the initial design discussions, you’ll see that most of the motivation for native CSS variables was to make it possible to do things you can’t do with preprocessors!
How To Work With The SVG Text Spacing Properties – When it comes to display type there are times when it makes sense to adjust the spacing and since you’re more likely to use SVG text as display type, it’s a good idea to know how to adjust the white space when you want.
Blending Modes in CSS: Color Theory and Practical Application – Blending modes in CSS, however, aren’t supported universally, but they are certainly on their way. In this tutorial, we will learn how blending modes work and the different ways you can implement blending modes using CSS.
Intrinsic Placeholders with the Picture Element – Intrinsic Ratios aren’t new, but paired with the
<picture> element it’s a beautiful little technique with little-to-no extra markup. It could be used for video embeds as well.
Elegant Outlines with SVG paint-order – If you need the same appearance in all browsers, however, you can create something that looks like paint order control with SVG 1.1 code. This post describes why
paint-order is useful, how to use it in the latest browsers, and how to fake it in the others.
Styling and scripting sliders – Among other things, this project requires me to style and script sliders. There are several interesting points I would like to bring to your attention, such as a few underreported IE problems, the solution to Android WebKit’s appearance bug, and the proper use of the input and change events.
Intuitive Scrolling Interfaces with CSS Scroll Snap Points – Scroll Snap Points are a native CSS-only technique that you can use to create layouts where your content is easily scrolled or panned. With this new feature you can easily control how your content will scroll and how it will ‘snap’ to the correct locations.
Coding Etiquette to Make Other Developers Hate You Less – The good news is it’s fairly easy to write clean, manageable code that makes other developers and your future self happy. I’ve saved you years of making the same mistakes I did by compiling them here in one safe place for you.
The vertical-align Property – The
vertical-align property controls the vertical positioning of elements within their parent. It applies to inline-level elements and table-cell elements. The
vertical-align property has 10 possible values.
Using Multi-Step Animations and Transitions – We can make things a little more interesting by chaining our transitions together, then playing with the duration and delay of them to create the same sort of multi-step movement effect that is possible in keyframe animation.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
The “Blur Up” Technique for Loading Background Images – Big header background images (and their performance drawbacks) are definitely something that we can relate to when building for the web, so this is useful stuff. Emil explores a performance technique using one of the more forgotten filter effects – the filter function
An Argument for Modular Design – Along with increasing your ability to communicate within your team, modular design also makes changing styles across your design incredibly simple. Done properly, modular design will exponentially decrease your production time and increase your bottom line.
Chasing the Holy Grail – In the end, there is no one right answer of how to host and share your Pattern Library code. Each organization is different, and any of these options could be the right fit.
Animation in Responsive Design – Embracing the squishiness of responsive design doesn’t have to mean giving up on your creative animation ideas. There are three general techniques that can help you balance your web animation creativity with your responsive design needs.
Putting My Patterns through Their Paces – It’s helpful to begin designing a pattern’s hierarchy before its layout: to move past the visual presentation in front of me, and focus on the underlying content I’m trying to support.
Why Performance Matters, Part 3: Tolerance Management – This part finally discusses pure passive waiting on the web, how we can deal with it and what can be done to keep user satisfaction high even when the service cannot be delivered fast enough.
Why you shouldn’t bother creating a mobile app – Lessons learned spending one year creating and improving our mobile app. Sorry App Store and Google Play, but we won’t play with you anymore.
How to Build Development Systems (For a Web Site) – I have learned about building systems rather than web pages. Most of what I’ve learned is that I’ve been doing wrong out of habit.A tool as clever and focused as PatternLab can help break those habits.
Making Accessibility Simpler, With Ally.js – ally.js is positioning itself as a center for collaborating on accessibility-related features, by providing low-level tools to other libraries and frameworks as well as high-level functions to developers.
Webdesign in Common, Web Typography, Tools, Email, etc.
Seriously, use icon fonts – I’m not about to tell you should use an Icon Font. I’m here to tell you that I think they are a great solution to certain problems. And certainly more appropriate than SVGs in some situations.
50 CSS Tools, Frameworks & Libraries from 2015 – All 50 of the tools in this collection are time-saving additions to your already existing web design toolbox. So, always pick the right tool for the right project.
The State of Mobile Checkout & Form Usability – In this second article in our mini-series on the current state of mobile e-commerce usability, we’ll dive deep into the mobile checkout flow and form field usability.
Grid-First Design: How to Create Vertical Rhythm and Harmony – So why is vertical rhythm and a grid so important? When it comes to text, it helps keep a user from tiring while reading. For other elements it creates a distinct sense of harmony and flow.
Future of Web Design: Watch out for these 7 Trends – There is a lot to expect as far as evolving web design trends are concerned in the next year or beyond. Watch out these 7 trends that are likely going to flourish in the time to come.
Traditional Homepages Are Obsolete, Says Quartz – Quartz doesn’t think online publications should have homepages. Instead, they should have faces that show off their personality: a digital visage that reflects the personality of the brand as a whole, without just being a river of breaking stories and headlines.
Brain Hacks: Using Psychology in Web Design – So what makes one design more appealing than another? How can we tap into a visitor’s brain and make them feel a certain way just by affecting what they see?
Choosing an HTTP Status Code — Stop Making It Hard – What could be simpler than returning HTTP status codes? Did the page render? Great, return
200. Does the page not exist? That’s a
404. Do I want to redirect the user to another page?
302, or maybe
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Iconic Simplicity. The Vital Role of Icons – They are small but vital for the efficiency rate of any application or website. They look simple but take loads of time and effort to feel that way. They are iconic in effective user interface. They are icons.
Why Proxima Nova Is Everywhere – A quick search on Font Reach reveals that Proxima Nova is used by over 25,000 websites. It’s the main typeface of some of the most popular companies in digital media and has been a core part of our identity across branding, website, mobile app and internal projects.
10 Typography Nightmares to Avoid – It’s crucial as a designer to get your project’s typography on point. And the first part of learning proper type as a craft is learning which mistakes to avoid. Here’s ten common gaffes to steer clear of.
Blogging, Social Media, Writing, Content Strategy, etc.
How to Create More Accessible Content, Part 1: Copywriting – If you’re managing a website, you should be invested in the accessibility of your website and your content… which I freely admit this can be really, really hard.
It’s Time For Notifications To Get Smart – There’s plenty of evidence to suggest notifications are broken, but they won’t stay that way for long. How can they be fixed? What does the future of notifications look like?
Getting Started with the WordPress Customizer – By the end of this article, we will have a WordPress theme that has a couple of theme modifications, with an obvious pattern in our code for adding more down the road.
WordPress 4.4: 10 Coolest New Features You Should Know – WordPress 4.4 has just been released today and we played around with this latest new offering to see what new shiny features we could find. This new version is shipped with quite a few improvements that are set to make WordPress developers go crazy.
State of the Word 2015 – Recently, Matt Mullenweg delivered his 10th annual State of the Word address. A lot many things were mentioned in State of the Word 2015 by Mullenweg, with the highlight of the speech being the fact that WordPress now powers over 25% of the internet.
Introducing Term Meta Data In WordPress And How To Use Them – WordPress 4.4 introduced term meta data which allows you to save meta values for terms in a similar way to post meta data. This is a highly anticipated and logical addition to the WordPress system.
WordPress 4.4 “Clifford” Featuring Responsive Images, Twenty Sixteen, and More – After four months of intense development led by Scott Taylor, WordPress 4.4 “Clifford” named after jazz trumpeter Clifford Brown, is available for download.
Top 10 Open-Source WordPress Theme Frameworks – Frameworks are used to ease the process of web development, as they allow you to focus on the design rather than code. In other words, the most difficult work is already done for you before you even start.
How to Easily Add CSS Animations in WordPress – Animated effects like sliding content, fade in feature boxes, bouncing images, etc. In this article, we will show you how to easily add CSS animations in WordPress without writing any code.
Yoast SEO Import & Export features – You might have a default title template for instance, default XML sitemap settings, etc. This post will teach you how to easily apply those settings to a site quickly using the Yoast SEO Import and Export features.
5 Expert Tips for Cleaner CSS Coding for WordPress – Learning how to write well-crafted code is an essential skill when you’re working with WordPress and want to make style changes to your website. The tips below will help you level up your CSS knowledge and write clutter-free and optimized CSS.
Search Engine Optimalization, Conversions, Analytics, etc.
Designing with analytics – Sometimes users lie. They don’t usually do it on purpose, to be fair. We can blame it on poor memory recall, something so many of us suffer from. When you’re designing, you need to pay attention to analytics — and you should integrate analytics tracking everywhere you can.
Stereoscopic CSS – For a while I’ve been blogging about making all sorts of 3D-style effects using CSS. In this post I take it one step further and try to make the scenes look even more three dimensional. There are many techniques used to try to convey a 3D image from a screen.
Presentation Slideshow in CSS and jQuery – Although presentations are usually created using native apps, we decided to challenge ourselves and design a presentation template for the browser. It wasn’t an easy task, for the way you interact with a presentation slideshow is different compared to how you scroll through a website.
Twitter’s Heart Animation in Full CSS – The only thing that I had in mind was … is it possible to make it with only CSS (not a single picture or SVG)? The result is not perfect (and it’s a lot of SCSS / CSS — almost 400 lines) but it’s satisfying.
Freelance, Business and Workflow Related Stuff
10 Ways to Gain Exposure as a Web Designer – As a web designer you may be faced with the challenge of getting your work and your abilities in front of others. If this is the case, here is a list of 10 different things you can do to get noticed.
The right way to end an email to a client – Just by suggesting a next step at the end of my email, I was able to double the amount of people who responded to me. This next step was different for every email, but it always followed the same 2-step structure.
F*cking Brilliant, a great Read or just magnificent Tips!
The Weight of Design – I guess this is an invitation to re-focus. Re-think what is good design. Design as a mean, not a goal. As a support discipline. As a constantly moving target . A constant race to stay, like the products it serves, relevant.
The era of distrust and disloyalty – Simplicity, usefulness, functionality, details and facts, transparency; these are the pillars of the new digital design. We trust what we can quickly and easily use but only as long as it’s useful.
Simple is back, in a massive way – Management books, marketing blogs, podcasts and tweets are urging us to simplify the message, simplify the product, and simplify our lives. But something is amiss, because none of us want to give up our smartphones. So how can we resolve this apparent tension?
Design like Jagger or why you shouldn’t design your own website – Don’t design your own website. No, really. It will suck. You might think that since WordPress or Weebly are so easy to use, you can design your own killer website. Nope. It will suck.
Where to start? – What I mean is that there’s an inevitable tendency to focus on technologies—Service Workers, HTTPS, manifest files—and not so much on the approach. So if your conception of progressive enhancement is that it’s an added extra, I think you really need to turn that thinking around.
Myths About Good Designers – Even the most well-intentioned designers are prone to bias, which can echo loudly even through the smallest symbols. The best way to overcome these biases is to ensure we have the right minds on the problems we’re trying to solve.
– § –
I hope you have enjoyed these hand-picked great articles? Did we miss a great article, please let us know .. To keep up to date with all the cool links, simply follow me @gonzodesign