.. Your Daily Design Dosis

Tweet Parade (no.05 Jan/Feb ’14)

| Comments Off on Tweet Parade (no.05 Jan/Feb ’14)

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

A better pull request – If you’re using Git, you’re probably using pull requests. They’ve been around in some form or other since the dawn of DVCS.

The ultimate guide to SVG – Alright, for the newbies among us, SVG stands for Scalable Vector Graphics. SVG files are rather simple things, in theory. They’re just text files with a bunch of XML inside.

Automate Your Tasks Easily with Gulp.js – Much like Grunt, Gulp is a javascript task runner. Gulp however prefers code over configuration. Being that your tasks are written in code, gulp feels more like a build framework, giving you the tools to create tasks that fit your specific needs.

Fun with line-height! – The line-height property in CSS controls the space between lines of text. In this article we’ll focus on some trickery. If you know (or can figure out) the exact value of line-height, you can do some neat stuff!

CSS Level 4 Selectors to Watch Out For – We’re all used to new features being introduced to frameworks left and right, but we often forget that new features are constantly being developed in the core web languages we use every day.

Using The CSS `:target` Selector To Create JavaScript-less UI Effects – The CSS `:target` pseudo-class selector is used to select and style the target of an internal link in a document, the fragment of the page referenced in a link’s `href` attribute.

Compositing And Blending In CSS – Many creative effects can be created using CSS blend modes, and when combined with other technologies, they open a door to endless creative possibilities.

Weighing SVG Animation Techniques (with Benchmarks) – After working with a number of SVG animation techniques for a few months now, I can give you a basic overview so you can compare them yourself. There are good reasons to use each one of these methods.

Using the <base> tag with Hosted Assets – So by setting the href of the <base> tag, the relative URL’s of those srcs were automatically adjusted correctly. Usually it’s just a copy and paste job, so no big deal, but it certainly is a nice touch to clean up the HTML for readability sake.

A Journey Through Client-Side Testing with JavaScript – Many developers follow test driven development as a workflow. I believe that writing tests makes software development much more interesting and generally leads to better code.

Cutting out the inner part of an element using clip-path – The clip-path property in CSS is used to hide areas of an element outside the path. But we can also cut out an area inside the element this way.

Playing around with CSS text-shadow – CSS text-shadow used on it’s own, and layering multiple shadows together, can create some beautiful effects. Unfortunately, it seems combining this with SVG gradient fills causes some strange results across browsers.

Performance of AngularJS, ReactJS and KnockoutJS Compared – I’ve put together a quick page that allows you to see the rendering time difference between the three frameworks, plus the raw DOM manipulation. It’s what I’ve been using to figure out how long each framework takes to render large lists.

Flash of Faux Text—still more on Font Loading – Prioritize your fonts by loading only your roman (or plain/normal) font first, which will cause the browser to use font synthesis to create faux-bold/italic versions automatically. Next, trigger requests for the real bold and italic fonts.

CSS Units: Angles, Time and Frequency – All of these units (with the exception of turn) were associated with aural style sheets: styles designed to guide the pronunciation of words on web pages in cooperation with text-to-speech systems.

Common pitfalls when working with Javascript Arrays – Apart from being much slower than regular arrays, they can be quite problematic when misused. I will be summarizing some of the pitfalls that I have come across, along with tips to avoid them.

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

Fluid Text Inputs – A fluid text input has a width that is defined by its content. If you have experience with web programming, you’ll recall that HTML text inputs are not naturally fluid.

Native Web Apps – The web platform has evolved. Browsers are no longer just document renderers, they have become the most capable and ubiquitous application runtimes on the planet.

Getting Started with Foundation for Apps – Foundation for Apps intends to fill the void we currently have in these frameworks by adding a completely new grid and harvesting the power of Angular to make our job a whole lot easier.

4 Questions to Ask When Optimizing Your Site for Mobile – Although you may recognize the importance of marketing to your mobile audience, it may be difficult to know exactly where to start. This can be particularly difficult because there are so many things to consider.

Common Usability Mistakes You Should Avoid – Usability, by all accounts, is equally important because even the best web designs may fail to impress if the website in question is not usable enough. I will discuss some of the most common usability mistakes that you need to be aware of.

Why we can’t do real responsive images with CSS or JavaScript – As the browser is munching through the HTML the preloader sees “<img>” and rushes off to fetch the resource before it’s even thought about speculating about considering doing anything about the CSS or JavaScript.

Top 5 tips to improve mobile UX – Those looking to improve online website access for smartphones and tablets must likewise appreciate the mobile-user experience (mobile UX) must be customized for this environment.

Why improving The User Experience Could Be The Best New Year Resolution – It is never a bad time to take stock of what works for your business but at the start of a new year, it seems particularly apt to consider all the options.

Why You Should Avoid Using Modal Windows on Mobile – One of the most frustrating things users experience on mobile sites is a modal window. On desktop, modal windows display without issue, but on mobile, modal windows get cut off because of the smaller screen size.

How to Add Windows Tiles to Your Website – These Tiles are akin to the icons in iOS or Android, except that they can be resized to show different states of the app, and they even show a glimpse of notification updates instead of just being static icons.

How to Convince Your Boss to Switch to Responsive Web Design – While most digital marketers today would argue that Responsive Web Design (RWD) and development is a necessity for successful businesses, there are still some designers and decision makers who insist on dragging their feet.

Checklist for improving website speed and performance – We will explain the significance of website loading speed for the success of web projects, provide advices and recommendations to be followed in order to have good performances and we will share with you some useful tools and resources.

Angular momentum – My own anecdotal experience suggests that Angular is not only suitable for enterprise software, but—assuming the definition provided above—Angular is enterprise software.

Why usability testing should be part of your design process – These are just a few ways you can test your product, but make no mistake—usability testing is important. It should bob and weave its way throughout every aspect of the project cycle.

Site Speed & PPC Performance: Why You Can’t Ignore A Slow Site Anymore – Since Google is in charge of the AdWords product just as much as its organic search product, page load time matters just the same – and Google will tell you it can impact the performance of your ads, too.

Webdesign in Common, Web Typography, Tools, etc.

The When, Why and How of Designing in Browser – If you’re a designer in the tech industry, you’ve probably been exposed to or read articles about a hot topic in design today: designing in browser. The concept is as simple as it sounds.

Maintaining Quality at Scale – Code conformity. On a professional team of any size, it’s important for everyone to write code the same way. This helps spread good practices and makes maintaining other peoples’ code much easier.

The 6 Key Steps to Improve Your Website’s Loading Speed – Website loading speed has become one of the biggest determinants of your site’s value and ranking position, making it one of several necessities for optimization and an absolute must for website owners who want to rank well.

Parallax web design: What’s all the fuss about? – With clients wanting to be ‘down with the kids’ and technology and design evolving at such a rapid pace, we thought we would offer you an insight into what the parallax trend is all about.

What is an Interaction Designer? – But what truly is interaction design? And what makes you an interaction designer? Here, we’ll answer both of those questions and offer a showcase of some great interaction design work.

5 Guidelines for Designing Better Icons – Are you having trouble choosing the right icon for a specific problem? This article will give you an insight into principles, problem solving and collaboration required to come up with something that fits!

Stop More Bugs with our Code Review Checklist – Checklists are a great tool in code reviews – they ensure that reviews are consistently performed throughout your team. They’re also a handy way to ensure that common issues are identified and resolved.

20 jQuery Plugins for Adding Something Useful and Unique to Your Site – Playing with the demos and bookmarking more pages than I will ever use in a post, I did eventually settle on 20 plugins that will either add something unique or something really useful to your site.

Creating Micro Content in Web Design – Using as little content as possible has definitely become a new trend. A concise manner of presenting data proves to be more beneficial and effective.

How To Design Enticing Registration Pages – In this post I’d like to examine a number of registration pages which utilize superb methods of interface design. It’s possible to create a well-designed website but ignore the facets of great interfaces and user experiences.

How to perfect your websites with marginal gains – Any improvement to an already refined website is incrementally harder. Finding a 10% performance boost will introduce unwanted side-effects such as loss of quality.

How to boost your clients’ revenue (and your own) with landing pages – If you happen to be working with a client who’s just starting their online adventure, chances are they simply don’t know how crucial a landing page can be in defining their success online.

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

10 Commandments of Typography – Typography needs moral but mostly aesthetic instructions. Here is a list of 10 Commandments of Typography, rules to follow and tips to know to be a better person, or at least a better type designer!

10 Creative Photo Manipulation Adobe Photoshop Tutorials – The best of creative Adobe Photoshop Tutorials, mostly about photo manipulations, mixed media and retro poster style. Check out new tricks, techniques that you can learn and apply it to your own designs.

14 Mockup Templates for Easy Website Hero Images – Hero header images containing various office peripherals and everyday objects are becoming increasingly popular, particularly for design agency and portfolio websites.

How to use color and contrast to make your message stand out – Colors evoke various responses from different people. Even the shade of color has an effect on human reaction. Why not take advantage of color psychology to influence your customers?

10 Essential Tips & Tools All Adobe Illustrator Beginners Should Learn – I’m here to share with you my 10 essential tips and tools all Adobe Illustrator beginners should learn, and link you to a tutorial or two which will help you learn how to use them.

How to create a killer branding questionnaire – To help you create one that’s sure to improve your productivity and cut down on time wasted veering to a new course halfway through the design process, I’m sharing my branding questionnaire below

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

How to Catapult Yourself from Diddly Squat to a Booming Online Career – You may even feel intimidated by others bragging about their huge followings, their launch successes, and the amount of money they’re making. But remember, everyone starts at zero. Zero followers. Zero subscribers. Zero profit.

Experts Weigh In: 21 Email Marketing Mistakes to Avoid – Successful email marketing tactics are spread across the web. But even with ample resources available and advanced email marketing software, mistakes are regularly made.

5 Easy Ways to Drive Repeat Traffic to Your Website or Blog – Your goal as website owners is to keep users coming back. Today I’m gonna give you 5 easy tips for increasing your user engagement and getting first time visitors back to your site over and over again.

Why Blogging Isn’t Good Enough – Blog posts aren’t getting it done. Anyone can blog and almost everybody does. Your blog post is locked in a cage match with millions of other posts shouting at a limited pool of readers.


How to Add Post Filters to Your WordPress Site – A frequent request I come across is the ability to let users filter, or sort, posts on the front-end of their website. Perhaps users want to view posts alphabetically, or maybe see only those posts with thumbnails?

How to Use SSL and HTTPS with WordPress – Having an SSL certificate for your site is an essential step in protecting your site and its visitors, but it’s not the only security measure you should consider using.

Best Practices for Managing Your WordPress Site – In this post I’ll look at some of the things you need to do to manage your site effectively over time. Managing your site isn’t difficult. For your site to be successful, you’ll need to manage it on an ongoing basis.

GenerateWP Introduces WordPress Custom Code Snippets – In celebration of the site’s two year birthday, GenerateWP is introducing custom code snippets, which will allow users to save their own snippets in a public and/or private library.

Making the Most of Images On Your WordPress Website – There are two very important reasons you want images on your website. And it doesn’t matter if it is an eCommerce site, a blog or your company’s website.

Search Engine Optimalization, Conversions, Analytics, etc.

Is Your SEO Killing It or Getting Killed? – Spending a few hours to optimize a page on your site for low hanging fruit can often yield near immediate results in the search engines. But there is more to successful SEO than going after the low-hanging fruit.

How to Filter Out Fake Referrals and Other Google Analytics SpamWhat are these sites and why are they linking to your site? Well, actually, they’re not linking to you at all. These sites represent fake referrals.

5 Essential SEO Techniques To Master In 2015 – As marketers refine their skills sets, as search engines improve their search products, search engine optimization has come from humble beginnings to become a recognized strategic field of marketing.

Google Webmaster Tools: Search Appearance – This is actually the first post in a series on Google Webmaster Tools. We’ll be going over every major menu item in Google Webmaster Tools, starting with Search Appearance.

How to Use Google Webmaster Tools to Improve Your Website – In this article we will take a closer look at the Google Webmaster Tools’ toolbox and see exactly what’s there and get some insights on how to interpret and apply the data.


Pure HTML5 file upload – today we will develop a great HTML5 file upload form with progress bar and preview (at client-side). We have already gave you jQuery based solution, but today’s application don’t require jQuery at all.

Morphing Modal Window in CSS and jQuery – Modal windows are used to display related content, by hiding temporarily the main content. If we imagine our web page as layers distributed along the z-axis, modal windows are on top.

Freelance, Business and Workflow Related Stuff

Six Common Freelancing Myths – Just as the freelance industry is exploding with undiscovered, talented (and some not so talented) people, the myths that come with it are thriving as well.

Work Smarter: Reduce your hours and get more done – Working long hours is not a badge of honour. Yet despite this focus on profitability and hours worked, I still see inefficiencies in the way many people work. Instead we should be focusing on efficiency, by working smarter and not harder.

How much should you charge for design? – The biggest problem with using a price list is that it doesn’t include you in the picture. Don’t price your work without including factors that take into account your feelings, motivation, and the value of your future.

Adding Value To Your Freelance Business Through Scarcity – Today I want to talk about moving to the left along the curve and adding value through differentiation and uniqueness. I want to talk about how you can add scarcity to your business.

Soft skills advice from design leaders – How you relate and interact with those around you is at least as important as your talent and technical prowess. This is not to say that your capability won’t get you in the door; it will.

What Should I Charge? How to Justify Your Freelance Rates – Most freelancers fail to significantly raise their prices because they don’t justify their price. They don’t offer any context around what they’re asking for. So the client needs to reason, “is this worth the price?”

Optimizing Your Workflow – The journey to optimizing your workflow is a never-ending process. Each day, you’re given more and different tasks to handle. Always remember: it’s a job to be automated!

Complexity in Web Development: A Simple Guide – Complexity makes web work unpredictable and very difficult to budget, but it’s also a lot of what makes it fun. Without complexity—without being paid to learn—web work becomes a race to see who can push buttons the fastest and cheapest.

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

The agency is dead. Long live the agency – There is a difference between physically dead and mentally dead. The traditional agency model is physically more than alive on a small scale, but mentally has been stagnating.

The Experience Makes the Product, Not the Features – Your first product release is a critical opportunity to learn how you can create an experience that engages real users, not just your perceived users based on vague demographics or even rich personas.

– § –

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.