.. 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.
Using backface-visibility and CSS Animations – With
backface-visibility:hidden; we can make an element disappear completely as it turns and have another element waiting behind it to become visible as they rotate together.
Using Sass for “Quantity Queries” – The code above is great, but let’s use Sass to make it a litte DRY-er: we don’t need to rewrite the entire syntax everywhere we want to use this technique. We’ll start off with a single mixin that takes two parameters
Animation Principles for the Web – Animation can be a powerful tool to help our visitors and customers understand and benefit from our designs. There are principles we can apply to our work to make the most of this power.
HTML5 Structural Elements — Series Wrap Up – At the start I didn’t see any harm in using the new elements, but I wasn’t seeing any benefit either. That changed when I learned the new elements communicate to assistive devices.
8 Rules to Improve Your CSS – I’ve put together 8 rules that help me keep my CSS clean, well-written, and in line with best practices. When combined, these rules will give you the ultimate template for good, scalable CSS architecture.
The Command Line for Web Design: Automation with Grunt – You’ll be learning how to setup task runners in this way through this tutorial, and in the process you’ll also see an example of bringing in scripts from Bower packages for efficient deployment in your projects.
The Command Line for Web Design: Automation with Gulp – In the previous tutorial we setup a project and used Grunt to watch and automatically compile Stylus and Jade. In this tutorial we’ll be doing the same, but using a different task runner: Gulp.
Understanding the CSS box model for inline elements – In this article we’ll see how the box model is applied to inline boxes, and how a new feature in the Firefox Developer Tools can help you visualize the box model for inline elements.
Aesthetic Sass 1: Architecture and Style Organization – Proper architecture of the files in your CSS project will ensure that you and your teammates know exactly where specific styles are, as well as where to insert new styles or modify existing styles.
Introduction to CSS Variables – CSS variables give us many of the same advantages that classic variables offer up to programming languages: convenience, code-reusability, a more readable codebase, and improved mistake-proofing.
CSS3 Border-Image Explained – One of the more powerful new CSS properties,
border-image is also one of the best supported, with the exception of (all together now) IE10 and earlier. It is, unfortunately, also one of the most obtuse and difficult to understand.
The Command Line for Web Design: Live Reload & BrowserSync – In this lesson you’ll learn how to create commands that add an extra layer of awesome to your projects, enabling live reload and browser synchronization.
Git from the inside out – To learn more about Git, investigate the
.git directory. It’s not scary. Look inside. Change the content of files and see what happens. Create a commit by hand. Try and see how badly you can mess up a repo. Then repair it.
Disable Text Selection with CSS – There might be some instances where preventing certain parts of your web page from being selected could be beneficial. In these cases, you could try using the
user-select CSS property.
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do – It’s pretty amazing what you can do with the pseudo elements
:after. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
How to Test Responsive Designs – Testing your responsive web designs is crucial because the user experience on mobile devices is quite different from desktops. DevTools is an incredibly powerful tool, and device mode makes it an even more indispensable part of the modern web designer’s toolkit.
Jekyll, Github Pages, and Cloudflare for PageSpeed Win – If you want your site to be found, you need your site to be fast. Google has indicated that sites with faster performance do better in search results.
Getting Started with Jekyll – Probably the most popular static site engine is Jekyll, it’s the engine frequently used for running GitHub Pages. In this article, we’ll look at how to get started using Jekyll and build a simple site with it.
Media Queries for Standard Devices – Choosing breakpoints based on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting one particular situation under control.
Designing a Responsive Website for Higher Education – But as anyone in the industry knows, every day that passes, new technologies are being added to the modern developer’s toolbelt and building a website has only gotten more challenging.
The future of responsive web design – It’s almost incomprehensible in 2015 to build a website that isn’t responsive. The technique has developed to the point that most designers no longer say, ‘responsive web design,’ we say, ‘web design,’ and mean exactly the same thing.
Mobile-friendly sites and SEO – Last month, Google actually announced a change in their algorithm before it had already happened. In this post they mention that starting April 21st mobile-friendliness will become a ranking factor more and more.
Beyond Media Queries — It’s Time to Get Elemental – With media queries hogging the limelight, the discussion around element queries isn’t gathering enough momentum. While media queries help us with RWD, they are limited. We need to look beyond.
Responsive Images 101, Part 5: Sizes – When we last left our intrepid web developers, they had discovered the power of srcset width descriptors, only to be faced with a new challenge—the browser only knows the size of the viewport when it begins downloading images.
Simple, Real And Bug-Free Foundation Development – In this article you’ll learn our methodology for testing responsively, not just on a case by case, page-from-PSD comp. See, we’ve developed a certain system to make sure that nothing’s broken at launch on different devices.
Webdesign in Common, Web Typography, Tools, etc.
How to Delightfully Trick Users With Animation – Remember to use animations moderately. Animations should help ferry users between actions and pages as they complete goals, not act as a pretty layover.
Research: Why You Should Replace Image Sliders With Hero Images – The simple idea is that automatic sliders have never actually performed that well in terms of converting users, which is proven by multiple eye-tracking studies and A/B tests.
Tips for Structuring an Organized Stylesheet – If you’re looking for suggestions on how to build a cleaner and more organized stylesheet then look no further! All frontend languages come with their own little quirks and CSS is no different.
4 simple ways to design killer call to action buttons – In short, for an element that takes up a small spot on your webpage, you’ll have to invest a disproportionate amount of time thinking about how to best present it to your users. Yeah, call to action buttons are that important.
Why Good Design Gets Better Marketing Results – Techniques from color to type to images create an overall brand message and connection to users. Remember that everything you do, or say or design is part of the story of your brand or company. Good design visually equates to good company.
Absolute Best Tools for Crafting Web Typography – Every designer would agree that typography is a huge part of web design. But the process of choosing which fonts to use can be a hassle. Thankfully there are several free online webapps to help you decipher online font families ..
Transparency as a Design Element (plus Best Practices) – There are two different ways to get transparency: by using transparent PNG files or pure CSS. The latter becomes more and more popular since all modern browsers can display transparency via CSS.
Numeric Inputs – A Comparison of Browser Defaults – So browsers are on their own here, and perhaps this time unsurprisingly, there are quite a few different approaches to the UI. In this article we’re looking specifically at
‘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.
9 Tips and Tricks to Render Anything in Vector – In this article, I’m going to show you some handy tips and tricks on learning to “see in vector” and to be able to render anything in vector.
5 Effective Techniques For Graphic Designers – Color. It’s simple, right? Sometimes, though, what you thought would look great ends up looking not so great, and disappoints you as well as your client. Picking up some pro tips and tricks for color can put a smile on your face as well as your client’s.
Hand Lettering: How to Vector Your Letterforms – In the case of lettering, the key is to have relatively few anchor points while utilizing proper point placement and a variety of other tricks to perfect those curves, angles, widths, etc.
20 Typography Mistakes Every Beginner Makes – And How You Can Avoid Them – Much more than just arranging pretty fonts on a nice background, typography is an essential part of most designs — one that can make or break a whole project.
9 Generic Logotypes You Should Avoid When Designing A Logo – There are times when we as designers get influenced with current design trends. It may be caused by false inspiration, unintentional plagiarism, or just a plain result of the changing design times.
Blogging, Social Media, Writing, Content Strategy, etc.
25 Smart Ways To Increase Your Blog Comments – You spend a lot of hours on your post, and finally you publish it. You wait for people to read and leave valuable comments. At the end of the day or week, you feel disappointed because it seems as if no one really cares.
5 Easy and Effective Techniques to Boost Your Email Sign-ups – Your email list represents the most effective way to reach out to people who have already shown you a degree of trust. If you are a blogger, these are your loyal readers.
Introducing Frontend Debugger for WordPress – You could do the smart thing and come back to it later, preferably after some food, a good night’s sleep, or both. Failing that, you could use a handy little WordPress plugin called FrontEnd Debugger.
How to Run Multiple WordPress Sites from a Single Dashboard – Or what if you want to build a business around designing websites for other small businesses? You’ll certainly need a reliable and efficient method for managing all these sites in one place.
What’s Coming in WordPress 4.2 (Features and Screenshots) – WordPress 4.2 will be the first major release of 2015, and it is planned to be released by end of April. There are a lot of exciting things happening around it.
Introduction to WordPress Front End Security: Escaping the Things – WordPress gives you all the tools you need to make your theme or plugin secure. You just need to know how and when to use each tool.
Are you a WordPress developer? You may be bringing service rates down – If you are a WordPress service provider, you’ve probably seen first hand both the explosion of WordPress developers (many of them under qualified), as well as a drop in the overall rates that are being charged.
WordPress SEO for Designers: How to Improve Your Portfolio – Following all the SEO guidelines for optimizing your portfolio must be accompanied with content. Visually appealing, informative, coherent and semantically correct content.
Shortcake Is Now a WordPress Feature Plugin – Shortcake is a plugin that adds a UI to make shortcodes more user friendly. Developers who want to utilize Shortcake can register a UI for their shortcodes alongside add_shortcode, which will expose Shortcake’s user-friendly interface.
WordPress Front End Security: CSRF and Nonces – Today, we’ll look at another security concern for front end developers: Cross-Site Request Forgery (CSRF). Put simply, CSRF is when bad guys try to trick users into doing something they didn’t intend to do.
Making Synchronous AJAX Calls With jQuery – Most of the time we want to make asynchronous AJAX calls, this is kind of the point of using AJAX at all. However, in some rare cases it may be necessary to wait for the result before proceeding
WordPress: It Ain’t Perfect – but Neither Are the People Who Use It – The point I’m making is that you should always take a look at what the context and the use case is. Just like any other tool, WordPress was built for a specific task. You can’t expect it to behave perfectly in radical environments.
Beginner’s Guide to Creating Redirects in WordPress – In this beginner’s guide to WordPress redirects where we will cover what is a redirect, how to create a redirect in WordPress, why do you need, and when is the good time.
Simple User Reviews With Gravity Forms and a Custom Post Type – My client sells a few products and wanted a way for site visitors to be able to submit a review or testimonial about a particular product, and to display those reviews on their respective product pages in his WordPress site.
Introducing Page Parts for WordPress – How do I add extra content to a page, from the admin screen, but outside of the main content block? That’s a question you’ll eventually run into with many different CMSs. And it can be a pain.
Search Engine Optimalization, Conversions, Analytics, etc.
How Big Is Google’s Mobile-Friendly Algorithm? Bigger Than Panda Or Penguin – Google did say when they announced the mobile-friendly ranking algorithm that this would have a “significant impact” on the mobile search results. This is key, it will have more of an impact than Panda or Penguin.
Assessing Mobile Usability With Google Webmaster Tools – In this article, we’ll review how to flag mobile issues in Webmaster Tools, explain the most common issues and learn how to assess mobile usability problems on your website based on these flags.
Mobile SEO – Optimizing For User Experience And Google – Unlike many years ago, you can’t just be satisfied to only meet your needs in today’s web environment. Instead, you need to please two factors equally: the user and the Google robots ranking you.
Creating a “Jump Loader” Animation with SVG and GSAP – The Jump Loader effect relies on a very useful plugin, the DrawSVGPlugin, which is a premium plugin that will help you with many SVG animations and effects.
CSS Fixed Background Effect – Today’s snippet is all about a single CSS property: background-attachment. You can set the background to be fixed within the viewport (
Getting Started with Jekyll – The static site engines of today sit somewhere in between the manual updating of the early web and the content management systems that often replaced them. They make it relatively easy to add and update content, relying on files to store content and data as opposed to databases.
SVG Animations using CSS and Snap.svg – The beauty of Snap.svg is that it is simple to get set up and gives us a tremendous amount of functionality out of the box to manipulate our SVG’s. First step is to include it in our project;
Freelance, Business and Workflow Related Stuff
Email Responses #1: Workflow & Client Education – How you go about educating a client really depends on the client. Generally speaking, I think it’s important to bring up why this process change is needed in the first place.
14 Top Tools Needed for Freelancers – We understand the pressure that comes with being a freelancer, so make your life a little easier with tools for accounting, time tracking, social media posting, document management and more.
F*cking Brilliant, a great Read or just magnificent Tips!
Designing the Web with Jeffrey Zeldman – We have Jeffrey Zeldman, the Godfather of Web Standards, to talk about the past, present and future of making things for the web. We debate the pros and cons of everything from parallax scrolling to data mining.
The big mistake nearly every designer makes – What if instead of booking up to 100% capacity (which more often than not ends up being closer to 120%), we only booked up to an 80% capacity? What if we left more room for growth (personal or professional) and stopped being one with “busy-ness”?
In Design, Empathy is Not Enough – Empathy will get you to see the problems from the users’ perspective, but not the solutions. If users could design a solution to their problems, they would. But that’s your job as the designer.
The best icon is a text label – So let me repeat: don’t use an icon if its meaning isn’t a 100% clear to everyone. When in doubt, skip the icon. Reside to simple copy. A text label is always clearer. It’s an excellent solution that unites the best of both worlds.
Why The Value and Perception of Design Don’t Match – What do you think is the value of design? Do you think non-designers hold the same perception? I don’t. I think for most people the perceived value is less than the true value.
– § –
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