.. Your Daily Design Dosis

Tweet Parade (no.25 Jun 2014)

| Comments Off on Tweet Parade (no.25 Jun 2014)

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

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

Box-Sizing: The Secret to Simple CSS Layouts – Box-sizing is a CSS property that makes CSS layouts work intuitively. If you’ve been working with CSS for any period of time, you know that using properties like width, padding, and border can be confusing.

5 CSS Tricks to Avoid Cross Browser Issues – I was on a private forum today and someone asked about CSS Inheritance and how they can avoid issues when they go from Chrome to FireFox, etc. So I thought of a few way to minimize Cross Browser errors/issues.

What are CSS filters and How do They Work? – Using CSS filters is very simple, however let’s note that the syntax is not like a typical property. It’s still not rocket science but it differs from most values as a lot of the CSS filter values take in parameters.

Getting gulpy – After getting excited about gulp.js, at some point you need more than the shiny but basic examples. This post discusses some common pitfalls when using gulp.js, plugins and streams in a more advanced and custom way.

Faster UI Animations With Velocity.js – This article serves to demonstrate that this dichotomy does not need to exist; websites can benefit from the same level of interactive and performant motion design found on mobile apps.

Ordering CSS for Everyone – I often find myself getting into discussions, or arguments disguised as discussions, about the preferred ordering methods for CSS properties. Yeah. That’s how I party.

Async Attribute and Scripts At The Bottom – The async attribute is now really the only recommended way to be doing async scripts. So, is there any reason to use the async attribute when the script is already at the bottom of the page?

Make SVG Responsive – For an image format that features infinite scalability, SVG can be a surprisingly difficult format to make responsive: vector images do not adjust themselves to the size of the viewport by default.

Understanding the SVG viewBox and viewport – Understanding and setting the proper coordinate system for SVG is really helpful, we reviewed some very basic alterations of an SVG viewport and viewBox which hopefully demonstrates the power and usefulness of thoroughly defining SVG workspaces.

Set Relative URLs With the “Base” Tag ~ The tag in HTML is a relatively little known element, having become a fully fledged part of HTML5 quite recently. It enables you to do two things: set any URL you choose as the base for all relative URLs, and set default link targets.

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

Improving the hamburger button – By showing / hiding the labels during scroll, we can make sure that the user gets a chance to learn the icons associated action. We could even fade in the label once the user scrolls up again.

The Most Fundamental Concept in Usability – While it’s hard to identify one overarching concept that’s fundamental to the whole idea of usability, I think there’s one that underlies most methods and desirable outcomes. That concept is that the developer is not the user.

Easy Responsive CSS Grid Layouts: 4 Different Methods – I’m going to present four different techniques for developing your own CSS grid, and each of them are easily extendable.

What is Website Performance and Why is it Important – In this article, topics like the importance web performance, tips to enhance better performance and some performance testing tools will be introduced.

Ideas to Keep in Mind When Designing User Interfaces – What is a good user interface? As you read through the following ideas, you will see two reoccurring themes: Ease of use and simplicity.

A User In Total Control Is A Designer’s Nightmare – We designers have always had a problem of handing over creative control to the general population — the basic users. There are two reasons for this.

CSS and the critical path – When building high-performance pages we want to stay off the critical path. Critical is the path from the user following a link to the first impression and then the working experience. That’s why we load javascript asynchronously and so on.

For Developers, a Little UX can Go a Long Way – Developers need to realize the benefits of the product design philosophy, because in the end, it’s the users that matter the most. Giving users what they want creates a base of passionate customers that accelerates your growth.

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

Design Principles for Wireframing – This article is an attempt to cut through the noise from the designers, developers, art directors, usability experts, Venture Capitalist and family members to help you design better wireframes and, ultimately, products.

Optimizing the Usability of Online Forms – Form optimization is all about trust. Explain to users why you are asking for information, and keep it only to things you’d need from them. The best forms are simple, obvious and to the point. Don’t waste anyone’s time.

50 Most Useful jQuery Libraries – You will find plenty of plugins on the Internet that are free to use but, finding them can be very time consuming as you will have to go through every site in order to find out the latest and accurate jQuery libraries.

The secrets to using large, expressive type on websites – The use of large, expressive typography offers us the ability to combine the two approaches, conveying our message in a highly visual and textual way.

How to Optimize Your Call to Action so Users Can Commit to Action – CTAs are big opportunities in tiny, little button format. They are the gatekeepers that allow your users to access those magical parts of your website where the conversions happen.

Are Personal Portfolio Websites Dead? – There are some key developments that have risen up over the past decade which, in my opinion, are threatening to eliminate the need for having a personal domain.

Things to consider for your online shop – This is just the tip of the iceberg. If you do this right, I’d be in and out your online shop in no time and you can send over all these great products you offer.

Introduction to Behavior-Based Design – Techcrunch is littered with the stale remains of gorgeous products that were executed to perfection, but failed to get any true user adoption. They failed to fit into, or change, the behavior patterns of their users.

Understanding the pixel grid – Understanding how to work with your icons will help you design better. Symbolset has a distinct approach to fonts that makes this easier for you.

Designing in the browser, pro tips to make it work for you – Design is an iterative process. It’s hard sometimes for clients to picture exactly what you are describing; designing in the browser can get them involved throughout the process rather than just the design phase.

How to get started with layer fonts in CSS – There is another, relatively simple, technique that doesn’t interfere with the markup: by using the ::before and ::after pseudo elements the text can be layered without cluttering up the html.

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

Nobody. Understands. Punctuation. – Yes, you can use punctuation in incorrect ways, but that does not mean there is only one way to use it. A friend recently told me publishers don’t care whether you use an oxford comma or not, as long as you pick one and stick with it.

The Importance of Typography in Design – Making your message believable, professional, and legible all boils down to how you use and manipulate fonts to benefit your needs. When thinking about the importance of typography there are four key elements to keep in mind.

20 Adobe Illustrator CC and CS6 Tutorials – Illustrator is one of the most admired and used programs of Adobe, especially for vector graphics. It is so flexible that sometimes it is used for the web designing as well.

Design Science: What Is Gestalt Theory? – Gestalt theory is something you likely encounter and use almost every day. But do you understand the theory behind your actions? And how can you make even better use of this concept in your design work?

What Branding Is NOT – I felt compelled to highlight some popular misconception about branding and what it is not. Whereas a logo is a part of your brand strategy, a logo is not a brand. Businesses should have a logo and that logo should be placed everywhere, but this is not your brand.

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

Get the Most From One Blog Post: 21 Advanced Content Tips – Variety can certainly make a digital marketer’s life a little easier. When you’ve worked hard to create a perfect piece of content, you can help that content go the extra mile by repurposing and recreating the content in a huge number of ways.

How to Stop Facebook From Using Your Browsing History – Earlier this week, Facebook announced that it was going to start using all of that ever-so-illuminating app and website data it collects to serve us with more targeted ads. Here’s how to stop them.

11 Top Hacks to Enhance User Engagement on Your Blog – Comments are not the only way to measure engagement. Metrics like newsletter sign up, feedback emails from customers, click-through rates and shares could prove to be more important for some websites than comments.

New Facebook Page Redesign: Everything You Need to Know to Optimize Your Page – Facebook is in the process of rolling out a series of changes for all business pages, tweaking the design and layout in a number of small but significant ways, giving opportunity to marketers to make the most of what’s new.

The ultimate guide to email design – You have mere fractions of a second to catch their attention before they move on to the next message in their inbox. But as long as you keep that in mind you’ll have a much easier and smoother experience in designing effective emails.


Automate These 30 WordPress Tasks with IFTTT – As we’re obviously focused on WordPress here, we’ll go over 30 different recipes for WordPress and other services. These are just a sampling. You can go check out others or even make your own.

Hassle Free Responsive Images for WordPress – The <picture> element is landing in browsers, so the plugin/code in this article has been updated to work directly with that syntax. Here I’ll show you how to add support for responsive images to your WordPress site.

How to Effectively Validate a WordPress Website – Simply put, validation of a web page means making the page’s code compliant with the World Wide Web Consortium’s (W3C) standards. This is usually done by checking the HTML & CSS output of your web pages with a validation tool.

We’re Ruining WordPress – If you’re in this for a quick buck then all I ask I that you turn on WP_DEBUG. That’s it.For everyone else who wants to succeed, start with quality first. That’s it.

How to Build an Online Shop Using WooCommerce – Creating an online store to sell products is now just a few clicks away using Woocommerce. Since WordPress integrates seamlessly with WooCommerce, the former is taking your site capabilities to the next level.

The Future of WordPress – WordPress is in a very powerful position. Simply put, every person in the world, providing they have internet access, could benefit from having a website or blog. The potential market is massive.

How to Set Up WordPress Locally for PC/Windows with WampServer – Setting up a local server environment for WordPress will save you time in the long run since you won’t have to install and uninstall a fresh copy of WordPress online each time you test or develop something for WordPress.

Optimizing WordPress with Varnish and W3 Total Cache – Varnish Cache is a caching module for Linux. You should now be the proud owner of a fully optimized, self-hosted WordPress site in the Amazon Cloud using Varnish and W3 Total Cache.

8 ways you can optimize your WordPress site – A fast website will keep your visitors coming back for more. There’s plenty you can do to boost your site’s performance; check out these eight things you can do now to optimize your WordPress site.

Why most portfolio WordPress themes suck for really growing a freelance business – Also – themes tend to have insane code. Especially the WordPress ones. They’re packed with so many features that they’re like densely packed jungles of scripts and conditionals and etc., etc., etc.

How to Use Dashicons in WordPress Theme or Plugin – As WordPress now uses it to deliver icons in WP-Admin, you should also use it in your themes and plugins. By using a font icon set, like Dashicons, you can easily customize the output through CSS.

How to Make a Simple WordPress Options Page – In this tutorial you will be able to create a custom area for advertisements, custom logo, add analytics code, and add social media icons easily through the settings page.

Search Engine Optimalization, Conversions, Analytics, etc.

10 Practical SEO Tips for E-Commerce Websites – In this article we’ll take a detailed look at the topic of SEO for e-commerce websites. Everything that will be covered is very practical and can be realistically achieved to help increase traffic for your own e-commerce site, or for a client.

Google Panda 4, and blocking your CSS & JS – “We recommend making sure Googlebot can access any embedded resource that meaningfully contributes to your site’s visible content or its layout”


Display & Shuffle Images in Several Ways with jQuery.Shuffle-Images.js – The jQuery Shuffle Images plugin that lets you display and shuffle multiple images by simply moving your cursors inside those images, and many other creative triggers (scroll, etc.) to let users view all the images without clicking.

20 Fresh CSS Tutorials and Tools to Try – In this round-up I’d like to share some of my favorite findings on CSS (Cascading Style Sheets) and front-end development. You’ll find time saving frameworks, lessons, tutorials and neat tools.

Creating a Scalable SVG Infographic – In this tutorial, I’m exploring how to make a scalable infographic in the browser using SVG as graphical format. I’m also using CSS3 animation techniques to animate most elements.

Ideas for Subtle Hover Effects – It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects.

Freelance, Business and Workflow Related Stuff

The Art of Client Filtering – Just as clients research you and check out your testimonials before deciding to work with you, so should you do the same. Do they have any negative feedback or comments on the web from their past clients, employees or freelancers?

Pitching for design work: just say no – I realised I was often putting my best efforts into pitches for prospective clients rather than the actual work for my current clients. And for web design briefs, I found I was pitching for smaller and smaller projects.

5 Things I Learned In My First REAL Year of Entrepreneurship – You won’t know what to do in every scenario and you will have to face a lot of discomfort. But like Brene Brown says, lean into the discomfort. Nobody gets through anything by leaning back.

Improve Your Profits Better Understanding Your Clients’ Major Needs – Graphic designers who produced exceptional solutions in these areas were always first in line to get future important projects and were designers that I became loyal to.

Learn the secrets of keeping clients on side – Here I’ll share my thoughts on how to keep clients engaged throughout the project lifecycle, a few techniques to ensure client comprehension as well as things to steer clear of.

How spying on your competition leads to bigger and better freelance gigs – Do you: (a) try figuring things out on your own as you go along and improve one step at a time, or (b) spy on people, stealing their processes and adapting them to your business?

Lessons Learned by Being the Client – We launched our first product, as a side project, and it’s the whole of what we do. So now, in 2014, we find ourselves on the other side of the client/developer relationship.

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

14 Things Learned Designing at Disqus – A few weeks ago I worked my last day at Disqus, the number one commenting system on the internet. Here are some of the lessons I learned while helping design the “web’s community of communities.”

The Bottom Line Value of Design – The value of design has grown so bright that it’s now unavoidably blinding. For those who recognise its importance and act upon it, there’s the potential for transformative outcomes that amass advocacy, improve performance metrics of all kinds and propel bottom lines upward.

Stop Asking Me to “Sign Up” – If you take a moment to consider the wording of your signup button, you can drastically increase how many of your visitors turn into users.

– § –

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.