.. Your Daily Design Dosis

Tweet Parade (no.9 Feb 2014)

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

How to Use The HTML5 Sectioning Elements – HTML5 has seen the introduction of a number of sectioning elements that can be used to mark up your web pages. Using these elements gives more semantic meaning to your pages, allowing computer programs to better understand your content.

Float Labels with CSS – Many of the demos I’ve seen involve JavaScript. The other day I was checking out at Nest.com, saw their technique for it, and I thought of a way I could pull that off without JavaScript.

How to create horizontal scrolling using display:table-cell – With table-cell, just keep adding elements whenever you need to, and you’re good to go — it’s perfect for use with a CMS. Creating this with the table-cell property requires some JavaScript.

Confused About REM and EM? – Both rem and em are relative units, px is not. Before considering rem, it’s important to understand the relationship between em, markup and inheritance.

Detecting CSS Animation Completion with JavaScript – JavaScript does provide us the ability to trigger functionality at the end of JavaScript animations and transitions. Here’s how!

CSS performance revisited: selectors, bloat and expensive styles – The purpose is purely to try and evaluate the comparative difference in selection speed between the different selectors employed. Therefore, when looking at the table, it makes more sense to look down the columns that across the rows.

Setting Up Grunt For Your Next Project – we’ll talk in-depth about the necessary files like package.json and Gruntfile.js, but fornow we are going to create a few sample files so that you can run Grunt with your WordPress theme or plugin project.

Improving your site’s visual details: CSS3 text-align-last – In this post, I want to give a status report regarding the text-align-last CSS3 property. If you are interested in taking control of the small visual details of your site with CSS.

20 Useful HTML5 Code Snippets You Should Know – There are lots of articles touting the use of HTML5 and praising the benefits of it. Likewise, developers are sharing useful code snippets to polish your website.

How Nesting 3D Transformed Elements Works – We can find simple CSS snippets and examples for transforms, but it’s important that developers understand exactly what’s happening. Let me take you step by step through the process of nesting animated 3D transform elements

Uploading Files with AJAX – In this post you’ll learn how to upload files to a server using native JavaScript technologies. The example we’re going to use supports uploading multiple files in a single request.

Understanding Masonry Layout – Masonry layouts with infinite scrolling are becoming the new norm. This article provides an in-depth look at the Masonry layout and its usage.

Basics of CSS Blend Modes – Web design as we know it, will change as CSS blend modes get more support. I’d like to look at the different ways of doing it, since it’s not exactly cut and dry.

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

How to Create User Stories, Scenarios, and Cases – I was particularly interested in how a client’s expertise is necessary to customizing the design and technical expertise they need from us.

Golden Ratio + Modular Scaling + Responsive – I wanted to create a responsive theme based on the Golden Ratio (for heights, widths, paddings and margins) and Modular Scaling (for everything typography).

11 Resources to Help You Create a Flat Design Responsive Site – All over the web, you’ll find dozens of tutorials, elements and examples showing you how to create your own flat-style web design. Let’s talk about why and how, and then I’ll share 11 resources to help you create your own flat style, responsive site.

Off The Beaten Canvas: Exploring The Potential Of The Off-Canvas Pattern – In this article, we’ll talk about why off-canvas has become so successful as a navigation pattern and show its potential to be so much more.

Responsive Strategy – As more organizations roll up their sleeves to tackle the realities of our multi-device Web, it’s worth taking a look at the various strategies employed to reach that squishy nirvana

Responsive web design: five reasons why it may not be the right answer – Responsive design is a wonderful tool and is a great solution for quite a lot of sites. I have used responsive design to deliver many sites, but it’s not a magic bullet that will solve all pains around mobile.

Responsive, adaptive, mobile or native? What’s the best option?– There are a number of options for mobile strategies: responsive design, adaptive design, a mobile version or a native app. One approach may suit a company perfectly and be completely inappropriate for another.

Does A Designer’s Opinion Mean More Than The User’s? – We’re going to look at some ways in which users often give designers a run for their money when it comes to the ideal user experience, and explore whether a designer’s opinion means more than the user’s.

Making Embedded Content Work In Responsive Design – In this article, we’ll show you how to make embedded content responsive using CSS, so that content such as video and calendars resize with the browser’s viewport.

Create a style prototype for your responsive site – A key challenge with responsive web design is determining appropriate deliverables when it comes to sites’ visual design. Should you create full-width Photoshop site comps and tweak design until the client is happy?

Top 5 Reasons to Adopt Responsive Web Design in 2014 – Is responsive web design your top priority this year? I have compiled a list of the top 5 reasons why you should switch to responsive web design as sooner as today!

Why it’s important to build an inclusive web – Progressive enhancement isn’t about disabling JavaScript, no matter what its opponents claim. Those that claim progressive enhancement is on its way out seem to be forgetting that the foundation of the web is HTML.

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

Design for Persuasion, Emotion & Trust – The next level is to make a usable website engaging. PET is essentially a psychological layer that supports users on their journey and meets them at an emotional level. To sum it up; “Usability allows users to do things. PET encourages users to do things.”

10 Signs That You Are An Awesome Web Developer – So you know how to make a website or two. But are you worthy enough to be called an awesome web developer? Here are 10 positive signs that you are.

Tips for Crafting Simple and Usable Website Navigation Menus – In this article I’d like to share a few design tips for building usable website navigation. There are many differing styles like vertical/horizontal lists, dropdowns, sliding menus, and other related features.

Best jQuery Plugins of the Week [16th February-22nd February] – jQuery plugins have been solving lot many issues and helping developers a great deal in various endeavours for over a long period of time and continues to do the same.

5 Online Portfolio Services & Tools Compared – Today, we are taking a look at five nice online portfolio tools. We’ll weigh the pros and cons and pricing for each in hopes that it will help you choose the right tool to display your work.

The Troublesome Misconception of Parallax in Web Design – This article aims to highlight and rectify these views, delve a little in to the meaning of the term and also look at how it should and should not be applied.

Embed an Interactive Panoramic Photo with jQuery Panorama Viewer – Panoramic Viewer will wrap all the photos with a wrapper container so that it can contain the full width of the photo without expanding the layout.

A Web Designer’s Introduction to Shopify – My goal is to equip you with all the skills you’ll need to get started, as well as show you a number of creative ways to make your themes flexible and powerful.

What Role Do Aesthetics Play In The Design Of A Website? – Aesthetics aren’t design, but they do play an important role in design. How a thing looks influences those who use it and it contributes back to the function of the thing being designed.

Your website needs to tell a story – Often we get caught up in the millions of decisions made along the path of creating something, and lose sight of how to tell people what we’re doing.

Web Design Typography & Why it IS a Big Deal – Typography is not just about selecting the prettiest looking font. If any web designer is harboring this notion, he either has a lot to learn or a lot to UNLEARN.

Demystifying the @font-face Rule – Most modern browsers support the @font-face rule. Versions of Internet Explorer prior to IE 9 do not. You can use fonts from services such as Google Fonts as well as ones you’ve put on your server.

What Makes a Great Search Interface? – The design of a search box should mirror that of the rest of the site, be functional and easy to use and be placed in a location that is obvious to users. Here are some great search boxes and a few tools to help you through your own design.

50 essential freebies for web designers, March 2014 – Today we continue our monthly series of the very best free resources for web designers with a collection that includes cool scripts, awesome fonts, great ideas, and must-see experiments.

Flat Design Is Going Too Far – I’m becoming tired of being confronted by the same template site after site. It feels as if every designer is being handed a set of 8-10 WordPress templates to deal with, and adapting sufficiently.

State of Web Design in 2014 – So what does web design look like in 2014? Will it be more of the same or will witness the emergence of new trends?

8 Easily Avoidable Mistakes That Will Ruin Your Landing Page Tests – There are reasons why testing can cause frustration. What you’re about to find out are eight reasons why testing goes awry, and what you can do to sidestep these problems.

Beware: Web Design Pitfalls to Avoid – The wonderful world of web design is not a walk in the park. There are web design pitfalls to avoid. You need to create eyegasmic designs that will attract people and hook them into visiting your website frequently.

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

The ultimate guide to logo design – There are some companies out there that would have you believe that designing a logo is as simple as slapping together some type and a shape or two. But there is so much more to designing a good logo than just that, regardless of what some may say.

Where Marketing Ends, Branding Begins – Marketing is the set of processes and tools promoting your business. Branding, on the other hand, is the culture itself, the message that permeates and rules all the process of your business.

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

3 Good Reasons Why You Should Post Less and What to Do Instead – All in all frequency is not always a decisive factor. There is no denying though – being active and participating is important.

4 Ways to Create Sticky Content – In a blogosphere and Twitterverse flooded with top 10 lists, repurposed content and users who pretty much vomit self-promotion in lieu of breathing, it can be difficult to stand out.

7 Common Blog Marketing Problems And How to Fix Them – I’ve been giving a lot of thought to unorthodox ways to solving some common blog marketing problems. Here are 7 common issues along with some quick tactics for you to try.

8 Types of Blogging Problems That Bloggers Face – I find that there are 8 types of blogging problems that any blogger can face. Most bloggers face conceptual, design, ethical, financial, legal, marketing, search traffic, and technical related problems.

The 7 Sins Of Guest Blogging (Based On True Events) – Granted that many multi-authored blogs depend on (ok, maybe welcome?) guest bloggers submitting in their insights and advice, there are some things that some guest bloggers do that really, really push all the wrong buttons.

12 Principles Of Social Media Marketing – Social media marketing is changing the marketing landscape so fast that companies are struggling to adapt their strategies and tactics. What worked in 2001 or even last year is becoming less and less effective.


Classic Do-It-Yourself WordPress Mistakes To Avoid – Here are the first, and worst, mistakes that someone new to WordPress is likely to make. We’ve seen all of these mistakes many times, and we may have even committed some of them ourselves

Improve custom WordPress queries with transients – I tried to be as comprehensive as possible in showing you how I took just a single query in one of my theme files and modified it to reduce resource-intensive queries to the database.

30 Vital Steps To Follow After Installing WordPress – We are providing these steps so that once you follow these correctly; the chances of your site being quickly indexed will really go up. Even if you are already having a blog or site on WordPress, this list can really help.

How to Fade Images on Mouseover in WordPress – In this article, we will show you how to fade images on mouseover in WordPress. Basically when the user brings their mouse over an image on your site, it will fade slightly.

Introduction to Sass for New WordPress Theme Designers – This article is an introduction to Sass for new WordPress Theme Designers. We will tell you what a CSS preprocessor is, why you need it, and how to install and start using them right away.

How to Fix Error Too Many Redirects Issue in WordPress – It is a common issue that WordPress users may come across. In this article, we will show you how to fix error too many redirects issue in WordPress.

Search Engine Optimalization, Conversions, Analytics, etc.

How Not To Get Scammed By Bad SEO Companies – The problem is that most of the SEO companies you find on the internet are really bad at what they do. In fact, they just do really small jobs for you and will make money while not doing much.


Creating Instagram-Style Photo Filters With jQuery – In this tutorial I want to demonstrate how to build a simple Instagram-style filter webapp using jQuery. The library is called CamanJS which is easily extendable to create your own filter plugins.

How to create a sticky sidebar – It’s an interesting piece of usability because it keeps the user in contact with a particular piece of navigation. So today, we’re going to have a look at building a sticky sidebar using some simple jQuery and CSS.

Creating a Border Animation Effect with SVG and CSS – Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner.

Create a carousel out of nothing but CSS – Carousel scripts are used on so many websites around the Web – the pattern has been implemented all over the place. They generally depend on a library such as jQuery and are loaded with a lot of animations and features. But can’t we ditch the scripts and use CSS instead?

Freelance, Business and Workflow Related Stuff

How to Sell Your Design Project? – Backing up your design decisions with data, telling a story and understanding your audience are the foundations of presenting your wireframes like a champ to ensure that your vision thrives.

How we work – The truth be told, it slightly differs from project to project, from client to client. But the main point is that we work in an iterative way with prototypes at the heart of our work every step of the way.

The Real Truth About Design Contests, What You Need to Know – It’s easy to be enticed to enter contests with the shiny offers of exciting prizes and in some cases, cash. But if you do enter a design contest, don’t count on winning. Most entrants never place high enough to win a prize. And some contests are outright scams.

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

Blogging vs. Building – The more you blog, the less you are building. Many people have asked why I spend so much time writing, sometimes criticizing this daily routine and questioning its value.

The Battle for the Body Field – Richer, more flexible designs can coexist with the demands of multichannel publishing. By combining the best of XML and structured web content, we can make the body field safe for future generations.

Continuum – It is entirely possible—nay, desirable—to use features long before they are supported in every browser. That’s how we move the web forward. If we waited until there was universal support for a feature before we used it, we’d still be using CSS 1.0 and HTML 2.0.

– § –

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.