.. 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 Beginner’s Guide To Grunt: Redux – Back in March 2013 I wrote A Beginner’s Guide To Grunt, at a time when I was just starting out with Grunt, and it was as much a guide for myself as anyone else. Now, 18 months later, I felt it was time to revisit how I use Grunt because I’ve learned a lot more in that time.
Sublime Text for Front End Developers – It’s important to know the ins and outs of the editor as it relates to front end development. Rather than being a step by step guide on Sublime Text, this post if filled with hot tips, tricks and packages that will make you amazing with Sublime Text.
10 Useful CSS Snippets For Web Developers – Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases. Nothing to fear, there are workarounds that you can find online, and here are but just 10 handy ones that you can use.
The Best Sublime Text 3 Themes of 2014 – Sublime Text offers developers so many tools to help with productivity and workflow. Today we’ll be looking at the latest and greatest themes to make our development environment that much cooler. These are the best themes of 2014!
CSS Class Names – I’ve found that using BEM really helps the readability of this type of class, although I still try to make them somewhat general in their name. Again, the class describes what the element is.
Making A Complete Polyfill For The HTML5 Details Element – HTML5 introduced a bunch of new tags, one of which is
<details>. This element is a solution for a common UI component: a collapsible block. A standard element allows everyone to use the same markup for a particular type of content. That’s why creating a robust polyfill makes sense.
Keeping CSS short with currentColor –
currentColor is supported very well across the browsers (IE9+). This was enough for me to start using it in production. I was quite surprised how useful the keyword is: it helps to keep CSS code shorter and smarter.
Interactive float-labels – To get our hands dirty, in an attempt to create interactive float labels, we first need to understand why float labels are so important in the first place. One of the main problems of forms solely relying on placeholder text is that the user loses the ability to validate his own input once he’s finished typing.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
7 Rules for Creating Gorgeous UI (Part 2) – If you’re a UX designer, do a nice mockup after you’ve sketched the wireframes. If you’re a dev, take your next side project and make it look good. I don’t want UI to seem like it takes magical art school skills to do decently.
Making a Case for Mobile First Designs – While I’ve been saying “mobile” first, do note that the principles are not really limited to “mobile” devices. It’s all about better usability, better use of screen real estate and better use of page elements and code – things we should always keep at the forefront, but which often get buried under the bling.
2 years with Angular – I’ve seen and touched more than 10 angular-based projects with different teams and ideas behind. My verdict is: Angular.js is “good enough” for majority of projects, but it is not good enough for professional web app development.
Responsive Images Revisited—High Resolution Images – What makes for a high resolution image? What distinguishes an image as @1x, @2x, or @3x? If we’re going to create pixel dense images for high resolution devices, it probably makes sense to understand a little about what is a high resolution image.
The Ultimate Guide to Responsive Web Design – I’ve organized this guide with helpful tips, codes, plugins, and design examples to better explain responsive web design. This article should provide a large swath of information beneficial to anyone new or well-versed in responsive techniques.
Responsive Type, part 3: Headers and hiearchy – This third instalment of this basic introduction to responsive typography focuses on how best to use size, contrast and style changes to create a strong typographic hierarchy. Type hierarchies don’t just make themselves.
Style Guide Template in CSS – A customizable Style Guide template, to gather design guidelines and share them with colleagues and clients. Using a CSS Style Guide, on the other side, it’s way more convenient!
Shorter code is inconsiderate – A dangerous trend that I consistently see is that code implementations with the fewest lines of code tend to be up-voted and rewarded as the most elegant, creative, and clever solutions. This is crap.
A backend developer’s guide to UI design – For a backend developer, designing a user interface for an application can be difficult, primarily because you are not a hundred per cent comfortable with what you are doing. It’s like writing using your left hand when you’re a righty.
Webdesign in Common, Web Typography, Tools, etc.
Design Ideas: Reusable Style Components – Since we are re-using this style element, it should have a generic name that’s reusable in many different contexts. Coming up with semantic names for these style components is the most difficult part of the process.
The Case Against Horizontal Scrolling Websites – It is declaring itself to be unique and unwilling to fit into societal standards. As a result, a brand using such a website design is often marketing itself on its ‘quirky’ reputation.
How To Create Your Own Front-End Website Testing Plan – Testing is a critical process that developers should integrate into their workflow to minimize the number of bugs that get caught in the quality assurance phase. Front-end testing also needs to be budgeted for — with time, resources and money.
How to Use Pastel Colors in Web Design Projects – Pastels don’t have to have the newborn baby feel to them. These hues can be quite bold when paired with other elements in the proper way. Here we will look at 10 ways to use pastel colors in web design, based on sites that are doing it well.
Common problems with popular designs – Web designers often implement designs without thinking about all of the consequences of that style. In a lot of cases, the web design you choose could devastate the company by causing a poor user experience (UX), resulting in a poorly performing site.
How to Find and Fix Broken Links in a Jiffy – The problem of broken links can be lot worse with outbound links. You will not be getting notified with the change in your linked website. Therefore, you should have a daily check to see whether all of your links are still working.
When to Use Toggle Buttons – Instead of using a dropdown menu, use toggle buttons. Dropdown menus are useful for saving space when you have many options that aren’t relevant to users. But most sort functions have few options that are all relevant for finding content.
7 Deadly Web Design Sins You Might Be Making – The good news is that they’re all simple principles every website should follow. So, whether you get a slick design or not, you still need to know about these design principles and how they apply to your site.
7 Tips for Designing a Better Checkout Page – If you are designing a checkout page, there are so many considerations – functionality, usability, security and design. A checkout page should not be designed as an afterthought; it is arguably the most important page in the online shopping experience.
How to Strengthen Your Design Portfolio – Also, don’t be afraid to be you. It’s ok to write“fuck,” to show your work in the context of a messy office, or otherwise demonstrate who you are and how you tackle problems…as long as it’s honest and relevant to the work.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Tips and Tricks to Design with Pixel Perfection in Adobe Illustrator – There are a lot of articles that show the ins and outs of setting up and using Illustrator, but unfortunately there is some fragmentation of information. Here, I’ll share my prepping process that has proven to work great.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
13 steps to writing effective content – Effective content is writing that engages, entertains, and– most of all– achieves your business goals, such as closing sales, getting mailing list signups, etc. It’s content that people actually want to read.
How to Design Social Media Images for Brand Recognition – The way logos, fonts and colors work together in social media images is an important part of gaining brand attention. In this article you’ll discover how to make your social profiles and visual content align to reinforce your brand and catch your audience’s eye.
Why You Need to Use Video Marketing Your 2015 Social Media Campaign – Well, in case you haven’t heard, social media is now increasingly turning towards video marketing. Over the last few years, online video has proven to be the most engaging and compelling form of content for social media users who watch and share thousands of them every single minute.
The Secrets to Writing WordPress Posts That Convert – Before we dive into the specifics of how to write blog posts with the direct intent of conversion in mind, let’s take a look at the general conversion process for a moment.
Migrating WordPress Database To A New Server – When you are developing any website you will always have different environments for your website, the number of environments you need will depend on the size of the project and how many people are involved in the project.
A Guide To Transients In WordPress – In this post I’ll take you through the code you need to know to use transients and show you some advanced examples of how they can be utilized. I’d like to focus on the fact that transients can be used as an easy cache mechanism for any object, not just simple strings or WordPress related objects.
How to Create WordPress Widgets – WordPress widgets give you the ability to edit a certain part of your WordPress theme, usually on the sidebar. Using its drag-and-drop features, it’s really easy for beginners to add, customize or delete a widget.
Twenty Fifteen WordPress Theme Review: When Less Is More – OK, so the first problem with letting loose on the theme is that I love how it looks. Go ahead, take a look at the Twenty Fifteen demo. And now open the Twenty Fourteen demo and switch back-and-forth a couple time.
How to Move WordPress Comments from One Post to Another – Suppose you are writing a new version of a post and plan on redirecting the old one. That’s fine and easy to do, but of course the comments don’t get transferred when the post is redirected.
Deciding How to Develop Your WordPress Theme Framework – In this tutorial, I’ll take you through the factors you need to consider, including whether your framework will be public or private, whether it will be used by non-coders or developers, and what additional features you want to include.
Saying goodbye to post formats – Post Formats were introduced in WordPress 3.1 as a way to display posts in different ways depending on what the focus of each post was. There are 9 different post formats supported by WordPress (aside, gallery, link, image, quote, status, video, audio, chat).
How to Setup WP Super Cache and MaxCDN in WordPress – One of the best ways to speed up your WordPress site is via caching. In this tutorial, we’re going to setup WordPress caching using the WP Super Cache plugin. As a bonus, we’ll also learn how to setup MaxCDN with WP Super Cache.
The Beginner’s Guide to WordPress Taxonomies – In this series, we’re going to be taking a beginner’s look at taxonomies – from the concept to how they work in WordPress and from how we can use them in themes and plugins to implementing them in our own plugin.
Improve Your Workflow by Managing WordPress from the Command Line with WP-CLI – I came across the WordPress Command Line (WP-CLI) search and replace command a few months back, but this session opened my eyes to more of its amazing features that many WordPress developers, like myself, have been missing out on.
Creating WordPress Theme Options With the Theme Customization API – 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. For users, the front-end theme customizer allows you to quickly change the look of your site, and even get a live preview.
How to Add Custom Buttons for WordPress TinyMCE Editor – In this article, you will learn how to add custom button on your WordPress TinyMCE Visual Editor using the previous tutorial about creating tooltips shortcode.
Search Engine Optimalization, Conversions, Analytics, etc.
5 Things You Need to Know About Social Media & SEO – Cutts’ claim that Google’s search algorithm ignores social signals should not be seen as an invitation for marketers to dismiss social’s impact on SEO. Instead, marketers should broaden their concept of search and SEO to take into account the myriad ways that people find content on the web.
What is Local SEO? – Local SEO basically is the optimization process for the local results in search engines. That means the plugin takes care of your websites visibility in Google Maps and in the so called 7-pack
Building Interactive Scrolling Websites with ScrollMagic.js – ScrollMagic is a jQuery plugin which lets you use the scrollbar like a playback scrub control. Using this, you can build some extremely beautiful landing pages and websites. In this article, I’ll cover my general opinion on scroll plugins, how to get started with ScrollMagic, and some basic and over-the-top creative demos.
37 Responsive Navigation Menus Plugins & Tutorials – Here is the complete list of 37 Best Responsive Navigation and Menu Patterns and tutorials for your use. We hope that this collection proves to be the best and will help you get going in the initial phases of your UI designing project.
Freelance, Business and Workflow Related Stuff
10 Growth Hacks that Take Less than 1 Hour to Implement – Growth hacking is a term coined by Sean Ellis in 2010. It refers to a skill set somewhere in between marketer and engineer; someone capable of creatively envisioning ways to grow a business, but also with enough technical know-how to make it happen
How to Raise Your Prices Without Losing Customers – Price hikes are never popular, of course, and there’s always a risk of losing some customers. But you don’t need to dread raising your prices. Here’s a guide to communicating price changes to your customers in a way that makes them easier to understand and accept.
How To Select The Perfect Clients – You will grow organically from your positive experiences. We all hear about “those other agencies” and how they consistently fail to meet client expectations. Next to “do great work,” this is one powerful way to keep off that list.
7 Ways to save startup costs (that I wish I did 10 years ago!) – After 11 years on the battlefields, I’ve learnt a lot. I want to share some of my war wounds and impart some of my hard-earned knowledge so you can win in this game called business – and in life.
Can you steal the best pricing techniques from restaurants? – Our brains like rounded numbers, so when we compare an odd number we’ll do it to the number closest to it. But should you use odd pricing in your price offers? From my experience, you shouldn’t.
15 Tools That Will Change How Your Web Design/Development Team Collaborates – The following 15 recommendations are ideal to start with, if you’re a creative person and likely to be a complete stranger to semi-automated solutions of this type.
F*cking Brilliant, a great Read or just magnificent Tips!
Stop Breaking the Web – We are crushing the web. Dedicated client-side rendering sucks. Polyfills are used for all the wrong reasons. Those hideous-looking hash routers are bad and we should feel bad. We have been telling each other for years that progressive enhancement is great, and yet we’re doing very little about it!
Writing-first Design – Inexperienced designers are often smitten by the allure of new tools and quick results, so they’ll jump in to Photoshop or Sketch and start messing with layouts and style explorations. Seasoned designers know this can be distracting, so they might start by doing research or drawing in a paper sketchbook instead.
– § –
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