.. Your Daily Design Dosis

Tweet Parade (no.12 Mar 2014)

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

Bend and Set Text on a Circle Without Using Photoshop – This can be an easy task using Adobe Photoshop and Illustrator but setting text on web type using HTML and CSS might be a challenge. Thanks to the power of CSS3 and jQuery, this can be done.

28 Free CSS-Only Code Snippets for Web Developers – Each of these snippets are free to download or copy into your own project. As the name suggests you won’t need to rely on JavaScript at all – even for complex stuff like animations!

Getting the Hang of Hanging Punctuation – Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web … until now.

CSS Blend Modes could be the next big thing in Web DesignMultiply, screen, overlay and soft light, to name a few can turn boring opaque layers into beautiful pieces of stained glass. However, what awesome “blend modes” do web designers have at their disposal for making websites beautiful? Opacity. Yep, that’s it.

How to style file input fields – This type of input doesn’t usually allow for much customization but with some JavaScript tricks we can create our own file input that matches our website’s look and feel.

The guide to CSS animations for the web – There’s too many options to choose from and too many questions to be answered. CSS or JavaScript animations? Should I use a plugin and which plugin or library is the right for me? Where do I start?

flexbox in the real world – I also think that with a little planning, many of us could be using flexbox in production today. In this article, we will explore options for when flexbox can be used in production, starting with the best case scenario and working our way down to IE8.

Exploring the JavaScript Device APIs – In this blog post, I want to take you on a journey through some of the JavaScript device APIs that are extending the functionality of the web to better match the capabilities of modern devices.

Getting started with Grunticon – Grunticon is good alternative to icon fonts. It uses SVG files and embeds them in a CSS file that makes it super useful for web project. It’s a bit tricky to set up, so we created this guide to help you get started.

Get Started with HTML5 Canvas – In this tutorial we will create a simple canvas drawing using JavaScript. We will draw a gradient, some opaque rectangle shapes and finally some randomly placed circle shapes.

Grunt And Gulp Tasks For Performance Optimization – Google’s ‘Make The Web Faster’ team recommend a set of best-practice rules for keeping your pages lean, fast and smooth. The below represent Grunt and Gulp tasks the Yeoman team regularly use in our projects.

Using CSS variables – In a declarative language like CSS, time-changing values are not common and the concept of variables is pretty uncommon. Nevertheless, CSS introduces the notion of cascading variables in order to help solve the maintainability challenge.

New HTML5 Attributes for Hyperlinks: download, media, and ping – The new attributes are: download, media, and ping. In this article, we’ll take a quick look at what these new attributes are, and how they can be used once browser support improves.

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

4 SEO Benefits of Responsive Web Design – But when it comes to SEO, can a responsive layout increase the chances of a website succeeding in the SERPs? The answer is a resounding yes, and here’s why.

A “Readability First” Approach to Media Queries and Layout – There are a few different approaches to multiple-resolution-friendly web design and the application of media queries which have emerged in recent years.

Responsive Web Design with Less Code – In this article, I will show you a way to build responsive websites much faster than you do right now using Restive.js to streamline your workflow and eliminate the need for media queries entirely.

A Q&A on the Picture Element – The revival of the picture element—the responsive images proposal that has seen the most support from the developer community—is exciting news, but there are still some outstanding questions about how the element will really work.

CSS animations and transitions performance: looking inside the browser – In this article, we’ll explore how browsers handle CSS Animations and CSS Transitions, so you can develop intuition around whether an animation is likely to perform well — before writing any code!

Leveling Up With Flexbox presentation at Smashing Conference – The talk was based off my earlier flexbox presentation, but I focused less on the basic syntax, since I think most of us have already read at least a bit about that by now, and dove right into more code examples.

RWD and design – As the process, techinques, and more grow with age and wisdom, some of these things will be overcome. And if we, as designers and developers, push to work together, the work will get better.

Why a Responsive Web Design Will Help You Get More Visitors – If you haven’t already implemented a responsive web design, then it’s time that you do. It will help you get more visitors and help keep your business growing.

Interaction ProTip #3: Offsets and Opposing Motion – I’m going to talk about the use of offsets and opposing motion in animation and how they relate to interactions. Part of creating compelling user interfaces is through guiding a person’s eye.

Ending the UX Designer Drought – This amount of work going undone is going to prevent us from delivering the value that UX promises. It’s going to force businesses to look toward something more achievable to provide that value.

Responsive Design Sameness – Why responsive sites share similar visual characteristics? At the moment I can think of three things that I theorize might be at least as important as workflow, in regards to RWD design sameness

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

Latest Apps and Tools of the Week [8th March-14th March] – Tools, applications and websites that are created to help designers and developers in various project handling are seeing an immense growth in number of them being rolled out every now and then.

How-to communicate between HTML select boxes – PairSelect.js is a jquery plugin to linkup two HTML selectboxes. One just need to imagine there are two different select in a page and what one will want is, after choosing some items, if user do a click on some button like any add button.

Math for Designers: It’s a Numbers Game – Today, we are going to look at some of the time-tested formulas that can be found in great design and ways that every designer can use math.

Weekly Free Resources for Designers and Developers [March 17,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.

Designing a page layout – To design the perfect page layout you have to think of the user. How will the user view your website? We can only influence them so much. First thing’s first: what can a better page layout give?

Designing forms that convert, 7 proven techniques – In general, hardly any site visitors want to spend too much time filling out web forms, so you’ll have to focus on brevity first and foremost. Follow these best practices, and watch your website’s conversion rate begin to noticeably improve.

55+ CSS Tools for Designers and Developers – In this post we’ll show you some free CSS tools that will certainly help you achieve better results. So check out the great collection of CSS tools for designers and developers with brief description

6 design essential ingredients for successful e-commerce – Here we’ll shine a light on what makes an e-commerce website really work. We discuss the basics that are required for success and highlight them with some sites that exemplify the points in focus.

CAPTCHAs’ Effect on UX and How to Fix It – As the role of website user experience rapidly emerges, more and more traditional web development techniques are being questioned and among those CAPTCHAs are on the first place.

How To Plan Your Next Mobile E-Commerce Website – To plan a mobile e-commerce store, we need to put ourselves in the mindset of the mobile customer and understand their intentions and mood. In this article, we’ll walk through all of the vital steps when planning a highly converting mobile e-commerce website.

6 Reasons Why Flat Design Will Die Soon – Despite the fact that it has appealed lot many users, it has other side too. There is a possibility it might die a slow death for miscellaneous good reasons.

40 Resources for Getting Started with jQuery Development – In this post you’ll find a series of 40 powerful jQuery articles, tutorials, and free plugins. Each of these resources should provide a starting point for anyone interested to learn frontend scripting.

Infinite Scrolling or Good Old Pagination? Myths, Best Practices, SEO & Usability Tips – A big debate that seems to pop up quite consistently is between the merits of an infinite scroll setup versus the more commonplace pagination model.

Optimal Techniques for Strategically Displaying Web Forms – Regardless of what design strategies you use to collect user information, make decisions based on your users’ needs. But it’s even more important to keep your users happy.

5 key principles for better web development – I think there are many things we can learn from each other, across the disciplines. So as a frontend developer, here are five key principles that have transformed the way I approach my work.

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

How to Create an App Icon in Adobe Illustrator – This tutorial gives you a insight in the steps to take from a initial sketch to a vectorized icon that is ready to be used. Resources and articles that are useful are listed at the end in References.

The definitive guide to logo design: 55 pro tips – In this article, we’ll first look at the basic principles of creating a logo design and share some pro tips for finessing your process…

Color Systems — Part 1 – What is color? How do you define it? How do you describe it? How can we ensure that when you tell me to make something red, I make it the exact same red you intended?

36 Adobe Illustrator Tutorials on Vector Design – These online guides and tutorials will help any designer understand how to structure vectors using Illustrator. There are a number of tools and techniques that can only be learned through practice and repetition.

How to create pixel-perfect web graphics – In this guide, I’ll explain how to create scalable, web-ready graphics with harmonious colour schemes. I won’t literally show you how to recreate the graphics here – think of this as a best-practice checklist rather than a conventional walkthrough.

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

Email Marketing’s 10 Most Important Questions, Answered – Clearly email marketing deserves your time and attention. Hopefully these answers to ten of the most common and important email questions can make the learning curve a little less steep.

5 Modern WordPress Alternatives to Keep an Eye On – For some, WordPress has become bloated and overly complicated, especially for small-scale sites that might be better served by simpler CMS options.

6 Tactics That Turn a Blog Into a Business Engine – Here are six tactics that need to be fundamental parts of any such campaign. When they are, your blog will become an engine that powers your business.

10 Simple Tips to Double your LinkedIn Connections – LinkedIn is not to be underestimated.So what are some simple tips to be more effective on LinkedIn and make use of its global network of movers and shakers?

5 Tips for Developing Better Blogger Outreach – Blogger outreach is the perfect way to add the one-to-one-to-many approach to your digital marketing efforts. In this article, I’ll show you five ways to promote your brand through blogger outreach.

Social Media: Finding the Balance Between a Waste of Time and Necessary Networking – Take a look at the following 10 tips and resources and get ready to re-adjust your social networking plan into one that will waste less time and build more positive results for you and your business ventures.

5 tips for web designers to improve their content quality – It’s still a crucial part of your own marketing strategy, and if you’re looking to market yourself as someone who knows his craft, learning to write quality content is going to be one of the skills to pick up.

How to Go Deeper with Social Media and Get Better Results – Despite having a social media presence, many freelancers report that they aren’t getting the results from social media that they had hoped for. In this post I’ll explain how you can really build relationships using social media.


16 Blank WordPress Starter Themes and Frameworks 2014 – In today’s post we will be looking at 16 great starter themes and frameworks you can download today and use as the basis for your next theme.

How to Create WordPress Custom Fields The Easy Way – These custom fields could be a general text input, a textarea, a dropdown option, a color picker, calendar, and even an image uploader. In this tutorial, we show you how to create WordPress custom fields the easy way.

Why You Should Never Use WordPress to Send Newsletter Emails – WordPress comes with built-in mail feature which uses PHP’s mail function to send out emails. In this article, we will explain why you should never use WordPress to send newsletter emails.

6 Best Dropbox Plugins for WordPress – Dropbox has become an essential tool in many people’s workflow and there are a lot of WordPress plugins available to help make the most of this fantastic service.

How To Build A Premium Content Site Using WordPress – In this article we’ll look at how to approach creating and maintaining a premium content site and look at several potential technical implementations.

An Insightful Checklist of Validating Your WordPress Website – The successful validation of a WordPress website can be the difference between a well-ranked workable website that runs on any platform, and a website full of bugs and broken images that no one will ever find.

10 WordPress Speed Optimization Tips – WordPress users reading this post are in luck today because here I’ll be offering 10 proven WordPress speed optimization tips that have made it simple to boost a WordPress website’s speed by a great level.

WordPress Performance Improvements That Can Go Wrong – To achieve the best results, just follow few simple principles: don’t change too many things at once, benchmark your loading speeds, use staging copies when possible, and test the website’s functionality after applying each new technique.

Object-Oriented Programming in WordPress: Types – if you are interested in learning object-oriented programming in PHP and you do consider yourself a beginner, then we’re going to continue the series in this article by talking about some of the data types that PHP offers.

Search Engine Optimalization, Conversions, Analytics, etc.

Which Links Get More Clicks? – A person reading a webpage is always more likely to click a link that’s easier to spot (lower resistance). We tend to go for links that are located closest to us.

The Seven Principles of Conversion-Centered Design – Conversion-centered design works hand-in-hand with website copywriting to convert leads to consumers and increase click-through rate.

How to Reduce the Bounce Rate of Your WordPress Website – A “good” bounce rate is generally considered to be anything less than about 40%, although this does depend on the type of site you have.


How To Code a Hidden Dropdown Search Form using jQuery – I’ll be creating a hidden dropdown search field which appears just beneath the page header. It only displays when the user toggles a search link and it’s always readily available from any page.

Inspiration for Item Transitions – Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.

Responsive CSS Keyframe Animations – Creating responsive animations will allow us to build different experiences that each respect the limitations of various devices. However, even with these differences the animations have to say the same thing.

Easy Masonry Layout With Flexbox – Today the Mozilla Foundation released Firefox 28, finally bringing cross-browser support for multi-row and multi-column flexbox layout. This is a simple demo of a “masonry” style effect for images using flexbox.

Blueprint: Responsive Full Width Tabs – A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space.

Blueprint: Google Grid Gallery – In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media queries that adjust the grid layout and also the gallery view.

Freelance, Business and Workflow Related Stuff

5 Super Fun (and Easy) Marketing Tips for Your Design Business – When I needed to create awareness in my service and build a client base, I focussed my marketing around 5 creative ideas: Talk, write, film, disrupt, and if all else fails… pull a stunt!

6 Successful Ways to Manage Your Design Projects – Failure doesn’t have to be an option but it does happen from time to time. Fortunately you can take preemptive measures to reduce such disappointment from befalling you and even your team.

Taking on More Specialized Projects – Instead, gradually make the changes you that you want to see in your business. Establish a goal of spending no more than (x) hours a week working on projects that don’t fit within your core services.

The secret to finding clients you actually want to work with – However, just because a client pays well and pays on time doesn’t mean they aren’t a stressful, rude, big pain in the neck to work with. So how do you find clients that you actually want to work with?

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

The best and only CSS framework you need – With frameworks you have that ability to “plug-in” the code, see that it works, and then off you go. That’s dangerous and promotes a kind of flat-pack complacency. Especially if the framework itself has marketing wording that suggests it will “do things for you”.

CDN-hosted JavaScript Represents an Additional Point of Failure – I should add that I don’t object to using a CDN to serve your static files, but rather to using a shared public CDN (such as cdnjs or google hosted libraries) to serve your vendor libraries (such as jquery and backbone).

9,125 days later – Trusting any third-party service—even one as lovely as Pownce—inevitably leads to destruction and disappointment. You can publish to this world-changing creation without asking anyone for permission.

Why RWD looks like RWD – People lean on established patterns (or frameworks like Foundation or Bootstrap) to provide a level of comfort as they’re working things out. Eventually as people get more comfortable with how to approach multi-device projects, their reliance on these patterns will lessen.

I spent a week using only mobile internet, and so should you – I spent the past week tethering my computer to the mobile internet connection on my phone. It was awful. I wholeheartedly recommend it.

My Advice to Young Designers and Developers – “Ability trumps education and I don’t put much faith on the current raft of tech degrees. So I’d prefer to see three years of experience than three years of study.”

– § –

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.