.. Your Daily Design Dosis

Tweet Parade (no.47 nov 2014)

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

What CSS to prefix? – Remembering what CSS to prefix is hard. Today browsers develop quickly (yay) and things often change (boo). Preprocessors and mixin libraries are not always up to date. This page has one purpose: simply show what prefixes are needed for a newer CSS property.

An Accessible Image Gallery With Progressive JavaScript – It’s very easy to create an image gallery with JavaScript, but many developers stop right there. Making the JavaScript progressive and accessible takes only a little extra effort, as this article demonstrates.

Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements – You can’t mention flexbox these days without some rabble-rabble browser support. As always, you can consult Can I Use. IE 9 is the big limiter left. If you need to support that, you’ll have to find another way.

Best SVG Javascript Libraries for Developers – SVG is a best way to create resolution-independent vector graphics that will look great on variety of devices and screens. In this article, We have collected useful SVG JavaScript Libraries for every developer out there.

Using Git Inside of Sublime Text to Improve Workflow – Improving workflow and increasing productivity is very important to us developers. Every second counts since the time we spend on small tasks adds up. Small tasks like our Git commands are something that we do on a daily basis.

10 Hidden CSS3 Properties You Should Know – W3C is constantly working on new CSS properties to make the web much better for designers, developers and users. In the meantime, let’s take a look at these 10 properties you may not know of but should really check out.

A Guide to CSS RGBA Colors – RGBA is an extension of the RGB color model. The acronym stands for red green blue alpha. The alpha value represents the level of transparency/opacity of the color.

Viewport units: vw, vh, vmin, vmax – The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages as mentioned earlier, or JavaScript.

When to use @extend; when to use a mixin – Only use @extend when the rulesets that you are trying to DRY out are inherently and thematically related. Do not force relationships that do not exist. Use a mixin to either inject dynamic values into repeated constructs, or as a Sassy copy/paste which allows you to repeat the same group of declarations

How We’re Using Modules to Organize Our Front-End Code – Expect to have a slightly harder time building your BEM styles for a while, and be prepared to live with adding a at least a few temporary !important declarations throughout your CSS, until you’re able to completely get rid of your global styles.

A Visual Guide to Sass & Compass Color Functions – Sass and Compass provide a number of useful functions you can use to alter and manipulate colors with ease. Most color functions operate on a single color, but some can be used to combine two colors in different ways.

Big, Beautiful Dropcaps with CSS initial-letterinitial-letter is a promising proposal, filling a typographical gap that has had to be addressed with complex CSS hackery.

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

Progressive Reduction: Evolving the Experience for Your Most Frequent Users – One of the best ways to implement the approach advocated by NN/g is through the use of a largely untapped method: Progressive Reduction (PR) – the idea that interfaces should be adapted over time as users become more acquainted with applications.

Considerations When Using Parallax Scrolling in Web Design – While it does have its own share of awesomeness, it is not meant for every website. In other words, parallax scrolling might be many things, but it surely is not a silver bullet that fixes everything.

Responsive Images Revisited—The Picture Element – Today I want to walk you through the picture element, it’s associated elements and attributes, and how to work with them. I’ll follow up with some thoughts for when to use srcset and when to use picture depending on your use case.

M dot or RWD. Which is faster? – M dot site load times suffer from the initial redirect, but generally are much smaller in request and KB count. RWD sites are the opposite: no redirect, but heavy on the requests and tonnage. Which is faster: M dot or RWD?

Web Design Usability – 10 Common Mistakes – However, when we do come across one of these self-flagellation articles, there is a powerful lesson to be learned. We all make mistakes on occasion. And learning from those mistakes is vital for long-term success.

Performance Budget Metrics – The purpose of a performance budget is to make sure you focus on performance throughout a project. The reason you go through the trouble in the first place though is because you want to build a site that feels fast for your visitors.

Does User Experience Design Exist? – For me, the term user experience design simply provides context to what the designer is trying to achieve and focused on: creating a better experience for the person using their design.

Rethinking Icon and Logo Design for the Responsive Web – This article will look in detail at one aspect of RWD, rethinking icons and logos responsively and how to approach their design. Logos and icons are page elements whose importance should not be underestimated.

A Box of Tricks for Building Responsive Email – As is usually the case, there isn’t. Every project needs a different approach and has a different best solution. The real answer is to have a useful selection of techniques to choose from at your fingertips, and always experiment with new ways.

Webdesign in Common, Web Typography, Tools, etc.

Essential Reasons You Should Check Out FireFox Developer Edition – FireFox Developer Edition has now been released and is quickly becoming the go-to browser for many code aficionados. This fresh approach aims to be the all-in-one solution for building the web and has some excellent tools baked in.

Tools and resources for web designers and developers – We’ve been looking for some of the best web development and design elements we could find and here we are, sharing the result with you. Among other things, you will find plugins, code snippets and themes to make a better digital creator out of you.

Design Tips for Well-Crafted Slideshows and Image Carousels -There’s no comfortable onesie to snuggle into when it comes to image carousels. Each website has a different need and requires a slightly different interface. I do hope these tips can get you thinking about how to design carousels with purpose and vitality.

7 Rules for Creating Gorgeous UI (Part 1) – This article is not theory. This article is pure application. You won’t see anything about golden ratios. I don’t even mention color theory. Only what I’ve learned from being bad and then deliberately practicing.

The State Of Animation 2014 – The post-Flash era is hardly free of animation. CSS animation is quickly becoming a cornerstone of user-friendly interfaces on mobile and desktop, and JavaScript libraries already exist to handle complex interactive animations.

Style Guides – It’s becoming increasingly necessary to be consistent and cohesive across an ever-growing number of media channels. There’s no one definition for the term “style guide”. The term means different things to different people, so it’s worth taking a look at the various flavors of style guides out in the wild.

5 Bug Reporting Tools for Developers – After using these tools, I really fell in love with the concept of in-browser bug reporting. Reporting bugs and submitting change requests is easier this way, since everything is communicated through a visual interface and the communication is seamless.

Why You Should Include Your Developer In The Design Process – Should designers be able to code? This topic never seems to die, with its endless blog posts, Twitter discussions and conference talks. But the developer’s involvement in the design process seems to be addressed very little.

Evolving Code: From the Crust to the Core – Quick and dirty and refactor later? Problem is, people are lazy. Things might not get revisited and we’ll be left trying with the less-than-desirable code for some time.

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

40 Must Learn Text Effect Tutorials in Illustrator – These tutorials were made by artists just like us and we should be thankful that there are people who are willing to spend time to prepare these tutorials to share what they know.

Communicating a Message Through Visual Hierarchy – The goal of every design is to successfully communicate a message. Visual hierarchy enables you to organize information and elements so that the message can be communicated easily. Hierarchies also enable the design to tell a story to communicate the message.

On Legibility – In Typography And Type Design – I hope provide you with some insightful knowledge about legibility — or what makes type more legible —, in order to help you improve your type designs or to help you refine your typeface selection process.

25 Free Adobe Photoshop Extensions for Designers – Adobe Photoshop extensions can help you with creating website layouts, working with patterns, noise reduction, converting PSD files into CSS, working with fonts, patterns and much more.

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

Create a better user experience by changing the way you write – I have always thought about how the text appears on web pages. I think the way it looks is almost as important as the words you write, because users have to be persuaded to start reading.

Tools to Centrally Monitor Your Social Mentions – Do you want to find company mentions beyond news articles and blogs? Do you want to monitor social mentions and metrics? In this article you’ll discover how Mention and SumAll provide all the data you need to get the big picture of your online presence.

20 Social Media Marketing Tips From the Pros – Are you up to date with the best social media tips and tools? We asked 20 social media experts to share how they’re getting results with social media marketing today.

7 mistakes you shouldn’t make on your LinkedIn profile – There are several reasons your profile is a mess: Lack of involvement in groups, a paucity of recommendations, and plain, old neglect to name a few. Oh, and ditch that photo of you at the monster truck rally.

Responsive Design A/B Testing Leads to a 130% Increase in Clicks – With a return on investment (ROI) of 4,300%, it’s no wonder why email is used throughout the entire lifecycle of a customer. From initial interactions to purchases to post-purchase messages, email is ever-present.

Did Your Blog Have a Tipping Point? Here’s How My 2 Blogs Grew – This is actually a question I often ask full time bloggers who I meet because I love to hear the back story about how their blog broke through to have enough readers to make a living from.


The Easy Way To Create Content Grids in WordPress – By using a grid shortcode, users can create arbitrary layouts in WordPress. In this Weekend WordPress Project, we’ll build our own shortcode grid to cement our understanding, and to get a grasp of how it all works.

Create WordPress Themes From Scratch – Most of these beginners tend to choose a shortcut to creating their own custom themes for their WordPress sites, either by customizing a polished theme, or creating child-themes from a theme framework or what we usually call, Parent Themes.

Creating Custom Page Templates in WordPress – Page templates in WordPress are a great way to add structural variations or highly customized functionality to your website. They are easy to create so newcomers can get started, but they offer enough potential to keep even seasoned professionals busy.

WordPress 4.1 Beta 1 Now Available for Testing – WordPress 4.1 beta 1 was released into the hands of eager testers today, just in time for the weekend. John Blackbourn announced the beta and outlined a list of features and improvements that you’ll want to put through the paces.

6 Lazy Load Plugins to Make Your WordPress Site Faster – Sites with a ton of images can take forever to load. For every image, that’s another HTTP request, and more time your users have to wait in frustration while pages load slowly.

Top 10 Most Important Things To Do After Installing WordPress – This is a common question asked by beginners. In this article, we will show you the top 10 most important things you must do after installing WordPress.

How to Create a Landing Page in WordPress – At the end of the day, various plugins, theme builders, custom page templates, even external services like LeadPages make working with landing pages something that every developer can handle.

Sass and WordPress: A Love Story – Today we’re discussing one tool that turned out to be indispensable for rebuilding the WPShout theme: Syntactically Awesome Stylesheets, or Sass.

Are You Avoiding These Common WordPress Code Issues? – In today’s article, I thought it would be helpful to take a look at some coding issues which work, but would be considered inefficient, bad code or bad practice. I’ll focus on some of the most common problems I’ve seen around and some errors.

Tips for Getting Started with WooCommerce – WooCommerce is quickly becoming the top plugin for creating a WordPress-based eCommerce site. This high level of functionality coupled with the ease of use of WordPress makes just about any sort of eCommerce site within your reach.

How To Build WordPress Widgets Like A Pro – Building custom widgets to meet that need, and allow flexibility such as template overriding, is easier than you might think and certainly within reach of even the most inexperienced code tinkerer. Create your own library of custom widgets to help you create WordPress.

Adding Ajax to Your WordPress Plugin – Using Ajax in your WordPress website is easier than you think. With jQuery on your side, you can submit data, as well as receive data. Communicating with WordPress is performed through a special Ajax dedicated WordPress action that is capable of handling the server side aspect of it.

Search Engine Optimalization, Conversions, Analytics, etc.

SEO simplified for short attention spans – Search engine optimization. It’s a clunky term for sure. You can’t optimize search engines. In fact, you can’t even learn exactly how they work. These are well-guarded secrets. What can you do?

Custom campaigns and why you should use them – Google Analytics actually offers quite a lot of ways to customize your tracking. One of the ways to track things specifically to your liking is custom campaign tracking. In this post I’ll explain what custom campaigns are and how you can use them.


How Facebook content placeholder works – My first target is a cool content placeholder from the most recent Facebook overhaul. Before your friends latest selfie or dog picture loads you may have noticed this nice bit of polish.

How to Create CSS Ghost Buttons – A popular web design trend this year is the “ghost button”, which is simply a button with a border and a transparent background color. In this tutorial, I’ll show you how to create several styles of ghost buttons using CSS.

Perspective Mockup Slideshow – An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta’s script.

Creating a Web App From Scratch Using AngularJS and Firebase – In this tutorial, we reviewed how to get started with creating an AngularJS web application. We implemented the sign-in functionality and successfully authenticated the user against the Firebase database.

Pricing Tables – A ready-to-use pricing table is one of those resources to have in our toolbox. They are not particular challenging in terms of design and user experience, yet they represent a key section of our web page: it’s where the potential client takes action.

Navicon Menu Animations Using CSS3 Transform and Transition – A word of caution though, the animations will work on modern browsers only. With that in mind, lets create and animate five navicon menu examples with CSS3 animations and a teeny-weeny bit of jQuery.

13 Really Useful HTML5, CSS3 & jQuery Search Form Tutorials – We have collected 13 useful CSS3, HTML5 and jQuery search form scripts that help you create a search box from scratch. We hope that this compilation will prove to be useful for you and let you understand exactly how to create search bar with accurate functionality.

Freelance, Business and Workflow Related Stuff

How I created a simple pricing process that removed stress and boosted profits – Pricing is super-hard. You’re thrilled that someone wants to hire you, and then you obsess over creating a proposal. And before you even get to the panicky part about what the client will think about the final numbers, you have to actually determine what final number feels right to you.

5 Unconventional Ways to Promote Yourself as A Logo Designer – In the next lines we will try to identify solutions for logo designers in order to become more “visible” for the potential clients. There are many solutions, but we prefer to present you five unconventional ways to promote yourself as a logo designer.

Creating a Good Design Brief for Your Mobile App – A design brief is not a document that, once done, should be dusting in your folder. Just like the project itself, it can change along the way. Treat it like a tool that you can always resort to whenever certain requirements need to be clarified and validated.

8 proven techniques that build trust in your websiteWhether you are just browsing the web, or you go online to make purchases, people are leery about everything they do on the web. From credit card fraud to identity theft, it can be tough to gain people’s trust on your website.

6 Non-traditional ways designers can find new clients & stand out – Client acquisition is one of those tasks you’ll need to deal with as long as you’re in the design business. To help out, here’s a list of some non-traditional methods you can use you find new clients and, in some cases, create additional revenue streams.

Pricing the Web – I probably don’t have to tell you that pricing is slippery business. It requires a lot of perspective, experience, and luck (read: trial and error). There are a number of ways we can correlate monetary value to what we do, and each has its pros and cons.

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

Bad Design is Everywhere: Take Inspiration from it and Improve – As a web designer I scrutinise almost every site I visit, which can be frustrating at times but I take inspiration from the bad and make sure I’m not making the same mistakes. By taking inspiration from poor design decisions, you’ll be doing your part to make the web a better experience.

What is quality code? – Is shipping the code important? Is having really solid code important? The answer is: yes. Both are important. But the latter often gets overlooked. As a result, I’ve taken it upon myself to come up with some really quick things to watch out for when coding to help improve quality.

Native Apps Are Part of the Web – I can’t believe someone is still writing this in 2014. Users love apps, developers love apps — the only people who don’t love apps are pundits who don’t understand that apps aren’t really in opposition to the open Internet.

The Anatomy of a Grid ~ Responsive web design brings a new appreciation of the grid’s role in digital experiences. No longer can designers and developers build for a single screen. The multi-device landscape forces the creator to think in terms of dynamic grid systems instead of fixed width.

Much Ado About Hamburger Icons – Much has been written of late in regards to the embattled “hamburger” icon. It shows up all over the web and abounds in mobile apps. It’s all quite confusing, and, honestly, I find it to be much ado about nothing.

– § –

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.