.. Your Daily Design Dosis

Tweet Parade (no.07 Feb 2014)

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

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

Understanding the Semantic web: Pros and Cons -But is there anything wrong with the semantic web? And, on the other hand, what are the good things involving this step in internet evolution? That’s what we’ll analyse in this article.

CSS Best Practices to Follow and Bad Habits to Avoid – As technology evolves, it’s not really easy to say if you’re doing the right CSS practices or you’re just messing up the code and compromising the quality of your website on different browsers.

Choosing Vanilla JavaScript – If you’re heavily reliant on element selectors, you might opt to go with vanilla JavaScript. But if you’re making heavy use of animation, jQuery may be your choice.

Draggable Elements That Push Others Out Of Way – Aside from a few esoteric tricks involving stuff like the resize handle on textareas, draggable elements is JavaScript territory on the web.

How to use the Instagram API – Once you get past the rather convoluted authentication process, the Instagram API is incredibly simple to use. If you have an Instagram account yourself, this is a great way of keeping images on your personal site up to date.

Tricks with Flexbox for Better CSS Patterns – In this article, we will cover a few common tasks which can be carried out more effectively with flexbox, and explain the syntax for how we achieve particular results.

3 Solutions for Supporting Internet Explorer – We also need to accommodate for earlier versions of IE. The following will allow your sites to quickly and almost magically work better in Microsoft’s flagship browser!

UI Animation and UX: A Not-So-Secret Friendship – CSS animations are what we most closely associate with traditional animation. Any changes in state (like movement) in an animation are defined by a named list of keyframes within a CSS @keyframes rule.

Battle for baseline – The best solution for inline blocks were, well, inline-blocks. I used to like them, because you could solve a lot of tasks with them. But they’re not ideal. They’re not capable of doing baseline vertical aligning right.

How To Build A CLI Tool With Node.js And PhantomJS – We’ll go over the concepts and techniques required to build a command line tool using Node.js and PhantomJS. Building a command line tool enables you to automate a process that would otherwise take a lot longer.

An Introduction to Gulp.js – Grunt and Gulp do exactly the same thing. Grunt has been around longer and you’ll find far more help, plug-ins and resources. It’s a great project — if you’re successfully using it now, there’s little reason to switch.

A look Into: The Kit Language – There are a number of templating engines out there, each with its distinctive features. In this post, we are going to walk you through one that we have found to be the simplest yet still powerful: Kit.

Floated Label Pattern with CSS Only – I came across Brad Frost’s post about the Floated Label Pattern and instantly thought, “I think you can do this in CSS” and set out to prove it. It turned out to be a little trickier than expected but I created a quick proof of concept

Multiple Simultaneous Ajax Requests (with one callback) in jQuery – My use-case example above is a 5% feature. Keep the page lighter for the 95% of users who don’t use the feature, and have it be a relatively quick add-on for those that do.

How to create impressive 3D graphics in CSS3 – In this tutorial we’ll walk through how you could approach the process of setting up a 3D stage, building a 3D object, adding shading and animation, and bringing in dynamic content to create something you can use on your own site.

New CSS Shapes Syntax – The CSS Shapes specification has moved to Last Call. This move has brought a whole host of syntax changes, and we have updated the Blink and WebKit implementations accordingly.

Git tips from the trenches – I’ve gathered a handful of these with varying complexity hoping that it can give a boost to you. I will not cover git or VCS basics at all, I’m assuming you’re already a git-addict.

Getting started with using Sass in your existing website – Sass allows you to reduce the amount of duplication and complexity in your CSS by using variables, mixins (functions), nesting, and other cool things that should have existed in the CSS spec from the beginning.

Style External Links with CSS – Styling external links is a common practice on most informational sites likes Wikipedia. As a user, it’s nice to know when you’re being sent to another resource.

Usability, User Experience, Responsive Web Design, Mobile, etc.

The essential secret to successful user experience design – Unfortunately, although many businesses recognise the benefits of user experience design they often start from entirely the wrong premise.

The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App – When making a final decision on which of the mobile optimization methods to choose, keep in mind three keystones: Your business goals, your budget and industry features.

6 Most Common UX Mistakes – In this post we feature the 6 most common UX mistakes that are made, and how you can fix them. The best part is, most of these are simple fixes. They are so simple that they are often overlooked.

Exploring the Human-Centric Web – In this article, we’ll examining websites that apply this methodology and see how human-centric design has contributed to their success. First of all, here’s a reminder of how human-centric thinking can be applied to the web

4 responsive web design tools to add to your workflow – Our previous set of tools simply can’t accommodate the complexities of relaying responsive design, visually. Let’s take a closer look at four apps promising to aid responsive design that have managed to separate themselves from the rest.

The History of User Experience Design – User Experience Design has its roots in the ancient science of ergonomics  —  which was trying to establish set of principles that were making work more convenient and efficient.

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

Weekly Free Resources for Designers and Developers [February 10,2014] – Most of the tools, jQuery plugins, free fonts, free icons and free PSD files etc. are mostly latest releases or the ones you might not have seen yet.We hope you find them useful for your existing or upcoming design projects.

40 Free Mockup Templates to Present Your UI Designs – Mocking up your user interface designs can really boost the value of your work by giving clients an insight into how the design works in context, especially when used with responsive web design to show how the layout changes over a range of devices

20 jQuery Typography Plugins – In this round-up we have collected a selection of feature-rich jQuery typography plugins that will give you more control to precisely position and re-size each letter of your web-typography.

Useful Tools and Websites for Designers and Developers – January 2014 – We never try to focus on quantity that is the number of tools, apps and websites instead list down the carefully handpicked tools that genuinely are worth mentioning.

Using interactive web design – Having an interactive website doesn’t mean you have to use all videos, or moving images…it just means you should have these elements throughout your website.

Using animation to create an emotional connection with your audience – The styles may have changed, and grown up along with us, but the heart of the animated escapes remains the same as designers take the web to daring and bold new places with their animated works.

HTML, CSS, PSD and More: 24 Free Design Resources from January 2014 – We’ve put together yet another set stuffed with HTML, CSS and PSD templates and added the best UI kits.

How to supercharge your site’s speed with AJAX and jQuery – The way we’re going to be doing this is by taking out page reloads. So simply put, when the user uses some navigation links, only the main content of the page changes and it doesn’t make the browser reload the page.

Best Website Speed And Performance Testing Tools – Here are the website speed and performance testing tools we recommend. Most perform very similar tasks so it is worth using just a few and you can not go far wrong with the first 5 on this list.

Why Being a Web Designer Who Codes Is Way Cooler – Before we dig into the reasons why web designers should learn how to code, let’s check first what are the reasons why some web designers just want to focus on designing.

w3schools: The Ugly, the Bad, and the Good – In this post I’ll attempt to analyze a number of things about the w3schools.com website, both good and bad (mostly bad) and see if we can’t learn a few things and draw some conclusions.

9 Quick Wins for Halfway-Decent Design – Follow these few tips and you should be well on your way to having something that looks halfway-decent, and you’ll be simplifying enough that you are actually learning as you go, instead of flailing about in a sea of endless possibilities.

Creating A Client-Side Shopping Cart – We use sessions to store data and share such data across several pages. Usually, a user would pick a product, and we’d save the product’s name along with the chosen quantity and price.

11 web design trends I’d like to see in 2014– Here’s a round up of what we came up with, covering both trends we want to continue and those we want to come to a swift and conclusive end.

Useful Learning Resources For Web Designers – We hope that this round-up will bring you closer with many of the valuable resources that are available out there. Some are completely free while others can be obtained through quite affordable memberships.

What Ted got right and what Twitter got wrong – The single largest error you can make when redesigning is to mistake the current solution for a problem to be solved. The secret of a really great redesign, is examining not just the existing solution, but the problem that it was devised to solve.

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

7 Great Personal Branding Tools to Improve Your Online Presence – With online profiles becoming more and more important, a small array of personal branding tools are cropping up to help individuals manage their own online presence too.

Why I Love Ampersands & You Should Too – The ampersand has a long history as more than just a letter than can help you pretty a logo. It has distinct meanings, rules for proper usage and includes four pretty distinct styles.

Does Your Logo Need a Redesign? – So, do you really need a redesign or you can just stick with your old logo? If you will do a redesign, what are certain aspects that you need to consider? What is the reason behind your redesign?

10 top Adobe Illustrator resources – The web is a wonderful thing, brimming with resources and tutorials for people wanting to learn the art of Illustrator. But, sometimes, too much choice can be confusing, so we’ve picked 10 top sites that will really help you get to grips with it.

Proofing Tips for Print Design Perfection – A thorough proofing process can head off most print design issues. Though nothing is foolproof, keep the following points in mind with your next print project

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

How to Go Deeper with Social Media and Get Better Results – The reason is that most people fail to build relationships in social media–they simply don’t participate in a way that fosters relationship-building. In this post I’ll explain how you can really build relationships using social media.

3 Ways Your Web Design Can Better Connect You to Your Audience – There is something more to good design than making it just look right. Because you can design your website according to all the major design rules with surgical precision … and people may still not like it.


Easily delete WordPress post revisions using your fuctions.php file – Save the file and open your blog homepage to run the code. Once done, there’s no need to keep the code snippet in your functions.php file, as it will always delete all post revisions.

A blogger’s guide to setting up a WordPress site: the first few steps – This is the first in a series of posts discussing how to set up and run a WordPress blog from a relatively experienced expert, which will feature many helpful and hopefully relevant tangents.

20 WordPress Plugins and Short codes You Should Try – A short code is a specific code of WordPress that allows you to do creative things through scripts and code. You can use the shortcodes and avoid the use of plug-ins.

Search Engine Optimalization, Conversions, Analytics, etc.

Your SEO Problems May Have Nothing to Do With Your Website – When a site ranks poorly, it could be a problem with internal, cultural, and organizational limitations. They prohibit experts from doing their job, and from taking action to execute on SEO activities.


How To Code a Hidden Author Bio Display using jQuery – I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo

Building HTML5 and CSS3 Anchor Link Tooltips – In this tutorial I want to demonstrate how to build CSS3 tooltips which are contextually based on an HTML5 attribute. Using different classes we can incorporate unique color schemes along with CSS3 transition effects.

26 Web Design Tutorials for Learning New CSS3 Properties – These are perfect for beginners who don’t have a lot of experience coding webpages. But developers who do have that experience may also find the more detailed articles quite insightful.

Pinterest-Style Column Layout In Pure CSS – Pinterest launched three years ago with a signature and immediately emulated visual style: vertical columns of collected snippets. Pinterest uses JavaScript to achieve this layout, but for a long time I’ve wanted to replicate it using CSS alone.

Freelance, Business and Workflow Related Stuff

5 things you wish you’d known when you first went freelance – These five guiding principles, learned the hard way, have since laid the foundations for the creative career I enjoy today.

Better design through Web Governance – Web Governance allows an organisation to identify the experts in a range of different disciplines and cede responsibility for those areas over to them, even if they happen to be lower in the organisational hierarchy.

7 Principles Every Startup Entrepreneur Should Follow – The journey ahead will be long and ardous, and you will make plenty of mistakes along the way. But if this is what you are destined for, then take with you these 7 principles to aid you in your journey!

15 Workflow tips that took my design business to the next level – The more efficient your workflow the more client work you can get done. By streamlining the entire process, you can be sure that all of your time spent will have huge returns.

5 ways to get more freelance work – It’s tough out there in the world of freelance design and getting commissions is no easy feat, especially when you’re just getting started. Here are five quick tips to help you get those freelance payments rolling in…

5 Customer Service Approaches to Avoid – Keeping your customers happy is the key to earning their trust and their business. Some companies do this well, and go above and beyond to make sure their customers are satisfied. Others seem to view customer service as an afterthought.

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

Good Design Is Subjective – How does one arrive at a design solution? Is design the inevitable conclusion of applying objective principles to a problem or is it the end result of more subjective decision-making?

How To Be More Confident In Your Design Decisions – Don’t be afraid to make design decisions. Not every one will be great. Making a poor decision is better than making none at all. It’s an opportunity to learn and do better the next time.

Why I’m Done with Social Media Buttons – The evidence against social media buttons is stacking up. The novelty and utility of social media buttons have worn off. It is time to reconsider how much value they add.

– § –

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.