.. 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.
SVG Backgrounds: CrossHatching and Grids – Hatching and crosshatching refers to tight, parallel strokes drawn to suggest shadow, density and tone in illustrations. Used in everything from etchings to comics, both effects are relatively easy to create in SVG backgrounds.
Gulp Introduction for Web Designers – Gulp is a task runner that helps to organize and run tasks automatically, like minification, image compression, adding vendor prefixes, compile templates, convert markdown to HTML, compile CSS Preprocessors like LESS or Sass, etc.
Sticky Headers And Other Sticky Situations – On a recent project, we were asked to implement what I will refer to as “horizontal, sticky headers.” But what happens when our champion browsers don’t have the same features—or worse, just implement them in completely different ways?
Introducing the CSS Grid Layout spec – One area of CSS hasn’t evolved quite so quickly: CSS for layout. We are still reliant on fragile floats, positioning and display inline-block or table, and are increasingly coping by using frameworks like Bootstrap.
Building and shipping functional CSS – I’ve listed off a bunch of benefits and given some convincing statistics for how functional CSS has transformed our design and development process for the better, but what about the challenges?
How To Use SVG Font Properties – Today I want to talk more about the text side of things. I want to talk about how you can change the font of the text and set its weight and similar. Much of what’s in this post will likely be familiar to you in that you’ve set font-size as a CSS property.
Getting Started With CSS calc() – A lot of people think preprocessors fully cover the realm of logic and computation, but the
calc() function can do something that no preprocessor can: mix any kind of units.
How to export SVG – The latest release of Illustrator CC 2015 features a completely new way of generating modern, efficient SVG code. The new option to export SVG code includes improved support for web and mobile workflows, and produces higher quality SVG artwork.
10 things to know about Gulp – Never heard of Gulp? There’s just too much to write about; I could write a book on it. So instead, I’m going to give a quick introduction and share a few tips. It’s a build system or task runner like Maven, Ant, Grunt, and so on, except much much better.
ReactJS For Stupid People – I struggled for a long time trying to understand what React is and how it fits in the application architecture. This post is what I wish someone had told me. How does React compare to Angular, Ember, Backbone, et al?
Object Oriented CSS (OOCSS) with Sass – The objective of this methodology is to make CSS as reusable as possible by making it modular and generic. The mantra is Don’t Repeat Yourself (DRY). OOCSS with Sass is an indispensable methodology to my development process.
An Introduction to Hardware Acceleration with CSS Animations – The term itself sounds like something overly complicated, close to higher mathematics. In this article, I’ll shed some light on this subject and demonstrate how to utilize this technique in your front-end projects.
Learn PHP 7, Find out What’s New, and More – PHP 7, the next version of the world’s most popular programming language, has been released. We’ll focus on compiling a list of resources to get started with version 7 – posts describing what’s new, books helping you kick things off, and more.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
Making sense of atomic design: molecules and organisms – While some concepts in atomic design were clear from the start, others felt a bit foggy. For example, one area that we’re still trying to improve our understanding of, is the difference between molecules and organisms.
Menu Design: 15 UX Guidelines to Help Users – In both applications and websites, users rely on menus to find content and use features. Use this checklist to make sure your menus do their job. Avoid common mistakes by following these guidelines for usable navigation menus.
The State of UX in 2016 – Here’s our take on looking at the past, understanding the present, and anticipating what the future holds for UX in 2016. We’re optimistic 2016 will finally be the year when we shift our attention from pixels to people.
Best Practices for Responsive UX – As a workflow, designing responsive sites can seem daunting, especially if you are new to the process. Designing for multiple screen sizes, the constraints of small screens, and considering touch, all add complexity into the mix that takes us beyond creating fixed width sites.
Webdesign in Common, Web Typography, Tools, Email, etc.
Get your landing pages right: what matters in the ecommerce flow – I have realised that there are just two where your site or app can stand out: the landing page and the product page. Here I’ll explain why this is the case with a focus on the three things to think about with your landing pages.
Building for HTTP/2 – If you’re not familiar with HTTP/2, the basics are simultaneously simple and mind-boggling. Whereas its predecessors allowed each connection to a server to serve only one request at a time, HTTP/2 allows a connection to serve multiple requests simultaneously.
The homepage is dead. Long live the homepage – Homepages appear to be a kind of backstop for users. So, we need to make sure that homepages provide “all of the options”. By this I mean – somewhat ironically – providing good signposting and calls to action.
Designing for Trust: How to Build a Relationship With Your Audience – When designing for trust, you have to think about your users and their expectations. Are you delivering? That’s the first hurdle. Now, you have the tools to jump it.
How to Design Forms That Increase Your Conversion Rate – Potential customers want to quickly receive information online and avoid dialogues with sellers. Forms can be both a hazard and a relief here. That’s why it makes sense to thoroughly optimise them to achieve better results.
Pro Tips to Create a World-Class Design Portfolio (With Examples) – Building a simple online portfolio is quite easy but a great portfolio, which could make your stand out from the crowd, needs to be created with proper planning. I’ve listed twenty proven tips accompanied by great real-life examples.
Animating Your Brand – Let’s talk about how we add animation to our designs, in a way that’s consistent with other aspects of our brand, such as fonts, colours, layouts and everything else. Adding animation to our designs can bring them to life and make our designs stand out.
50 Free Resources for Web Designers from November 2015 – We share our thoughts and ideas via an in-depth article or by giving advice/feedback on a forum, or even by freely offering high-quality resources. Here are this months 50 best free resources for web designers from November 2015
Picking the Right Methods to Improve Navigation – There are a number of methods and metrics to measure and improve navigation. We consistently find that it’s rarely a single method, or even a single phase, that addresses the research questions.
How Will HTTP/2 Change How We Build the Web – The basic of HTTP/2 are simple and yet amazing. It is much more efficient in comparison to HTTP/1.1, which only allowed for each connection to a server to handle one request. HTTP/2 can serve multiple requests all at the same time.
Get Expressive with Your Typography – Remember, all type can have an effect on the reader. Take advantage of that and allow your type to have its own vernacular and impact. Be expressive with your type. Don’t be too reverential, dogmatic – or ordinary. Be brave and push a few boundaries.
How to make your web design more human – A design that feels “human” takes it a step further and also relates to the people who are using it. By taking human factors such as emotions and ergonomics into account, you can make something your users really appreciate.
The secrets to effective card-based design – Following this outline will help you best imagine and conceptualize card-style projects that users want to interact with. Combine these ideas with design theory and your mad skills for a great project that will be fun for users and aesthetically on-trend.
3 Stages to Better Home Pages – Creating a home page is momentous for any business. You spend weeks carefully crafting every line of copy, every image, every color, every icon. But what most businesses need is an iterative, collaborative process with their customers that scales as they grow.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Crafting a Great Branding Delivery – A great design solution is just one part of the project process; delivering a thoughtful presentation is equally as important. Let me also preface that this post is speaking to the visual branding exercise, not all components of branding exercise.
GIMP 2.9.2 Released with Better GEGL Support – This version of GIMP brings several new features to the table, such as better color management tools, enhanced support for file formats and image metadata, as well as layers blending.
Blogging, Social Media, Writing, Content Strategy, etc.
How Important is Design to a Blog’s Success? – There are certainly plenty of blogs that stand out as being beautifully designed, but these are the exception to the rule. Just how much of an impact does a blog’s design have on its ultimate level of success?
26 Tools to Help You Increase Your Blog’s Performance – Spending hours learning how to implement the smallest improvements on your blog is the biggest source of frustration for most blog owners. You probably understand how important it is to give your visitors a great reader experience.
How to Make Your Website More Accessible – While there are a lot of details that go into a fully accessible website, a few broad criteria must be met. The following are the key components that go into site accessibility.
Cookies and WordPress: How to Set, Get and Delete – Cookies offer a simple and elegant solution to do things like maintain sessions for your visitors as they browse, store user preferences and gather data for your site. In this article, we’ll cover everything you need to know about cookies.
Adding Video Backgrounds to WordPress: Pros and Cons – In this article we will determine if video is the right answer for your users, then cover all the necessary technical considerations to get video backgrounds up and running on your site in no time at all.
How to Add Medium-Like Select and Tweet to WordPress (Plus Free Plugin!) – One of our front-end developers, put together this feature for our blog and we thought we’d share it with you today so you can use it, too.
What $wpdb Is, and Why I Try Not To Use It – So our goal is to get into a bit more detail about
$wpdb is and some of its capabilities, and then we’ll answer the more important issue: when you should and shouldn’t use it.
How to Always Get Paid, Not Played, as a WordPress Freelancer – When it comes to WordPress freelancing, you can’t just expect money to show up in your account or at your door on time without taking all the boring yet necessary steps outlined above.
The Latest Rumors About WordPress Are Wrong – Calypso has been the hottest topic in the WordPress community over the past week. We’re going to review how WordPress works today, how Calypso changes the platform, and what that really means to developers and site owners alike.
Creating a Mobile-Optimized Website With WordPress – In this post, I’m going to look at some of the ways in which WordPress makes it easy for you to create and manage a mobile-optimized website. I’ll look at how WordPress core has evolved to embrace mobile, etc
Search Engine Optimalization, Conversions, Analytics, etc.
How to Help Your New Website Get Indexed on Google – You can’t guarantee or get first-page ranking with the same bag of black hat tricks. Today, there’s a new content-driven, user-focused approach to SEO. The process is different, but it is still possible to get your website ranked quickly.
Can You Code This UI Concept? – UI concepts, gotta love them! And we just love seeing concepts come to life and being able to play with them. The process really helps connect design and development, breaking down the idea of concepts being just “impossible”.
Freelance, Business and Workflow Related Stuff
Code Review Done Right – The common approach to code review is in my opinion a sad one. Although the approach is prevalent, I don’t believe it’s the best approach, or even a good one. What follows are my non-technical thoughts on conducting constructive, humane reviews of code.
Course: How to Validate, Create, Market, and Launch a Product – Maybe you’ve never even tried to launch a product before but you’re looking for a blueprint to follow so you don’t launch to crickets.
A behavioral approach to product design – As designers, we need to consider the range of experiences people go through when using our products — understanding what nudges them to begin caring, take action, and stay motivated and engaged over time.
F*cking Brilliant, a great Read or just magnificent Tips!
Who cares about the design language – Arturo Toledo claims that our focus as designers should be on the principles. To make something useful and to design a delightful experience regardless of the platform we’re designing to.
For an Edge Condition, Seeing the Problem is a Problem – We’re not asking our participants to tell us what to build. We’re integrating the stories they tell of their experiences into our collective understanding of the problem.
Be Careful About These 6 Web Design Trends in 2016 – The decision to follow a trend must depend on the needs of your users and your business. The decision should never be based solely on “it’s what the cool sites are doing”. Fads fade. A site built only on trends quickly becomes out of date.
Code rant: Learn To Code, It’s Harder Than You Think – The current fad for short learn-to-code courses is selling people a lie and will do nothing to help the skills shortage for professional programmers.
Good Design – Over the years, however, I have uncovered for myself one layer after another, unfurling like petals sprouting from that seed of a statement. Good design feels obvious
– § –
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