.. 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.
Give Grunt the Boot! A Guide to Using npm as a Build Tool – Do you really want to introduce an additional dependency to your project? “No!”. There is a free alternative that can do the majority of these tasks for you and it comes bundled with Node.js.
How To Do Knockout Text – There are a couple of ways to do knockout text on the web. There is one fairly new way that has pretty decent browser support that is pretty interesting. But let’s cover all the ground.
CSS vs SVG: The Final Round(up) – This article is a roundup of several CSS and SVG solutions, as opposed to being an article comparing one solution that can be achieved using either CSS and SVG.
Toggle Visibility When Hiding Elements – The development team at Medium have discussed some bad practices that break accessibility. In one example, they argue that
opacity is not well supported by screen readers ..
Modern web layout with flexbox – Let me say this first: flexbox is easy. There’s one trick to understanding flexbox which I’ll teach you, after which all will be clear. But first, I want to talk about what flexbox is.
5 Command Line Productivity Tips – As developers, we spend a lot of time on the command line. It’s important to not only be comfortable working in it, but also to create efficiencies for how we work in it.
PostCSS Deep Dive: What You Need to Know – We’re going to take a deep dive into PostCSS and take you through all the major ways you can use it. If you haven’t already had your mind blown by what PostCSS is capable of, get ready for a brave new CSS world
Introduction to Sass — Part 2 – This week I’m going to write CSS in a .scss file. I also want to talk about the different styles of output you can create when compiling Sass. I’ll toss in a few words about adding comments to your Sass files.
Dealing with long words in CSS – This solution will show hyphens for every browser supporting it and will break lines in every other browser – perfect. Altough I have tested this solution in 26 different browsers I am still not sure this will work 100%
SVG `use` with External Reference, Take 2 – SVG has a
<use> element which essentially means: go find the chunk of SVG that has this #identifier and kinda clone it and put it right here. It’s an essential indgredient to an SVG icon system.
UX dilemmas – should we use a button or a link? – Whether you’re a UX designer or just someone who wants to know more about the thought process behind choosing between buttons and links, you’ve come to the right place
Use Cases For Css Calc – Here are the main things I’ve used Calc for so far; some good use cases for using calc() in your CSS files!
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
Adapting Mobile Web Usability for Ad Content Blockers – A browsing experience unhindered by cluttered advertisements, slow loading times and extensive bandwidth usages is a reality close on the horizon to the growing number of mobile users.
UX/UI to make your product viral – The question is: What is ideal process of UX / UI to make the product viral into the world? We usually avoid talking about anything ideal as it is rather contradictory category
Mobile Navigation For Smashing Magazine: A Case Study – My first move towards a new and shiny mobile navigation was to kick the
<select> menu in the bin and look around the web for options and best practices.
A Beginner’s Guide to Performant Design Decisions – I’m a firm believer that good performance requires education for our clients from the first day of our engagement about how and why performance benefits our project.
Privacy is UX – Making the case for bringing privacy into the product development process isn’t easy, especially since finding examples of successful companies that value privacy isn’t easy.
The Pros And Cons Of Building A Mobile App for your Business – As more and more people embrace the smartphone age, the number of consumers online continue to multiply each day.
Do web designers really need to know UX? – Not all web designers need to be UX designers or UI designers, but they should all have some sort of basic UX understanding since their designs play a significant part in how users experience a product or service.
Here’s What a Blind Accessibility Expert Has to Say on the Topic – Website accessibility is a tough topic. On one hand, there’s a lot of what can be considered common knowledge advice. But on the other, we felt that if we’re going to cover it, we need to go above that.
The Perception Of Time – We should have a good understanding of where some widely adopted industry standards, such as page-loading time and the response time for a system, come from.
Is 40 Pixels Enough For Fat Finger Mobile UI? – In spite of the many styli available, fingertips aren’t dead yet: the majority of people still navigate their smartphones and tablets with their fingers.
Webdesign in Common, Web Typography, Tools, Email, etc.
How to be a badass Front-end Developer – So, how to stay up-to-date? How to be good at what you do and still learn new stuff? I think it’s pretty easy. You don’t need to know everything, just need to be focused on right things …
Content Blocking Primer – Remember, this isn’t just about ads. Ads are emblematic of the root problem, but they’re not the actual root problem. If ads were the sole concern of content blockers, then the blockers (mostly) wouldn’t bother to block web fonts.
25 Free Libraries for Custom Web Animation – These particular libraries focus on animating dropdown menus, sliding elements, parallax content and even typography. Best of all these are 100% open source and free to use on as many projects as you see fit.
Design is No Longer Purely Aesthetic – It used to be that websites were designed to captivate and engage. Although this is still an element that designers should invest in, it is even more important to make sure that the design is optimized for speed with a user-first focus.
When to Hide Content Behind Forms and When to Give Content Away – Understand your users’ intents and stage in the sales funnel before you gate content.
25+ Free and Sought-After jQuery Plugins – Here are a few free jQuery plugins that are considered to be the most popular, the most sought-after and the most effective. There are tons of fast, versatile and feature-rich solutions that are powered by it on the wild.
How to display threaded discussions on the web – This seems to strike the best compromise between easy scanning and the ability to drill into specific conversations.
How to Design For People With Accessibility Needs – If we give users a choice about how they want to consume the online content, and carefully think about all the possibilities they might interact with our site, we increase the overall user experience of our design in a significant way.
Why web designers shouldn’t bother designing for the fold – Ultimately, the vast majority of designers who discuss the fold are taking different approaches to the same conclusion: the fold is important, but working with it looks very different now than it used to.
Managing Your Content Management System – How do you sell the client or your boss on spending an extra week or so on making the CMS better? Did you pick a bad CMS or something?
The Importance of Language and Character Set in Web Design – I want to go into a bit of depth on points of Unicode character encoding and HTML entities. I don’t mean for this to be a full master list.
How to create website animations – However, the number of frameworks on offer can be overwhelming. Choices include libraries like Skrollr, Scrollorama, TweenJS and ScrollMagic.
10 Common Mistakes Web Developers Make – 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.
Why you should look at Material Design for your next project – Material Design is more than a set of specifications. There are many aspects in it that can inspire, shape and enhance your next project.
How to design a low-fi wireframe – Lo-fi wireframes help you decide how to structure your site content. Lo-fi wireframes will save you time and heartache by helping you structure your site content effectively.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
The Secret of the Apple’s New San Francisco Fonts – iOS 9 is now publicly released. It’s a subtle change but the system fonts of iOS 9 are now changed to the Apple’s new San Francisco fonts, replacing the previous Helvetica Neue.
How to Create a Brand Guidelines Document in Adobe InDesign – Once you’ve developed the brand for a client or for your own business, you should tie all of the branding concepts together into a Brand Guidelines document.
How to Create Animals Icons in Adobe Illustrator – In this tutorial I will show you how to create an animal icon in Adobe Illustrator. Plus, you will also find a freebie – six animal icons for any use.
Blogging, Social Media, Writing, Content Strategy, etc.
Why visitors only read 20% of your web page – You could stop reading this article now because I’ve already spoiled the ending (more on that later). But if you want to know why people scan and how do deal with it then please read on.
7 Powerful Blogging Insights From Matt Cutts – I used ShortCutts.com and a variety of Google searches to compile a list of 7 blogging and content marketing insights you can use.
Your Blog Posts Are Boring: 9 Tips for Making Your Writing More Interesting – If you’re a boring writer, you’ve got a tough road ahead. I hate to break it to you, but in today’s content-saturated world, people don’t have time to spend on content they don’t enjoy reading.
When to Use Bootstrap for Your WordPress Theme (And When Not To) – Here I’ll look at the pros and cons of using Bootstrap for WordPress theming, and help you to identify when using Bootstrap will help your workflow and when it won’t.
Jetpack Hater? The Top 10 Alternatives for Jetpack-Style Functionality – You’re finally in full control and can use plugins at your free will. Ever thought of replacing Jetpack with plugins you will actually use?
WP_Query Arguments: Posts, Pages and Post Types – You’ll learn how to use
WP_Query to query for posts, pages and custom post types. You can query for specific posts and pages or you can run a query to return posts of one or more post types.
Using Tools for Quality WordPress Development – I’m going to share a few of the tools that I’ve found useful in my professional WordPress development efforts; however, I’d like to clarify that this is not a definitive list of what tools you should be using.
16 Simple Tips & Tricks for WordPress Users – They are not snippets of code or complicated, or mind-boggling. Just some simple ways to get the most out WordPress’s built-in features.
Tips and Tricks to Manage Your WordPress Social Media Campaigns Like a Pro – Social media is everywhere. Almost exhaustively, so. It seems everything has a hashtag and everything is shareable.
Advanced WordPress Management With WP-CLI – The command-line interface has always been popular in the world of developers, because it provides tools that boost productivity and speed up the development process.
Search Engine Optimalization, Conversions, Analytics, etc.
SEO for Copywriters: Key ranking factors to watch out for – Google doesn’t rely on such a simple measurement as “keyword density“ to determine search relevancy. But, if keyword density is over, how is Google determining what your content is about?
4 SEO Tactics That Damage Your Brand’s Reputation – Google is way too smart at this point to reward black hat SEO practices, but bad SEO can also taint a company’s brand. To avoid shredding your brand’s values in the process, employ “white hat” SEO practices instead.
Learning Material Design Lite: Cards – In this tutorial, we are going to look into the cards component in Material Design Lite (MDL). A card may contain text, an image, a combination of both, and may also include other MDL components.
SVG Modal Window – We’ve been experimenting lately with SVG path animations, creating transitions for our image slider and hero slider. Today’s tutorial shows you how to animate at once multiple SVG paths to create a stylish background effect for a modal window
Elastic Progress – Today we’d like to share an interesting progress button effect with you. The button starts as an icon with an arrow and once it’s clicked, it animates into a fun little wire and a label that indicates the download percentage.
Sticky footer with Flexbox – So you’ve got body content and a footer. Unfortunately you’ve got a page that contains a small amount of content, and you notice your footer floating part way up the page.
Freelance, Business and Workflow Related Stuff
7 Things You Need To Stop Doing To Be More Productive, Backed By Science – I realized that working harder is not always the right path to success. Sometimes, working less can actually produce better results.
Evaluating Ideas – An established framework means that no one is trying to justify their idea to me; all ideas are evaluated in a relatively emotion-free setting so we can decide which solutions are the best ones to pursue.
10 Mistakes to Avoid as a Freelancer – When you’re working as a freelancer, whether it’s been two months or two years, you should step back and evaluate how it is going every so often.
Time for Work – My apprentices and I were reviewing their work schedules when it struck me: are they putting in enough time? How much time is “enough time?”
Considerations for Freelancing on a Part-Time Basis – However, no matter how much good freelancing reaps you, it is certainly not everybody’s cup of tea. Therefore, to launch a career in freelancing it is advisable to start on a part-time basis.
10 Pro Tips to a Smarter Design Process – A design process empowers you to confidently innovate because you can map the inception of an idea to its evolution. Your process should never be so ideal that it can’t change. Every project has limitations.
Dear client, here’s why you need a Style Guide – As designers, we often have to convince our clients of our choices. It’s part of the job. We are the experts, and we need to explain why we spend part of our budget on this or that.
F*cking Brilliant, a great Read or just magnificent Tips!
Good Design is Long-Lasting (Part 7) – To ensure the longevity of our work, we should focus on building systems rather than products. A product can grow outdated, falling out-of-sync with the rest of the design landscape.
Our fears as designers, and 3 methods to conquer them – Here are 3 practices I follow to conquer my design career fears, and the same goes for everything in life. I hope that by sharing them some of you will benefit from them.
How directional cues maximize UX and boost conversions – The strategy behind their inclusion is to increase all-important conversions. Anything you can do as a designer, to increase conversions, you should do. Directional cues help do this efficiently.
Why You Shouldn’t Hire a UI/UX Designer – UX Designer and UI Designer are two vastly different roles and a single person should not be hired to be responsible for both. There, I said it!
The End of the Internet Dream? – Today we’ve reached an inflection point. If we change paths, it is still possible that the Dream of Internet Freedom can become true. But if we don’t, it won’t.
A rallying cry for the Weird Wild Web – But the one thing the web had then, and which it has lost a lot since, was the sense of rampant experimentation. So c’mon everybody. Let’s mess this place up again! Get weird! It’ll be better for it!
Doing It Wrong – For me, doing it wrong is a gift and there are not many people who have the courage to do it the wrong way. The moment we understand that “the wrong way” just means “our own way” we know we’re on the right path.
– § –
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