.. 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.
An Overview of SVG Patterns – In this post, we are going to take a look at SVG patterns and what we can make with them. SVG patterns are analogous to CSS backgrounds, and are scarcely more than repeating images.
The State of Front-End Tooling – 2015 – I put out a request for front-end developers to fill-out a very brief survey on front-end tooling. The aim? I simply wanted to find out more information about current knowledge and usage levels across the community.
CSS Grid and The Box Alignment Module – In this post I’m taking a quick look at how the following properties from this spec work with Grid Layout. The Box Alignment Module is well worth taking a look at. These properties do not just apply to Grid and Flexbox.
How to do vertical centering in CSS – It feels like it should be a simple task but it’s easy to tie yourself in knots if you don’t know any good tricks for vertical centering. Jake Archibald has two neat ways for vertically centering things in CSS.
Back to the :roots – In this post I’ll try to show a few ways how you can make the cascade be your friend and maybe reduce the need of overriding and thus encounter less fighting with specificity.
Modular CSS Tools – How can we manage contextual tweaks without growing the size and scope of our CSS? Let’s take a look at using single-property tool classes for managing one-off design changes.
Quick trick: using template to delay loading of images – The biggest issue with template is that it can’t really by polyfilled as browsers that don’t know template, treat it like a DIV and render its content.
How to Keep Web Animations From Slowing You Down – Try to limit yourself to transform and opacity properties to keep them performant. And most importantly, don’t forget about the ultimate goal — an enjoyable user experience.
Open Source Responsive Layout Grid Framework in Pure CSS – A GitHub repo named Layout Grid is gaining notoriety among developers. This isn’t really a “framework” as much as a collection of CSS codes that can be reused to build certain grids
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
Hamburger Menu, The Most Recognizable Thing on the Planet – Does behavior change when users encounter the hamburger menu on a desktop website versus a more traditional menu? We’ll be honest, we were surprised by the results.
What to do with an empty UI state? – Empty states are important. They help a user get familiarized with an app that they just started using. This can be a scary and uninviting experience if the empty states are not thought of.
The “Psychological” Speed of Mobile Interfaces – The mobile user has little patience when using your app. So how do you make your app faster? Here are some interesting techniques that your favorite apps use and you should be aware of.
5 tips for making your designs future-proof – Making predictions about the future has a funny way of making one look foolish, but there are some enduring principles that I think transcend whatever prevailing industry trope is en vogue.
Audience-Based Navigation: 5 Reasons to Avoid It – Role-based IAs increase cognitive effort and user anxiety. Clear language and mutually exclusive categories reduce the chance of harming the user experience.
15 UX Commandments – I give you these 15 rules to live by, slightly adapted from the originals, as commandments for being the best UX leader you can be, especially if you’re just starting your career.
Designing Safer Web Animation For Motion Sensitivity – It’s no secret that a lot of people consider scrolljacking and parallax effects annoying and overused. But what if motion does more than just annoy you? What if it also makes you ill?
M.dot vs. Responsive vs. Adaptive: What’s the Right Solution for your Company? – We’ll break down all three to highlight the features and best use case for each, and to help you decide what makes the most sense for your company.
How to design for mobile UX – Keep your mobile design clean and simple. Go for practicality and usefulness over any fanciness in your design. Remember that you’re designing for a much smaller screen than if you would for desktop.
The Importance of Context-Shifting in UX Patterns – There is a lot of space between humdrum hide and show and a confusing popup zooming around the screen. There is space for invention, where thoughtful design meets interactivity.
Webdesign in Common, Web Typography, Tools, Email, etc.
Type Sizes for Every Device – Digital products are about content. The most important thing you can do to make a Web site or app usable is to make sure everyone can read its text, on every device, under every condition.
Top jQuery Plugins for Common Website Features – Whether you’re creating a rich media gallery or scrolling content pane, these free plugins are sure to fill whatever void you may have in your current design project.
Web Development Mistakes That Beginners Make – Mistakes are really common in web development. No matter what programming language is utilized for the coding job, mistakes will appear when looking at scripting language and complex coding.
7 on-trend colour tips for 2015-2016 – As the trend cycle goes ever faster, we fill you in on the latest colour trends online. In this article we’ll explore seven of these recent colour trends. We’ll explain the logic behind each, and show examples of sites that get it right.
CSS Animation Tools, Frameworks & Tutorials – What we are going to do is share a collection of tools, frameworks and tutorials with you that will help ease your CSS animation learning woes and help save you some time along the way.
5 Font Foundries Web Designers should be Using – New on the scene is Edge Web Fonts. You can think of Edge Web Fonts as Adobe’s version of Google Fonts. It has an extremely friendly user interface with an easy-to-browse font catalog.
How To Apply Neuroscience Principles To Your Landing Pages – In this article, I’ll discuss easy and effective ways to incorporate the discipline of neuroscience into landing pages. The same principles can obviously be used for other website pages too.
Results from the Subtraction.com Design Tools Survey – The questions asked about the preferred software that designers are using today for tasks like brainstorming, wireframing, user interface design, prototyping and more.
Design Tips for Material Design – In this tutorial, we’ll be covering how you can take concepts of Material Design and improve them to create better interfaces that are at the same time more distinct in their visual style.
10 Common Web Developer Mistakes – So through research, experience, and recent observations, I thought I would share a list I compiled of ten common mistakes I see web developers make—and how to avoid them.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Guide (& tips) on Creating Quality Material Design Icons – Icons are quite the challenge to design: they have to be meaningful and beautiful, all the while being understandable in a split second.
2015 LogoLounge Trend Report – Each year, I can’t help but consider the societal, technological and environmental influences and how they will affect the future of our industry. This year, three thoughts occurred to me.
Create a Shiny, White and Gold, 3D Text Effect in Adobe Photoshop – Photoshop’s 3D environment has multiple tools and settings to create great 3D effects. This tutorial will show you how to use those tools and play around with the settings to create a shiny, elegant, white and gold, 3D text effect.
Blogging, Social Media, Writing, Content Strategy, etc.
Ghost’s blog platform finally got a big design upgrade – Today’s release bumps it to version 0.7 and brings a redesigned backend interface, making it easier to navigate your blog’s dashboard and adding a search bar to help find older posts.
4 Ways to Slash Comment Spam (Before It Kills Your Blog) – As your blog grows, comment spam becomes a daily hassle. Dealing with it is a lot like playing an endless, wildly irritating game of Whack-a-Mole.
Creating a Responsive WordPress Site Your Mobile Users Will Love – In this post I’ll cover everything you need to know to give your site a responsive layout, but also ensure it gives your visitors the best possible experience on everything from 27-inch UHD desktop displays to 4-inch iPhone 5s screens.
WordPress and PHP7 – For the last few months, WordPress Core has been getting ready for the upcoming release of PHP7. PHP7 is bringing a host of improvements to PHP. One of the most notably is substantial performance improvements.
The 7 Reasons Why WordPress Developers Are Paid Peanuts – In this post, I’ll try and get behind some of these figures and identify what might be the reasons for WordPress freelancers having lower earning expectations than other freelance professionals.
16 Useful Code Snippets for WordPress – It’s the little things that make a difference, right? That’s part of what makes WordPress so great – the number of ways in which it can be customized to meet your specific needs is virtually limitless.
10 Ways to Learn WordPress Hooks – Knowing that it took a combination of resources and methods for me to learn WordPress hooks. These resources will hopefully bring that fuzzy definition of hooks into focus, even if it’s in layers.
How to Create a Custom Login Page in WordPress – Whether you’re just looking to have some fun with your WordPress login page, impress clients, or reinforce your branding, the Custom Login & Access WordPress Plugin has you covered.
Search Engine Optimalization, Conversions, Analytics, etc.
.. nada, njente, noppes, nothing!
Techniques and Treatments for Background Retina Images – This oversight is ironic, given that massive high-resolution background pictures arguably consume more bandwidth and download time than smaller inline illustrative images.
Freelance, Business and Workflow Related Stuff
How to Get out of the Freelance Pricing Trap – If you feel like you’ve fallen into the trap of not charging enough for what you’re worth, make a decision today to start charging more. By incrementally charging increasing your rates
F*cking Brilliant, a great Read or just magnificent Tips!
Forget about the mobile internet – For as long as the idea of the ‘mobile internet’ has been around, we’ve thought of it as a cut-down subset of the ‘real’ Internet. I’d suggest it’s time to invert that – to think about mobile as the real internet and the desktop as the limited, cut-down version.
Designers: Adapt or Die – If you’re a Designer in tech and haven’t already noticed that all the young lions coming out of school to take your job all know how to write some kind of code or script, you really should pay a bit more attention.
The Day You Became A Better Designer – The day I became a better designer was the day I started looking outside the design industry for inspiration. It was the day I started reading books about philosophy, psychology, art or science.
Never Use The Confirm Dialog – It’s a standard function of all browsers, it’s everywhere, and it’s time to retire it. We’ll use more thoughtful labeling to make the behavior clearer—and for an added bonus, we can use color to highlight the riskier option
An iOS Developer on React Native – Fast-forward a couple of months, and I’m confident enough to say I may never write an iOS app in Objective-C or Swift again. Step outside of your comfort zone and you may just find something even better than before.
Is the web platform getting too big? – The rapid pace of web platform development is dizzying and it can, at times, be overwhelming. Imagine just starting out in the industry and discovering that you can never get ahead of the learning.
Defining Design – “People think that design is styling. Design is not style. It’s not about giving shape to the shell and not giving a damn about the guts. Good design is a renaissance attitude that combines technology, cognitive science, ..”
Why You Hate Google’s New Logo – The new logo retains the rainbow of colors but sheds the grownup curlicues: it now evokes children’s refrigerator magnets, McDonald’s French fries, Comic Sans. Google took something we trusted and filed off its dignity.
– § –
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