.. 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.
Move And Scale SVG Graphics With The viewBox Attribute – Last week I began a look at the SVG coordinate system, the infinite SVG canvas,and the SVG viewport. Today I want to continue and talk about how we can map the coordinate system of one to the other.
Prevent an element from being selected and copied with CSS – Content displayed on a page using the CSS
content property is never added to the DOM. This prevents the text from being selected or copied without the use of
What nobody tells you about “will-change” – [
will-change] allows an author to inform the UA (User Agent) ahead of time of what kinds of changes they are likely to make to an element. Unfortunately, this property does a lot more than “informing the UA”
I won’t be using Angular for my next project…and neither should you – They have been able to preserve the idea that Angular is actually a good framework to use, when fundamentally, it’s broken in so many ways.
Semantic HTML for Web Content – Semantic HTML also enhances web accessibility. Assistive technologies like screen-reading software parse and interpret our HTML. With semantic HTML, people with special needs will be able to read and navigate our articles easier.
How to write cleaner CSS and smarter SASS – Sass has a well-earned reputation among frontend developers for wrangling complex CSS into smart, reusable code. This is unquestionably valuable for scaling and maintenance, and allows developers to augment the shortcomings presented by traditional CSS.
Making our Media Query Mixins More Flexible – There are a ton of mixins out there ranging from simple to complex. Many of them opted to name the breakpoints with the idea that the names would be more intuitive than a numeric
Learning React.js: Getting Started and Concepts – React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram is written entirely in React.
How to Create a 12 Column Grid System with Sass – There are many grid systems out there, such as Bootstrap and Zurb Foundation, but it’s actually a lot easier to roll one from scratch than many people think.
What nobody tells you about “will-change” – Unfortunately, this property does a lot more than “informing the UA”; it may also change stacking contexts or create containing blocks all by itself. Do not use
will-change until all modern browsers are onboard with it (unless you know what you’re doing).
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
More Optimization Techniques for Improving Website Speed – Here, in the second part of the series, we will go over some slightly more advanced techniques for improving front-end web performance.
Mobile Navigation – This article tries to find alternatives navigations and explains them. Why? Because personally, I have been convinced that hamburger menus are the easy solution which come with a lot of drawbacks.
7 Common Web Form Design Mistakes to Avoid – Bad practices have everything to do with how the web form looks and feels to your respondents. A bad web form sends the message that user experience isn’t a priority, which is definitely not the message you want to send — or receive.
How to Improve Retention With Design: 3 UX Laws to Retain Users – Whether or not this is a myth to be challenged remains to be seen, but generally, we can all agree on one thing: Keeping current customers happy and paying is very, very important.
Faster Font Loading – Font files are large, can require separate font files for bold and italic, and can block rendering if the developer doesn’t work around them. Let me show you a strategy for faster font loading!
Delivering Better Mobile Email Messages with Mobile-First, Responsive Design – We’ve probably all had the experience of opening an HTML email message on a smartphone only to find that it hasn’t been optimized for mobile.
Visual Test-Driven Development For Responsive Interface Design – The Galen Framework — a tool and a special language for visual testing. This has been running for a while, and once the language became mature enough, I decided to perform an experiment with visual test-driven development.
6 types of digital affordance that impact your UX – Affordance extends beyond behavioral or cognitive psychology and into the design of digital interfaces. Understanding affordance will allow you to better understand product and interfaces design
UX accessibility with aria-label – While integrated WAI-ARIA widgets, which require an exacting deployment of interrelated HTML attributes and key bindings, can be daunting prospects, not all of WAI-ARIA is organized in such a strict fashion.
Responsive Tables in Pure CSS – You can pull in content from HTML data attributes using
content: attr(data-label) on the before/after pseudo classes. With this in mind, let’s take a look at how we can reorganize the table structure on mobile devices.
CSS Font Sizing – There are several different ways you can declare the size of a font in CSS. Broadly speaking, the units fall into one of two categories – absolute and relative.
Accessibility and Low-Powered Devices – My wife’s cousin suffers from debilitating migraines. Because of her condition, she has to minimize time spent with backlit screens. I think this story is really fascinating. It’s an interesting intersection between performance, accessibility, and devices.
WAI-finding with ARIA Landmark Roles – Recently, as part of my research for a presentation about web accessibility for non-specialized teams, I asked around about how people were applying the HTML
role attribute in their day-to-day web practice.
User Testing: Why It Is Important and How to Do It Right – An explanation of what user testing is, why it’s important, and some tips for how to do it right. Understanding how people use your product is very important if you want to achieve high user satisfaction.
Webdesign in Common, Web Typography, Tools, etc.
Designing in Browser: a Real Workflow – Continuously and constantly involve the client. Gain an understanding of your dev environment and be aware of any potential bugs or issues. It’s okay to use Photoshop to set the visual and conceptual stage.
The ultimate guide to getting started in web design – Do you want to learn how to design your very first website? Perhaps you’ve designed a few and now you’d like to turn your skills into a career? This article is here to point you in the right direction.
Override Gmail’s Mobile Optimized Emails – Many emails are designed with a large screen in mind. Text that looks great on a large screen can be difficult to read on a mobile device, though. If Gmail deems that the font-size of any text in an email is too small to be legible, it will increase the size.
Web Design Principles That You Should Know As A Designer – Successful website design requires a fine balance of creative talent and technical ability. The success of a website is often largely dependent on usability and utility, how visually appealing it is a secondary factor.
Which fonts convert best in web design & are you using them? – The best web fonts are those that make reading easy and quick without drawing attention to themselves. You know a website is doing a good job when your audience hardly thinks about the fonts.
Using form elements wisely – Forms are really complicated. There are many perspectives to improve conversions, reduce length of the form,completion time, subconscious irritation level and complexity.
6 Best Practices for Designing Landing Pages – The landing page guides a customer from the ad to that next step, the call to action. As a designer, it’s your job to make sure the landing page smoothly takes visitors through the necessary steps from that first ad click to the next step.
Optimizing forms for greater conversions – Great usability centers on conversions. No matter how effective the lead generation campaign, or how advanced the marketing automation software, conversions require forms.
4 tips on typography in UI design – Of course, designing a user interface differs from designing an ebook or blog theme. But the principles of type-centric design still apply. After all, on-screen communication happens through words, and type is the UI of language.
The Key to a Successful Email Marketing Campaign – We no longer read emails, rather, we scan them looking for the useful parts. Yet emails are the best vehicle we have to reach out to people, so we have to overcome their difficulties and make them work better.
Flat Design vs. Material Design: How Are They Different? – Material design really isn’t that big a departure from flat design: both use the same clean and minimal aesthetic. You can basically think of material interfaces as flat interfaces cut apart.
‘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.
Google Web Fonts Typographic Project – There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of this ongoing project is to offer inspiration for using Google’s font library.
10 Free Tools to Create Your Own Font – Some tools that have specialized in modifying existing fonts and creating new ones. Some will already be happy if they can convert their own handwriting into a font, others, however, want to design fonts from scratch.
Blogging, Social Media, Writing, Content Strategy, etc.
Why Should Every Business Have a Blog? – More importantly, you content will help establish trust between your business and your target audience. The more trustworthy you become in the eyes of your target market, the greater the chance of turning them into customers!
Social Media Tools That Help Optimize Your Time – Whether you need help maintaining your social accounts, finding content to curate or monitoring competitors, there are ways to simplify these processes. In this article I’ll share a number of tools to maximize the time you spend on social media.
Moving WordPress: An Introduction – If you need to make a more complex move, such as moving your site manually or moving sites into or out of Multisite, things do get more complicated, but I’ll give you a step by step guide to help you do it.
Ultimate Guide to Using MailChimp and WordPress – MailChimp is one of the world’s leading email service provider, and it is extremely easy to use. In this guide, we will show you how to use MailChimp and WordPress to get more subscribers.
How to Use Gravity Forms as an eCommerce Solution – Did you know you can use Gravity Forms to sell items on your WordPress site? If you already have the developer’s version of Gravity Forms, or if you were looking for a reason to buy it, Gravity Forms might be a good eCommerce solution for you.
How to Add Icons to Custom WordPress Menus – Without Plugins – In this post I’ll demonstrate how you can do this without using any plugins or uploading any images. Instead you’ll make some tweaks to your navigation menu via the WordPress admin and then add some code in your theme file.
5 Questions to Ask before Installing a WordPress Plugin – There are currently more than 37,000 plugins hosted in the WordPress official plugin repository. Choosing the best plugin is far from an easy task.
The screen-reader-text class, why and how? – “screen-reader-text” is the standard name for WordPress, and is used by WordPress core and the front end. As from version 4.2 this class is WordPress generated CSS, so it’s important that you add it to your theme before updating to WordPress 4.2.
As many as 1 million sites imperiled by dangerous bug in WordPress plugin – As many as a million websites could be imperiled by a critical vulnerability recently discovered in WP-Super-Cache, a WordPress plugin that generates static HTML files from dynamic WordPress blogs.
Speeding Up WordPress: Image Optimization – It’s very likely that images on your pages are the largest assets on your website that are downloaded by visitors. Come to think of it, it’s obvious that we should be smart about uploading and using images in our pages.
Child Themes, the Template Hierarchy, and One Sanity-Saving Hack – They’re great because they let you own only what you need to — your changes — while letting you continue to let the creator of the original theme push updates to you.
A Quick Guide to Creating Custom WordPress Widgets – Widgets can be useful for displaying posts, featuring products, showing Twitter feeds and a whole lot more! In this article I’ll show you the basics of creating widgets, so that you can provide better functionality.
Free Design Elements, Apps and Tools for Creating WordPress Themes – It’s always good to build up a “tool kit” of resources that you can use when mocking up your themes and creating the theme demos as good content in your theme demo will really help sell your WordPress theme.
Git and WordPress: 3 Tips to Do It Better – I have ranted about the subject of repository structure before and I have strong opinions about it. In my opinion there is one – and only one – way to structure Git repositories in a WordPress context. That one way is the one-package / one-repository approach.
How To Secure Your WordPress Site: WordPress Security 101 – I want to put together the ultimate guide for improving site security, in hopes that you’ll save this page and use it as a reference for all your security needs.
Speeding up WordPress: How We Optimized List25 Performance by 256% – In this article, we will show you how to speed up WordPress by sharing how we optimized our List25 site to boost performance. You have probably heard WordPress speed is important for SEO.
Moving WordPress: Moving Your Site Manually – Moving a WordPress site can be quite daunting the first time you do it. It involves more than just copying some files from one place to another. In this tutorial I’ll show you how to move your WordPress site from one place to another.
How to get started with C7 Form Builder – In short, it’s a flexible, powerful way of integrating forms into your website. If you chose to, you could even register the forms with a plugin of your own, making them mostly theme-independent.
Search Engine Optimalization, Conversions, Analytics, etc.
The Guide to Google’s Mobile-Friendly Algorithm – Google recently came out with a good news, bad news announcement for small businesses who have a poor mobile experience on their websites. Time is ticking down on the actual update going live, but you still have some time to get your mobile house in order.
9 Things You Need to Know About Google’s Mobile-Friendly Update – Rumors are flying about Google’s upcoming mobile-friendly update, and bits of reliable information have come from several sources. In this post, you’ll find our answers to nine key questions about the update.
5 SEO Mistakes You’re Making During Web Redesign – The concept of incorporating SEO into your redesign before you update your site is something SEOs and online marketers have been preaching for years, and there are a lot of great resources.
The Advanced SEO’s Guide To Mobilegeddon – If you’re so far ahead that you’ve scoffed at other articles about preparing for Google’s upcoming mobile algorithm update, columnist Bryson Meunier has tips on taking it to the next level.
Will Your Website Survive the Google Mobile Penalty? – Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.
18 Amazing Effects You can Create with CSS3 Box Shadows – There’s also plenty that we can do with CSS3 Box Shadows, and in this post we are going to look at how some designers play around with CSS shadows to some great results.
Motion Blur Effect with SVG – Today we are going to show you how to make a motion blur effect and apply it to regular JS or CSS animations of HTML elements. Motion blur is a technique widely used in motion graphics and animation in general to make movement seem more smooth and natural.
Keeping it simple: coding a carousel – In this article I want to approach the creation of a carousel differently: by keeping it as simple as possible whilst not breaking backwards compatibility or have any dependencies.
3D Bold Navigation in CSS and jQuery – Today’s resource is a strong approach to showing a website navigation. Bear in mind, though, it doesn’t have to be the “main” navigation. To increase the focus on the menu, we pushed the main content along the z-axis.
How to Create a Beautiful Fullscreen Single Scrolling Page like Huge Inc – Creating an original effect by combining the scroll hijacking technique with fixed backgrounds and a “normal site” placed underneath the sections.
Freelance, Business and Workflow Related Stuff
Pricing – Well, dear design student, you may be grown in age, but you’re still a little design baby in experience. And learning to price is the same thing as learning to talk. How much are you gonna charge?
Positioning yourself as a freelancer – Instead, focus on how much value your solutions and expertise bring to the table — and that’s more than the total hours you’d spend working on the project. How do you go from labourer to leader?
Breaking Up with Clients – Client relationships are like romantic relationships. At first you are nervous and approval-seeking. After a while, you don’t stutter when talking on the phone, and you become better at standing your ground.
5 things you need to work from home (without going bananas) – I’ve worked as a freelancer for 5 years; much of that time has been spent working from home. Over that period, I’ve learned a lot about what makes working from home wonderful… and how, gone wrong, it can drive you nuts.
F*cking Brilliant, a great Read or just magnificent Tips!
Some Things Can’t Be Wireframed – Wireframes restrict your vision for components, as they’re just re-usable blocks. They tell you, for example, that all text editors look the same. If you accept these limits you’ll never create something like Medium’s text editor.
How The Grid Will Automate Web Design Without Killing The Designer – Can you replace a human designer with artificial intelligence and machine learning? That’s the question, more or less, which will likely plague The Grid long after the company launches its new website creation and hosting platform.
– § –
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