.. Your Daily Design Dosis

Tweet Parade (no.06 FEB 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.

SVG Basics—Creating Paths With Curve Commands – Today I want to continue the path discussion and talk about the different curve commands at your disposal. The curve commands take a bit more explanation than the line commands so lets get right to it.

4 tips for a smarter CSS workflow – Whether you’ve been coding for years or just getting started, the landscape for CSS development has changed dramatically in the last few years too. Now, we have plenty of tools at our disposal that can help us to build lean, performant CSS.

image-rendering: pixelated – The CSS property image-rendering and the value pixelated are interesting because they turn off the browser’s standard smooth scaling (normally bi-linear interpolation) and replaces it with another scaling algorithm (nearest neighbor in most cases) when resizing the images.

Responsible Social Share Links – Social share scripts are convenient and easy to copy & paste but rely on JavaScript and add additional overhead to your site, which means more HTTP requests and slower load times. Instead, use share links that don’t require you to load scripts for each social site.

Create a 2 Column Layout with Flexbox – My next task was creating a responsive two-column layout with columns of equal width and fixed-pixel margin between them, as well as any amount of padding. It was appallingly easy…and that’s why I love flexbox!

A “simple” D3.js area chart – D3.js is mindbending, and I find the examples on the D3.js wiki to be too little explanation with too much going on. In this example, I will show you how to make the simplest area chart I could devise.

Vector Graphics in Sass – This may be confusing, because CSS and thus Sass is already part of the realm of graphics. Instead of styling content, I wanted to (ab)use Sass to render an image, pixel by pixel. The output can be drawn as a box-shadow value on a 1×1 pixel element.

6 CSS Tricks to Align Content Vertically – Let’s talk about vertical alignment in CSS, or to be more precise how it is not doable. CSS has not yet provided an official way to center content vertically within its container.

Experiment: Using Flexbox Today – In this experiment, I’m attempting to show the value of Flexbox in today’s layouts, outline a strategy for adding it and give a few examples of how Flexbox can give current layouts extra powers that we either couldn’t achieve, or were difficult to achieve before.

Animating pseudo-elements – Pseudo-elements are like getting extra DOM elements for free. They allow us to add extra content, decoration and more to our pages without adding extra HTML, and they can be animated.

A successful Git branching model – In this post I present the development model that I’ve introduced for all of my projects (both at work and private) about a year ago. I won’t talk about any of the projects’ details, merely about the branching strategy and release management.

Redefining Lazy Loading With Lazy Load XT – Lazy loading is not limited to images. It can be used on pages with complex JavaScript, iframes and third-party widgets, delaying the loading of these resources until the user actually needs them.

Website Usability Testing: Why and How To Start? – Usability is a key aspect in a design which makes it easy to use, provide information in a logical sequence, position design elements on their desired locations and there should be a complete absence of ambiguity.

Infinite and Endless Scrolling: Discussing Pros & Cons – Infinite scrolling or endless scrolling promises better user experience. However, advantages are often accompanied by disadvantages. Once you have understood the strengths & weaknesses of endless scrolling, you can use it to enhance your site’s interface.

When to Override Native UI Components – In a few rare instances, we find that it is acceptable to override the standard UI components provided natively by browsers and instead implement custom UI components.

Webdesign in Common, Web Typography, Tools, etc.

The Death of Web Design – There is no longer an obvious value in custom-built design – we can find cheaper, faster and “safer” means elsewhere. Using a tried and tested design is safer in the sense that we know it works.

Examples of Animation in Web Design – Animating elements of an interface serves both a functional and aesthetic purpose: when applied thoughtfully, it can increase a user’s delight and make an interface easier to use by providing context.

The Fold Manifesto: Why the Page Fold Still Matters – What appears at the top of the page vs. what’s hidden will always influence the user experience—regardless of screen size. The average difference in how users treat info above vs. below the fold is 84%.

Why You Should Use Git – Ever since version control systems such as Git have become widely-known and well-used, modern development processes have radically changed. Here are some reasons why Git has the power to improve your development workflow.

Style Guide Generator Roundup – There are a lot of different kinds of generators out there. Many of them are based on workflows or a particular tool, and some of them have been ported over to several different workflows, so I’m breaking these down by workflow.

7 simple rules for mobile typography – Mobile devices have inherent challenges for any typographer: space is limited, and ambient light is often poor. But by making simple adjustments to the techniques we already use for the Web, we can improve readability on mobile devices.

A Beginners Guide to Markdown – If you blog, write or create any form of text-related content for the web, you must already be aware of Markdown. It is a very popular plain text formatting syntax that can be used to create formatted text easily and convert it to valid HTML.

An exploration in Material Design by feedly – Google recently launched Android Lollipop which introduces some major changes and a new visual language called Material Design. With this new OS, Android is bringing a comprehensive guide for visual, motion, and interaction design across platforms and devices.

When can a website be over 1mb? – The thing is, generalising data can be misleading. Not all websites are created on equal footing. In this particular case, users will not “go elsewhere”.

10 Tips for Prototyping Your Designs – Even though there’s a wide variety of prototyping techniques, they all share plenty of common ground In this article, I’ve distilled years of prototyping tips and best practices from the best specialists in the field.

An Introduction to Front-End Developer Tools – The tech stack for front-end web development has expanded vastly in recent years. For veterans of the industry, the progression has been gradual, however for folks just starting out, these changes may not be the easiest to digest.

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

Margins and Spacing in Design and Print – Spacing and Margins are one of the key secrets experienced designers use to create clean well balanced design. The fact is the principles are quite simple where anyone can follow and drastically improve their visual content.

The Ideal Length for All Online Content – I dug around and found some answers for the ideal lengths of tweets and titles and everything in between. Many of these could have been answered with “it depends,” but where’s the fun in that?

WordPress

Using wp-config to Customize WordPress – In this article, we will take a look at the wp-config file in order to know what it is, what it contains, and what we can (and must not!) do with it.

Beginner’s Guide to Adding Your Own WordPress Hooks – Hooks are not just for use in WordPress, they are essentially a design pattern you can implement in your own work. I’ll show you how you can create your own hooks to make it easy for you or others to build upon your work.

A simple snippet to force SSL for your whole site – So, if you want to force pages to load over HTTPS, you need to add a little snippet so that even if someone tries to access your site over HTTP, they will be redirected to the HTTPS version of the page they’re trying to reach.

WordPress Hooks: Actions, Filters, and Examples – Hooks in WordPress allow developers to easily tie their own code in with the WordPress core code base, themes, and plugins. In this article, we’ll discover what hooks are, go over the different types of hooks, and look at a few examples of hooks in action.

Preventing WordPress Spam Using No Captcha reCaptcha – There are many different solutions to prevent bots from submitting web forms; one of the most popular solutions is reCaptcha. reCaptcha actually displays an image with some text in it and user has to enter the text to submit the form successfully.

WordPress robots.txt Example – The robots.txt file is a very powerful file if you’re working on a site’s SEO, but one that also has to be used with care. It allows you to deny search engines access to certain files and folders, but that’s very often not what you want to do.

How to use custom taxonomies in WordPress – In this article, I will cover custom taxonomies and how they are created. I will make three custom taxonomies to show how the code can be reused with ease and also adapted to the needs of each taxonomy.

How to Roll-Up your Data in Google Analytics – How your account, properties and views are planned and organized in Google Analytics will affect all of your reporting moving forward, so it is a step that shouldn’t be rushed overlooked.

Control How Google Indexes Your Content with Meta Tags – The meta robot tag is a consensus meta tag among search engines like Google, Yahoo, and Bing. The use of the meta tag is to let web developers have accessibility control for web pages, against search engine crawlers.

How To Improve Your Ranking: 5 Quick SEO Tips – All you need to do is follow some quick tips and implement them as good as possible. Then your ranking will improve almost by itself. We will show you five simple tips to boost your website.

Tutorials

How to Build a YouTube Video Website Background – In this article, I’ll show you how you can build a cool video background site using YouTube. We will use jQuery.mb.YTPlayer.js to customize and control the look of the YouTube video background design.

Freebie: ScrollMagic Starter Templates – Today we’re giving away three ScrollMagic website templates for you to use and repurpose. Each of them are unique and built with Bootstrap 3 so you can quickly reuse them.

The Gooey Effect – SVG filters are quite powerful. It is a pretty extensive topic. Here we will only cover the basics necessary to understand how this effect works.

Bouncy Navigation in CSS and jQuery – A full-screen navigation, with floating menu items. We used CSS animations and a pinch of jQuery to animate navigation items, and let them bounce in and out the screen.

How to Create a Sticky Navigation – Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport.

Freelance, Business and Workflow Related Stuff

Three Things I Learned at Teehan+Lax – There are things I learned at T+L that I will take with me everywhere I go. I’d like to take a moment and look back at the three most important things that made T+L special to me

10 Ways Designers Solve Problems – Designers, by nature, are problem-solvers. Every project is a problem or challenge that involves helping other people understand something. Designers have to see through all the fog and clutter to create a solution.

Freelancing 101: 10 Ways to Make Clients Look Good – Making your clients look good will help you create lasting relationships and trust. It can also help you increase your earning potential. Here, we’ll look at 10 ways you can help out clients and possibly grow your freelance business.

What No One Tells You About Working From Home – I’m sure you can easily imagine the benefits of being able to work at home, but until you’re actually there, it can be difficult to think of the downsides. Here are some things to consider before you decide to work from home.

How to be found by clients – It’s the purpose of your site that truly demands either one or the other in your choices. It can be both. What many creatives forget about a portfolio, is that it needs to read like a story for some people who hire creatives.

How To Streamline Creative Dialogue – I noticed that we often discussed visual or technical issues without a clear understanding of the business goals — sometimes even without clear objectives at all! We approach this simply by asking the right questions and listening carefully.

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

Reframing Accessibility for the Web – We need to change the way we talk about accessibility. Most people are taught that “web accessibility means that people with disabilities can use the Web”—the official definition from the W3C. This is wrong. Web accessibility means that people can use the web.

“God is in the details.” – The details are the last 1% of a product. They’re hard to define, they’re impossible to scope, and they’re absolutely no substitute to thorough research, great design and clever engineering. They can, however, be the difference between an average experience and a great one.

Ol’ John Henry – So… Are WordPress Themes, SquareSpace, Macaw, Froont, and The Grid killing web design? My new answer is: Probably. Probably a bit. In order to win, you need to do more than the Machine; faster, better, and for cheaper.

Visual Design might be a thing – If the problem has a story that can be traced back, the environment is supportive, and answers are available, then I can certainly see instances where designers learn not to go hunting for the problem.

– § –

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

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.