.. Your Daily Design Dosis

Tweet Parade (no.13 Mar 2015)

.. 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.

Tweet Parade 13

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

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.

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.

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.

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.

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.

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.

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.

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 ..

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 <input type="number">

‘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.

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.

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.

WordPress

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.

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.

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

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.

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 (background-attachment: fixed;).

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;

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.

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.