.. Your Daily Design Dosis

Tweet Parade (no.33-2015)

| Comments Off on Tweet Parade (no.33-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.

Yep, I’m back! From now on, new Tweet Parades will be published on SUNDAY’s at 15:00 CET. That’s all folks .., carry on and enjoy the read!

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.

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

Five app prototyping tools compared – I recreated the IF by IFTTT user onboarding in five different high-fidelity prototyping tools to get an idea of the differences between them: Proto.io, Pixate, Framer, Facebook’s Origami and RelativeWave’s Form.

Advanced CSS filters – CSS shorthands filters, like blur(), contrast() or grayscale() are a great addition to CSS, even if SVG filters can achieve really amazing things. Today, I want to go a bit further, introducing new features with CSS.

Web Animations API Tutorial Part 1: Creating a Basic Animation – The WAAPI gives you more control than you might be used to with CSS Animations, but before we get into these extras, we need to set up the baseline: How do I create a basic animation through this API?

Debugging CSS Keyframe Animations – Creating CSS animations may be about learning the syntax, but mastering a beautiful and intuitive-feeling animation requires a bit more nuance. Since animations command so much attention, it’s important to refine our code to get the timing right and debug things when they go wrong.

How widely used are security based HTTP response headers? – When your browser communicates with a site to request a page, the browser and the server at the other end usually exchange a lot more information than just the request for the page and the response containing the page.

PHP 7: 10 Things You Need to Know – I have good news for you: the feature-complete beta of the new PHP 7 was recently released. The 7.0.0 major release contains so many cool features that we decided to dedicate a whole post to it. But first, we need to slide in a few reminders.

Managing Inline Images in CSS – The best way to manage inline images is to have some sort of reference to the original image in your CSS, which then gets converted into a data URI using some kind of processing tool.

18 Excellent Resources for Learning Flexbox – What problems can flexbox help solve? Can you use flexbox in your projects today? These guides, tutorials, websites, and tools will teach you what you need to know about flexbox.

Checkbox Trickery with CSS – Checkboxes are great. Combine them with the right CSS and you can pull off some really neat tricks. This article aims to showcase some of the creative things you can do with checkboxes. Read on and keep in mind that the demos in this article use no JavaScript.

Learn LESS in 10 Minutes (or Less) – In this quick lesson we are going to cover the basics of Less. It is the most widely used CSS pre-processor at the moment, with hugely popular projects like Bootstrap adopting it.

How Floating Works – Although I very rarely use floats nowadays, there are certain specific circumstances in which they are the only viable solution. In these rare cases, I find myself getting frustrated because they don’t work in the way I think they should.

Understanding Critical CSS – The critical rendering path represents the steps that the browser takes to render a page. We want to find the minimum set of blocking CSS, or the critical CSS, that we need to make the page appear to the user.

CSS Architecture: BEMCSS — Block, Element & Modifier – Over the next few articles I want to look into what types of CSS architecture are available, and spend some time evaluating them. The first type of CSS architecture I want to consider is BEMCSS.

Use Gulp to automate your critical path CSS – This week let’s take CSS optimization a step further and inline some critical CSS into our HTML document. You can easily inline styles without complicating your CSS or template organization.

Localizing Times in JavaScript – It can be nice to localize the time for the reader. Time zone conversion is notoriously confusing. And it’s the type of thing computers are good at. JavaScript know what time zone the reader is in, after all.

How to Check Browser Compatibility via Command Lines – CanIUse is a perfect complement for other command line based tools like Gulp, Grunt, and is an all-round handy tool that could boost your workflow eventually.

Using @error responsibly in Sass – Since Ruby Sass 3.4 and LibSass 3.1, it is possible to use the @error directive. This directive, similar to @warn, intends to kill the execution process and display a custom message to the current output stream (likely the console).

Deconfusing Pre- and Post-processing – Sass and PostCSS are basically the same in terms of processing. “Pre-processors” and “post-processors” don’t exist. They are CSS processors, taking care of both authoring and optimisation features.

Vertically and Horizontally Align Any Element with CSS3 Transforms – A super simple and foolproof way of centering anything. It works with relative or absolute positioning, which makes it more versatile than other methods I’ve seen.

Usability, UX, Responsive Web Design, Mobile, Performance, etc.

Let’s talk about Web Performance – The first part covers measuring performance, or understanding what is going on with your site; the second part goes over the improvements you can make to your site, such as shrinking images or inlining critical CSS

Who Needs UX Strategy? – For many of us who have been in the field for a long time, UX strategy is a counterbalance to efficiency-driven, product-centric methodologies like agile, Lean Startup, and Lean UX.

Why empty states deserve more design time – Given that a blank state is what could stand between your user and the incredible UI work you’ve done, don’t these screens deserve a little more of your time and attention?

The Anatomy of a Form – As a UX designer I’ve always been fascinated with error messages. How do you tell your precious visitor that they are doing something wrong? The line-by-line guide to making your online form easy for users to fill out without extraneous errors and missed conversions.

How fonts affect your website’s performance – The way you use fonts on your website can affect its performance. It usually doesn’t have a big impact, so you’ll probably want to worry about the big performance hits like images first.

The A/B test checklist – Building a conversion optimization strategy is a process. Moments before you launch, take the time to go over the following AB test checklist to make sure you have everything you need and to ensure your test results are meaningful and scalable.

A beginner’s guide to understanding UX design – There is no perfect path to embarking on designing a new Web flow or site, but following this guide should provide the proper framework to get you started.

The Language of Modular Design – A well-established language foundation is a powerful tool that allows teams to synthesize their efforts around implementing modular design. But the way a shared design language evolves is a piecemeal, gradual, and organic process

My Latest Lesson in Responsive Design – This was a small change in my design process but I think it represents a larger change in my thought process about how responsive design really works. It closes the gap between representing a dynamic medium with static design vs. designing in a dynamic platform.

Optimising Google Fonts for Fast Load Times – Because we want to keep our website pages as lean and fast as possible, this functionality allows us to combine all of these parameters together to produce a minimal font set.

Webdesign in Common, Web Typography, Tools, Email, etc.

Basic Guidelines for Typographic Hierarchy on the Web – Hierarchy is generated through whitespace, placement, and font styles. I hope that these tips will prove useful to web designers who want to learn more about hierarchal content structure on the Internet.

What Microsoft Edge Means for Web Design – The lack of plugins may affect the result of the benchmarks in favor of Edge as well; however, overall it is good and fast browser, that is almost as capable as any other browser out there.

Taking Full Advantage of Minimalism in Web Design – Minimalism is all over the web these days, and for good reason. Its lightweight layouts and low maintenance make it flexible for responsive design, and its natural elegance is sought by many brands and agencies.

Prototyping: Why You Should Start Designing Websites in the Browser – Neither prototypes nor final designs are the final product – the website is. The goal of any design process is to serve as an enabler to get you to the final product efficiently and clearly.

25 hottest web design techniques – Leading industry experts reveal their top tips on building a more efficient web.A better web means a better experience for everyone. Users should be able to reach what they need without worrying about how they’re accessing the internet.

Making Your Web Designs More Effective With the Golden Ratio – The Golden Ratio is used within graphic layouts of all kinds, especially to balance content that is text heavy. It can help designers create hierarchy and draw users’ eyes to specific areas

How to Start Designing With Developers – As a designer, your role is not just limited to design. Developers may write the code but this is just a means to an end – this “end” being the final product, not the deliverables.

Portfolio Tips for Driving Sales and Engaging Potential Clients – This guide is filled with professional portfolio tips and walks you through the important considerations for staging your portfolio in such a way that you drive sales and engage potential customers.

Motion in UI Design – Obvious animations obey the laws of physics by accelerating, moving and then decelerating in a way that seems natural to us. It’s so natural that to an average user they become almost invisible.

Do hamburger menus work on desktop sites? – Even now, in spite of the hamburger menu’s ubiquity, it still attracts criticism from some circles. Its wide adoption on many sites both mobile and desktop indicates that there’s a demand for it, yet doubts persist.

How to master responsive email – For starters, tables are the only reliable way to create consistent email layouts. Inline styles are a requirement because many email clients do not support external style sheets, and Gmail doesn’t support the <style> element.

Building Your Email Lists – In this guide, we’ll show you why marketers need to start building email lists right away and present you with a 2-part formula you can follow to grow a large and engaged email list that will build your business.

Best Web Animations So Far Part 2: How To – Nowadays creating animation or spicing up the UI with some subtle motion or eye-catching effect does not require special skills or a bulk of the experience. Today we are going to show you some simple and straightforward ways of how to reproduce one at home.

Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.

27 Amazing PSD Effects You Can Use For Free – Whether you’re looking for free PSD text effects, color, logo or even light effects, this list of 27 amazing PSD effects has everything you need. Learn how to do them yourself and use them in your own designs!

What’s a Logo Grid, and Why Should You Use One? – Logo grids are a touchy subject for a lot of designers, but it is a topic that’s fun to debate. Just Google “logo grid” and you’ll find hundreds of deconstructions of logos debating whether they fit a grid or are designed freehand.

The Secret Ingredients to a Successful Branding Strategy – Branding is an imperfect science that boils down to constant change — based on where you are, where you want to be and, most importantly, what the market is doing.

Create a One-Layer Retro Text Effect in Adobe Photoshop – The latest Photoshop update comes with a couple of pretty awesome new layer style features, such as multiple layer style instances and stroke overprint. This tutorial will show you how to use those features to create a one-layer-only, retro text effect.

Take Control of Your Personal Reputation Online With These 6 Tips – Nobody is invisible, if you do not take control of your online reputation, someone else will. Building a personal brand takes time, but just getting control of your reputation online can be done in a few straightforward steps.

Blogging, Social Media, Writing, Content Strategy, etc.

How to Grow Your Twitter Following – Investing in organic growth on Twitter takes time, consistency and commitment. But the rewards are more credibility and social proof. In this article you’ll find simple steps to organically grow your Twitter followers.

Monetizing Your Podcast: 5 Simple Rules for Endorsements, Ads, and Testimonials – Podcasting has become big business. For those of you who aren’t up on the medium, a podcast is simply a recorded audio show that you can download or stream and play any time you like.

11 Ways to Convert Blog Readers Into Customers – If you aren’t yet at a point where your blog content is generating these kinds of results for your business, read some of the tips and techniques that have helped me – as well as the companies I’ve worked with – to turn blog readers into customers.


How to Add Social Sharing Buttons to a WordPress Website – Today I hope to make your decision slightly easier, by showing you how to use Envato Market’s best-selling social networking plugin of all time: Easy Social Share Buttons for WordPress.

How To Deploy WordPress Plugins With GitHub Using Transients – Maybe you need a way to keep your client’s code in sync across multiple sites. Whatever the reason, this tutorial will show you how to set up a GitHub repository to push updates to your plugin, wherever it resides.

How to Write Your First Public WordPress Plugin – This article is some general advice for WordPress developers who’d like to dip their toes into public plugin writing. I’ll cover how to find good problems, and how to approach both writing and supporting the plugin.

Why You Should Have the Latest Version of WordPress – One of the most important aspects of keeping your WordPress site secure, as well as ensuring that it’s running as smoothly and efficiently as possible, is to keep everything up to date.

The Rise of Multi-Purpose WordPress Themes and My Thoughts on Them – All the extra functionality must slow your site down – the CSS and Javascript files are huge, you could build a site with a Multi-Purpose theme and half the code is ever used, but there it all is still loaded on your site.

How to Add a Portfolio to Your WordPress Site – Since there are multiple WordPress portfolio plugins available, we will only focus on the two best options that allow you to easily create a portfolio of almost any kind.

Using WordPress with GitHub – Today we’re going to show you how we build and test locally, then push our changes to production after writing and testing our code. These eleven simple steps should help you get your local theme development synced to your production site using the amazing service that is GitHub.

The 10 Most Annoying Things About Using WordPress (and How to Make Them Go Away) – It’s no fun to have to deal with any of these issues when they pop up unexpectedly, and even though they can take up a lot of extra time to figure out, they’re certainly not impossible to solve.

Takeaways from interviewing 13 great WordPress developers – After interviewing thirteen WordPress developers for a book on getting up and running with WordPress development, I have some key takeaways that I’d like to share with you.

A Look at Why Some Frontend Developers are Decoupling WordPress – Decoupled WordPress is the separation of the backend from the frontend. WordPress is traditionally monolithic, giving you the dashboard, plugins and themes all-in-one.

WP API – Using the WordPress REST API – The WP API’s ability to access and manipulate a WordPress site’s resources remotely is cool enough in and of itself, but its extensibility makes it even more exciting. The WP API provides ways to both add additional fields to resources and to add endpoints to the API.

Search Engine Optimalization, Conversions, Analytics, etc.

Don’t block your CSS and JS files – Don’t block Googlebot from accessing your CSS and JS files. These files allow Google to decently render your website and gives them an idea of what it looks like. If they don’t know what it looks like, they won’t trust it.


Quick Tip: CSS Only Dropdowns With The Checkbox Hack – In this quick tip, we are going to take a look at a CSS only technique for creating dropdowns. It revolves around the checkbox HTML element and some smart usage of CSS selectors without a single line of JavaScript.

Building a Bootstrap Contact Form Using PHP and AJAX – In this tutorial I’ll go over the steps to create a working contact form, utilising the ever popular front-end framework Bootstrap, in combination with AJAX and PHP.

“Scribble” Image Reveal with SVG and Blend Modes – Using a combination of CSS animation, SVG dash-array and blend modes, we can recreate a “scratch to reveal” effect for images or other content in just five steps

Freelance, Business and Workflow Related Stuff

10 Ways to Simplify Your Freelance Life – A freelancer’s life is often everything but simple. Multiple projects being juggled, often along with a day job, emails and phone calls and IM, invoices and payments, time tracking and more.

10 Reasons Why You’re Not Getting Enough Web Clients – This is one of the biggest dilemma any freelance web design professional has. So what is the real reason behind it? Let’s look at 10 common but often overlooked reasons why you’re not getting enough clients.

F*cking Brilliant, a great Read or just magnificent Tips!

Why everyone is a designer… but shouldn’t design – Everyone is a design participant. But you’re the expert. You must drive the design, not allow others to drive you. Understand that the modern designer is equal parts facilitator as creator.

The Hamburger Menu Doesn’t Work – Hamburger menus navigation operate under a simple principle. On the surface, it seems self-evident that if the user wants the navigation menu, they can just click on it.

The ethics of modern web ad-blocking – We’re all going to look back at today’s web’s excesses and abuses as an almost unbelievable embarrassment. And it’s time to stop demonizing people who use tools to bring that sanity to their web browsers today.

– § –

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

Author: Jan Rajtoral

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.

Sorry, comments for this entry are closed at this time.