.. 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.
Placeholder Polyfill with Password Support – The problem with placeholders is that the feature is not supported in IE 9 and below. I have written a tiny jQuery-dependent plugin which enables placeholders in browsers that do not support the technology
10 useful CSS generation tools for web designers – That complexity makes it often more tedious to work with CSS. That’s the reason why we need tools to make the creation process easier, so we don’t spend too much time on stylesheets and stay productive.
Code and Keys in HTML: Using the code, var, samp and kbd elements – HTML was originally designed to display technical documents, so it’s not surprising that there are several elements devoted to marking up programming examples and instructions on web pages.
How To Structure Your SVG Code – What’s the best way to organize your SVG code? If all you want to draw is a line or simple shape there’s not much to organize, but what about SVGs with multiple shapes and lines that combine to form a more complex whole?
How to Catch Your Errors in Sublime Text 3 – By linting, we can avoid the little errors that we’ve all been caught up on, like missing a semicolon. Making sure we have a good linting program is a smart way to avoid small errors during development.
Using and Styling HTML5 Meter [Guide] – It is used to show a static value in a specific range, for example you can indicate the storage space used in a disk storage by showing how much of the storage space is filled and how much is not.
Using Gulp in Your Web Design Workflow – Let’s walk through how to set up Gulp on your system and how to automate the most common tasks in the web design workflow. This article assumes that you are unfamiliar with the command line and are starting from scratch.
TimelineMax: Controlling Playback With addPause() – In this tutorial we’ll learn how to control animations, on demand, using a method called
addPause() method is a control method which allows developers to place a pause anywhere on their timeline.
HTML5 Video Effects with CSS Blend Modes – I realized that by using CSS filters and the newer blend modes it would be possible to duplicate many of the simpler video effects directly in CSS: the
<video> element is like any other, and is equally affected by
mix-blend-mode on supporting browsers.
Get Open Graph Data with Node.js – Two of this blog’s most popular posts are Facebook Open Graph META Tags and How to Create a Twitter Card. I’m not at all surprised because we as content creators want some visual control over how our site is represented and shared on third party sites, especially social media sites.
How To: jQuery Add CSS and Remove CSS – There are multiple ways to add and remove CSS styling using jQuery. Let’s say you have two buttons on the page and you want them to change the background color of a different element when they are clicked.
Making Sense of Clip Path – This little used guy is part of a working draft to hide portions of elements via masking and clipping. While clip-path is still not widely supported by all major browsers, it is a great little tool to achieve stylish effects on Webkit browsers.
Chaining Multiple Blend Modes – What’s extra interesting is that you can chain these blend modes together. If you add multiple background images to an element you can also declare which background should use which specific blend-mode.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
7 Things Every Designer Needs to Know about Accessibility – These guidelines will cover the major things you need to know in order for your products to be “design-ready” to meet the minimum of standards in Section 508 and the Web Consortium Accessibility Guidelines 2.0.
Learn to Create Forms That Improve User Experience – Forms are one of the web elements that can constantly be improved. When discussing forms, all bets are off. It depends so much on the audience and every set of forms you design has to match your audience and their needs.
Where Style Guides Fit Into Process – Some graphics that demonstrate different approaches to where a style guide can fit into a team’s process. As you might imagine, it’s a matter of just having one or not that will determine its effectiveness.
WebP Performance – WebP is an image file type that was created in 2010 and is currently being developed by Google. This image format provides lossless and lossy compression to images on the Internet.
Fall of the Designer Part III: Conformist Responsive Design – As websites became responsive, they became a mess of flat colors. For the truly adventurous designer today, the most that can be done to spice up a website is to insert an Instagram photo ..
Can Good Design Be Measured? – Measuring an experience does not require reams of data or perfect data. Nor does it require an awesome, new tool. The things you care about leave tracks, and you may not need as much data as you think to learn something new.
HTML5 and CSS3: Get Your Website Ready for High-Resolution Displays – People had been struggling for a long time to provide images for high-res displays in HTML5. The
srcset attribute has become the method of choice. It allows you to define multiple file sources for different pixel densities.
A Designer’s Introduction to “Agile” Methodology – “Agile” is a peculiar industry term for designers who have never worked in the software space. It’s a phrase which gets used a lot by employers and recruiters, but what is it exactly?
3 responsive design disasters (and how to avoid them) – This article has discussed only the 3 most commonly encountered responsive design disasters, but there are plenty of other ways for a good design to go wrong. Preventing errors is not too difficult.
Let Your Users Wait – One could find differing opinions, including the claim that making the user wait might actually make the user experience better. The guiding principle is simple: time that passes while doing something is perceived shorter than time that passes while waiting statically.
What the canvas element means for accessibility – However, the dynamic nature of the <canvas> element has made it difficult, if not impossible, to use in applications that need to be accessible to people with disabilities. To be accessible, it must meet some of the following principles.
Need for Speed 2: Improving Front-End Performance – Although I made various workflow and server-side improvements, I gave front-end performance extra attention. Here’s what I did, why I did it, and the tools I used to optimize front-end performance on my site.
How To Become A UX Leader – Progress is made when people push hard for it. They stand for things. They forge good arguments. They convince, they challenge, they prove. It’s how the seatbelt was invented. It’s how “user experience” became a common notion and a ubiquitous demand.
Owning Our Responsibility as Web Designers – We must come to the place where we realize that it is ok that the aesthetics of a design are not pixel perfect. Our aim and goal cannot be on our own personal agendas but must be based off our responsibility.
Webdesign in Common, Web Typography, Tools, etc.
jQuery considered harmful – Get any random script with a jQuery dependency that you didn’t write yourself and try to refactor it so that it doesn’t need jQuery. I dare you.
First implementation of Material Design by feedly – After two days of work in Google’s Garage we managed to create a working prototype. Add to that a few weeks of polishing and we are now able to release our first implementation of Material Design.
Wireframing, Prototyping, Mockuping – What’s the Difference? – The terms wireframe, prototype and mockup are often used interchangeably, yet they are not the same. This blog post explains what sets them apart and how they are used.
11 Things You Might Not Know About jQuery – Resig recently annotated the first known copy of jQuery’s source code. In doing so, he offers up a unique perspective on the project’s simple beginnings. Below are some jQuery facts I learned from reading Resig’s source code commentary.
The Definitive Guide To Ecommerce Search Engine Optimization – At some level, every online business is built on an ecommerce business model. They all have customers to serve, orders to take, a great customer experience to give and of course, products or services to sell.
8 Image Mistakes to Avoid on Your Website – There are a lot of mistakes that designers make along the way, from technical issues to image quality. But you don’t have to fall into one of these traps when working with website images.
Ditching Large Images: The Absence of Large Header Background Images – Some folks go for opposite tactics and prefer ditching wide-screen pictures in favor of clean, solid color backdrops. This solution is already named as a fresh trend.
Why the Best Wireframe Style Is No Style – A dysfunctional wireframe can break a team apart if people can’t see eye-to-eye on a site’s vision. A functional wireframe can bring people together if everyone is clear on a common vision. You need visual clarity on your wireframes for this to happen.
Standardization and the Open Web – If we want our community-driven projects to become official, internationally recognized standards, we need to understand the impact of our governance processes as well as we understand the technical specifications for our technologies.
That Intimidating Blank Screen – Research is a stage many designers don’t spend enough time doing or think it’s someone else’s job. It certainly can be but it’s much better to be at the heart of it to really get an understanding of what you need to do.
Call to Action Buttons: 5 Psychology tips to increase conversion – Call to action buttons are the biggest A/B tests run by businesses (they make up around 30% of all tests). The difference between a poor and a great CTA can be anything from a few percent to a few hundred percent and more!
‘gonzolicious’ is a personal Tumblr blog Theme with a responsive layout and tons of powerful features, it’s a great premium theme for all kinds of blogs.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
The Future of Graphic Design – Where we seem to be moving to, according to the leading designers we’ve spoken to for this feature, are forms that respect the principle of much traditional graphic design – clarity of message – but without directly copying the styles, motifs or typefaces of a bygone age.
How to Create a Flat Cityscape in Adobe Illustrator – In today’s tutorial I’m going to show you step by step how to create a warm cityscape using some simple tools such as the Rectangle Tool and Pathfinder from Adobe Illustrator.
The Basics of Illustrator Vector Manipulation – In this post I’d like to cover a brief how-to process of vector manipulation in Adobe Illustrator. I’ll explain the absolute basics of shape tools and how to manipulate them.
How to Create a Set of Productivity Icons in Adobe Illustrator – In today’s tutorial I’m going to show you how to create a set of flat productivity icons that might come in handy in future projects, we’ll be using Adobe Illustrator.
Blogging, Social Media, Writing, Content Strategy, etc.
A Simple Content Marketing Strategy for Creative Folks – Most people naturally want to buy from people they know and like. So, how do you display your work while making it easy for prospective clients to learn about who you are?
Does Your Blog Need a Sidebar? – So, what’s the purpose of a sidebar? Well, it’s an area you can use to promote products or services as well as to get users to do anything else you want. If you are trying to get repeat visitors, you can put links to all your social profiles and add an email opt-in box.
Understanding File Permissions and Using Them to Secure Your Site – Setting your file permissions correctly may not save you from all attacks, but it will help make your site a bit more secure, making it a great addition to your current security measures.
Changing URLs in search results – Yesterday Google announced that they’ll change the way they represent URLs in mobile search results. This post explains what is changing, what this means for you and how our WordPress SEO plugin will help you with these changes.
How to Boost Speed and Performance of WordPress Website – Some valuable tips that will surely help you in increasing the speed and better performance of your site. When implementing them, your website will load faster with excellent speed and performance level.
Thoughts on an API-First WordPress – We all know WordPress is a CMS, but here the author thinks about using it only as an API for content. No front end at all, just URL endpoints that return JSON for use anywhere else.
Why You Shouldn’t Code URLs in Themes or Plugins – It might be tempting to simply code the URL in the same way as you might in a static site. In this tutorial I’ll explain why you shouldn’t do this—and show you the functions you can use to create URLs dynamically.
How to Prevent Trackback Spam in WordPress – Spammers generally use automated scripts sending millions of trackbacks to websites around the world. A comment spam is an example of trackback spams as they are not directed the site itself directly.
The Power User’s Ultimate Guide to the WordPress Admin Area – In this article I’ll work through each section of the WordPress admin and give some examples of features and controls you may not have spotted that could improve your workflow.
Extending WordPress With Custom Content Types – WordPress can be easily extended to fit the requirements of a custom data architecture. WordPress gives you a very simple and straightforward way to extend the standard two data types (Posts and Pages) into an endless array for your custom needs.
Everyday Website Optimization for WordPress – WordPress is the Word-like tool a website owner can use to update text and images on the website. That is basically it. The rest, so will your customers assume, is taken care of. Plugins? Post Types? They don’t know and don’t care about these.
Why You Should Have the Latest Version of WordPress – In recent weeks and months there has been a spate of security issues for WordPress plugins – most notably the cross-site scripting (XSS) vulnerability that has affected dozens of plugins – and some people have started to worry again.
Leaving Money on the Table? Offer a WordPress Check-Up – WordPress is not a maintenance-free product. The most common indication that something is not right, and the easiest one to spot, is site speed going down. This is always a wake-up call for the webmaster to do some maintenance.
Search Engine Optimalization, Conversions, Analytics, etc.
Google’s Mobile Friendly Web: What You Need to Know – This will result in many websites moving to mobile-ready designs and content. But we will look at how, ultimately, a move to a mobile friendly web is good for your business and your customers, and how you can use these changes to your advantage.
Google’s Mobile Friendly Update: Not A Disaster, But An Opportunity – Today marks Mobilegeddon, the day when Google’s mobile friendly update officially launches. As the apocalyptic nickname suggests, this event is causing some anxiety in the SEO industry.
Local SEO: How To Rank Your Local Business – Local SEO is a lot different from your average SEO campaign, and the local search results are changing more rapidly than any other. I’m going to talk you through some of the techniques that you can implement to get results.
How to Improve Your SEO With LinkedIn and SlideShare – With a few simple techniques, you can optimize your LinkedIn and SlideShare assets to achieve higher search rankings organically. In this article you’ll discover four ways to optimize LinkedIn and SlideShare for search engines.
2 Days After Mobilegeddon: How Far Did the Sky Fall? – We have a penchant for melodrama, and the blogosphere loves a conspiracy, but after weeks of speculation bordering on hysteria, it’s time to see what the data has to say about Google’s Mobile Update.
Mistakes many make when looking at website statistics – There are literally thousands of companies that will provide you with all sorts of statistics about your website, and while many of them will be very useful, you need to be aware of a few pitfalls that many website owners make.
Add a Timeline to Your Website with Google Charts – To grab a reader’s attention, it is a good idea to display your datasets in the form of charts instead of tables. In this tutorial, I’ll teach you how to use Google Charts to add professional looking timelines to your web pages.
jQuery Hero Slider – we built for you a ready-to-use jQuery slider, with some built in options like video/image backgrounds and different text alignments. In an attempt to increase user engagement, we replaced the “navigation arrows” with buttons.
Interactive Drag and Drop Coloring Concept – Today we would like to share a fun interactive coloring concept with you. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it (like sections or texts).
30 Cool CSS Animations You Have To See – From loading animations to toggles, and modal windows to shaking elements, this pile of 30 unusual and creative uses of CSS animation can open your mind to more ways you can play with CSS animations.
Simple ScrollMagic Tutorial – triggerHook, setPin, TimelineMax – Following up on my previous ScrollMagic tutorial, we’ll add some more content and learn how to animate GreenSock tween and timeline using ScrollMagic, how to control the duration of our pin and much more.
Freelance, Business and Workflow Related Stuff
Make the most of freelancing: 17+ lessons from the pros – We spoke with a few of our favorite successful freelancers to share their stories, tips, and what to expect when going to work for yourself with you.
Techniques for Building Name Recognition as a Designer – Breaking into the design world is no simple task. The following tips should help all designers build a name for themselves from the print world to the digital superhighway.
Freelancers, Stop Getting Burned by Your Clients – It seems like every designer has a horror story or two (or seventeen) about getting ripped off by a client who refuses to pay. Once it happens, there’s not too much you can do. It sucks, but it’s the simple truth.
F*cking Brilliant, a great Read or just magnificent Tips!
Accepting Our Lack of Control – It’s easy to forget that our users have ultimate control over how they view the web, even though it has been said before. As people making the web, we merely offer suggestions.
Just use pixels – I feel like nowadays, when choosing the units to specify for lengths, it’s just down to authoring preference, team communication and weighing up the pros and cons that fixed (px) or proportional (em/rem) length units offer.
Web Security – “HTTPS Everywhere” harmful – The web is a place where security is increasing essential, and always under threat. There follow some thoughts following many recent discussions of “HTTPS Everywhere” and points west.
Confessions Of A CSS Expert – “At the height of my addiction, I was using Sass
for loops to generate classes for elements that I wasn’t sure would ever exist. It was a bitter pill to swallow, but I had to face up to the truth: I had become a CSS expert.”
Parallax Scrolling: Engaging Or Annoying? – The majority of users didn’t immediately know what to do. Although both sites had a “start here” button on the site, most users either didn’t see it, or ignored it. As a result, those users found the initial interaction confusing and disjointed.
– § –
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