.. 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.
A Simple Trick for Optimizing SVG Files – All web designers know that reducing the file size of their design’s assets is a good practice to ensure that their website visitors don’t experience long load times, and so their site doesn’t suffer the consequences of poor page speed.
Transitioning to SCSS at Scale – One of the goals of the Front-end Infrastructure Team was to fully transition the CSS codebase to SCSS. SCSS is a mature, versatile CSS preprocessor, and our designers and developers decided to integrate it into our tech stack.
Getting Started with Less – If you’re a front-end developer who has yet to take the leap into using a preprocessor, this is the article for you. I’ll take you from beginning to end on getting up and running with Less in no time.
Control vertical rhythm using Sass and Compass – Now you know some of the most useful functions and mixins that are available to you when using Sass and Compass. Applying and controlling your vertical rhythms for responsive layouts should now be a walk in the proverbial park.
Inline SVG with Grunticon Fallback – Grunticon 2 is out! It’s got a cool new website. Grunticon is a damn fine tool for building an SVG icon system. Grunticon 2 even has a method for injecting inline
<svg>, so that you have all those advantages, like scripting, animating, CSS control, etc.
How To Use Grunt To Automate Your Workflow [Tutorials] – With that rudimentary knowledge of how plugins can be installed and used and how the watch command works, you are all set to become an automation addict yourself.
Designers: Start Coding With uilang – This article will introduce you to uilang’s philosophy and syntax. We’ll start with a simple example to get you comfortable with the basics, before moving to something more exciting.
Improving Your Site with a Font Loader – However including custom web fonts has two main concerns: performance and the flash of unstyled text (FOUT) issue. In this article we’ll discuss what FOUT is and how to solve it by using a font loader.
Understanding the Basics of HTML – This post is geared towards complete beginners yet not an in-depth tutorial that will teach you absolutely everything you need to know about HTML.
random() Function in Sass – Sass now has a
random() function natively built in, so we removed our custom function. The only difference is that the native function starts at 1 instead of 0, so be aware of that with older Pens that used it.
CSS Variables Are a Bad Idea – The introduction of variables to CSS would effectively build a wall between older browsers and new ones. (For the record, as of this writing, only Firefox has implemented CSS variables).
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
The UX of Mobile Settings – More often than not, business requirements in real projects and client’s platform-constrains tend to be so complex that you end up struggling to come up with an intuitive interface.
Client-side MVC’s major bug – If your client-side MVC framework does not support server-side rendering, that is a bug. It cripples performance. It also limits reach and reduces stability.
What is experience design? An in-depth guide to what this mix of branding, UX, service design and more really means – Nailing down precisely what experience design is and how it relates to design as a whole isn’t simple.
Building Websites with a Focus on Usability & Performance – Performance and usability boil down to simplicity and ease-of-use. If the page is taking a long time to load, that’s a problem. If page copy is ambiguous or difficult to read that’s a problem.
Make Your Site Faster – The good news is that there are a few methods for incredible easy gains in the performance and load time departments. Here are five gains you can complete in minutes to make your site faster for all users!
Carousel Usage Exploration On Mobile E-Commerce Websites – Using real data, this article aims for a better understanding of the current argument against carousels and whether they really deserve the reputation they’ve gained.
Delivering a first class mobile site: five key challenges – We should replace ‘mobile first’ with ‘customer first’. Think about the many ways you can personalise the site based on that unique user. Clearly there’s a lot to consider here to deliver an exceptional mobile site experience.
4 Problems Solved by Responsive Design – Not switching to RWD or developing a separate mobile website may end up causing a lot of problems for your users. Below are four common user problems that making the switch to RWD will likely be able to solve.
6 Misconceptions about Responsive Web Design that Just Aren’t True! – However, there are still a lot of misconceptions about responsive design that I’d like to take a crack at debunking below.
Improving Your Site with a Font Loader – In this article I’ve illustrated a common problem developers deal with when using one or more custom fonts in a website. As you have seen using the Web Font Loader we can make the browser’s behavior uniform and predictable and reduce the FOUT to a minimum.
Stop Calling It Responsive Design—It’s Web Design – A responsive layout is the new minimum you’re required to supply, but the rest is just web design. They’re problems we’ve dealt with before and now have to deal with under the new context of being responsive.
Responsive versus Adaptive is not a thing – Adaptive & Responsive are not opposite ends of the same spectrum. Here’s how we keep talking past each other while thinking we know what we mean.
Webdesign in Common, Web Typography, Tools, etc.
How Not to Commit This Awful Landing Page Error – One common error presents itself again and again. If you’re in the business of making landing pages, advising people about landing pages, optimizing landing pages, or purchasing paid search, this article is for you.
Links are broken. These three alternatives have improved our readers’ reading experience – One of the most distracting phenomenons during reading are links. They keep pointing us to directions that are probably valuable, but at the same time force us to make a decision: to click or not to click.
Two thousands words on css typography – Today, we will discuss about the importance of css typography in web design, and which elements must be focused to get better result with typography.
Examples of Animation in Web Design – The coming years will reflect a totally new way of designing our products that solve clients’ problems, which will also mean a totally new way of showing that work to clients in progress.
.htaccess Snippets – A collection of useful .htaccess snippets, all in one place. I decided to create this repo after getting so tired (and bored) with Googling everytime there’s a need of forcing
www for my new website.
The ultimate guide to information architecture – While not every project can have a dedicated IA, understanding the basic principles behind good information architecture can go a long way toward making sure your site’s content is as easy to access and use as possible.
Progressive enhancement: The right path to achieving responsive web design – When it comes to building responsive websites, you have 2 options – you can either go for graceful degradation or progressive enhancement. I will be discussing what is progressive enhancement and how you can implement it in web design.
50 incredible freebies for web designers, February 2015 – Our monthly roundup of the best free resources for web designers with a collection that includes plugins, galleries, icons, WordPress themes, templates and more tools than you can use in a month.
The foundation of a great UX portfolio – After reviewing so many portfolios, you begin to see patterns. You start to recognize the gaps that are missing from portfolios. I want to talk about two of these gaps.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
How to Create Stylish Flat Space Icons in Adobe Photoshop – Inspired by recent events in space exploration and discoveries, we’ll go through an exciting process and create trendy flat-style space icons with long shadow effects in Adobe Photoshop, using simple shapes and path operations
How Important is Typography for Logo Design – However, when it comes to logos, one may ask, “Is it really important to select the right typography”? “Is it only about the looks or there is something extra that the ideal typography can express through a logo”?
Typeface Mechanics: 001 – This new series of posts will explore what I call “typeface mechanics”, the behind-the-scenes work that makes typefaces visually functional. It is what placates the stubborn oddities of human perception, helps or hinders the user, and informs long-standing conventions of design.
Death to typewriters – Type before typewriters was a beautiful world filled with hard-earned nuance and richness, a universe of tradition and craftsmanship where letters and their arrangement could tell as many stories as the words and passages they portrayed.
A designers guide to creating a logo design brief – A design brief is a document containing a set of instructions which outline the desired results of a project. There’s no set way of writing a design brief, but they will always share the same purpose… to set out a list of aims and objectives.
How to Create a Coding Page Illustration in Adobe Illustrator – The current tutorial will focus on helping you create a simple and attractive illustration for a website page specialized in computer coding.
Blogging, Social Media, Writing, Content Strategy, etc.
Tip: Avoid using mailto links in HTML email – Mailto links have never really been an ideal way to collect responses to an email campaign. Contact forms, or simply being able to click ‘Reply’ to an email are by far preferable to creating a new email message… Not to mention, trackable.
Hitting a Plateau with Your Organic Traffic? Here Is How You Keep Growing – Google is constantly evolving. Not only is its algorithm changing, but the type of data shown within its search results is changing too.
The Value of Content – What we’re witnessing here is the first wave of the second world pop-up war. Those of us who lived through the first one can only describe the horrors to our disbelieving children.
10 Code Snippets to Use Images More Effectively in WordPress – Let’s instead explore the ways you can leverage WordPress to get the most out of your images. Below you will find 10 code snippets that will enable you to use images more effectively in WordPress.
Genesis Framework Reviewed:Is It The Best WP Framework? – Recognize the pros and cons of this framework, give it a try (use their 30 day money back guarantee) and become a more productive web designer! The faster you work, the higher you can charge per hour, per project!
5 WordPress Hacks For Conversion Optimization – Making it sweat it out for optimum conversions, however, isn’t anywhere close to waking up with the smell of coffee. Conversion optimization calls for relentless action-taking on some of the minutest details ever.
Creating WordPress Theme Options With the Theme Customization API – The WordPress Theme Customization API was released with WordPress 3.4, back in 2012. It promised developers a standardized way of adding rich options themes, and users a way of tweaking their website in a, well, user-friendly fashion.
Creating Custom Database Tables for Your WordPress Plugins – In today’s post we’ll take a look at the pros and cons of new database tables, how to determine their structure and how to create them in WordPress.
GitHub Updater 4.1 to Add Remote Installation for WordPress Plugins and Themes – GitHub Updater is a plugin that developers often use to enable automatic updates to GitHub or Bitbucket-hosted WordPress plugins and themes.
Unplug Jetpack: Use Jetpack Modules Without Connecting to WordPress.com – Connecting a WordPress.com account in order to use Jetpack can be a hassle, especially when developing for clients or working on your local machine.
Migrating WordPress (and Multisite!) to a New Server – If your website has outgrown your basic hosting plan, it’s probably time to upgrade and move to a new, bigger and better server. These steps should make a daunting task quick and painless.
An SEO Beginners Guide to Permalinks and Slugs – Read this guide to permalinks and slugs to understand the intricacies that go into these sometimes tedious and confusing components of your WordPress sites. We’ll talk about the best permalink structures, how to modify slugs, and more.
WordPress Security Plugins Alone Do Not Protect Your Site – I will not explain which WordPress security plugin works or not, or if all of them are doing a good job. I will explain why WordPress security plugins alone are not enough to ensure the security of all your WordPress blogs and websites.
The WordPress JSON REST API – The WordPress REST API is a huge initiative and feature plugin being developed for the core WordPress project. But it can be a bit confusing if you don’t know much about it yet.
The Ultimate Guide to WordPress Multisite – In this guide to Multisite I’m going to show you everything you need to know to get started with Multisite and create your own network of blogs or sites.
Coding Standards For WordPress [Guide] – By following the WordPress Coding Standards you can learn a little about the coding ethos of WordPress, create more WordPress-compatible products. show the community that you care and you wrangle high quality code.
Search Engine Optimalization, Conversions, Analytics, etc.
It’s a New Age of SEO: Your Approach Needs to Change – It’s important that marketers focus on getting out of their old way of thinking and evolve along with Google and the other search engines in order to find long-term success.
rel=canonical • What it is and how (not) to use it – Rel=canonical has, in the 6 years of its existence, turned into a powerful tool in an SEO’s toolbox, but like any power tool, you should use it wisely as it’s easy to cut yourself.
Is Your Local Site Mobile Friendly? Should It Be? – Appearing on smartphones is critical for local businesses. 94% of smartphone users look for local information on their phone and 84% take action as a result, such as making a purchase or contacting the business.
Ideas and Demos for Animating Article Headers – For this article, I’ve provided a ton of variations of the Medium header concept. Everything from subtle and basic to slightly over-the-top. I’ll also demo how easy it is to prototype these out using just ScrollMagic.
Subtle Click Feedback Effects – A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.
Full-Screen Pushing Navigation in CSS and jQuery – One thing that captured our interest was the full size navigation: it replaces the current content entirely, by pushing it out. That inspired us to create todays nugget!
Animating List Items – When parts of a web page change, adding some animation is a good way to help your viewers understand what’s going on. In this article we’ll look at how this can be used to help introduce new content, by showing and hiding items in a list.
iBooks-like Layout with Light CSS/JS – When you’re using CSS columns, and you set the
column-count, say, to 2. The content will be split up into 2 columns in the visible area. If the content overflows that element (easy to do if you have a fixed height), more columns will be created horizontally.
How to trigger animation using ScrollMagic – I hope that this article will help you to get started with GreenSock and ScrollMagic, it’s by far the most powerful combination for scrolling animations out there.
Freelance, Business and Workflow Related Stuff
Is Working Freelance Really Worth It? – While the above paragraph might make being a freelancer out to be an ideal gig, it has its drawbacks. And some of these can be deal breakers for you. So should you freelance? Let’s weight the pros and cons
Five Easy Ways to Be a Better Web Professional – I tell you these things not to brag or to date myself, but to give you a sense of my background and where I’m coming from when I talk about designing and developing for the Web.
How To Be A Successful Freelancer – People aren’t sitting around waiting to give you money. If you want to be successful as a freelancer you are going to have to make it happen. It takes drive and discipline to make money working for yourself.
How To Increase Your “Sphere Of Influence” And Get More Referrals – Ultimately, it’s a numbers game. The bigger my audience, the more sales I get. The bigger your sphere of influence, the more referrals you’ll get.
How to Set Clear Terms That Will Get You Paid – You can be the best designer or developer in the world, but if you don’t know how to invoice, you’re going to have problems getting paid on time — or at all. Here are three steps to setting clear payment terms.
F*cking Brilliant, a great Read or just magnificent Tips!
The boring front-end developer – Cool front-end developers are always pushing the envelope, jumping out of their seat to use the latest and greatest and shiniest of UI frameworks and libraries. However, there is another kind of front-end developer, the boring front-end developer.
Good Ideas Develop Better Out Than In – Concept development isn’t always a linear process, and sometimes you have to go back and forth to find the best way to realize your idea’s potential.
Daring Fireball: How Flipboard Built Their Web Version – Flipboard more or less built their own web app framework based on the HTML5
<canvas> element, completely eschewing the DOM and traditional CSS. To me, that Flipboard went this route is a scathing condemnation of the DOM/CSS web standards stack.
– § –
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