.. Your Daily Design Dosis

Tweet Parade (no.06 Feb 2014)

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

International box-sizing Awareness Day – In honor of, you guessed it, the most humble and undersung, yet awesome and useful CSS property: box-sizing.

Optimizing Web Font Rendering Performance – Fonts are an additional critical resource on the page, so yes, they can impact rendering speed of our pages. That said, just because the page is using web fonts doesn’t mean it will (or has to) render slower.

Grunt vs Gulp – Beyond the Numbers – Let’s dig a bit deeper though, and get a little understanding of the differences between Grunt and Gulp, beyond superficial speed comparisons.

How to optimize CSS delivery – CSS can be used many ways by a web page and still work. Since there are many ways to use it, there exist many different CSS setups. No matter how it is set up on your pages, your CSS should be helping your webpages render faster, not slowing them down.

Sass: Mixin or Placeholder? – When I started playing with Sass about a year and a half ago, one thing that took me some time to understand was the difference between including a mixin and extending a placeholder.

So You Want To Learn AngularJS? Start With These Tutorials And Resources – Angular JS gets high marks for finding a third way. It retains a level of simplicity that makes it accessible to the newly trained developer, while offering a more sophisticated suite of features for those with more advanced needs.

The complete guide to centering a div – The aim of this article is to show how, with a few CSS tricks, any div can be centered; horizontally, vertically or both. And within the page or a div.

30 Best CSS Resources from 2013 – As far as web design resources go, having a good, competent CSS resource is essential in optimizing the time and money you invest in creating a website.

Introducing viewport units – One great addition that hasn’t been talked up enough is viewport units. They’re anew kind of CSS3 unit that allow you to size elements relative to the viewport. The browser support for viewport units is surprisingly good, except on mobile.

25+ Pure CSS Based Navigation Menus – When it comes to web design, navigation is considered as one of the major part of a website. Website navigation helps visitors to interact with different pages of a website. A simple, clean and minimal design always grabs the attention of visitors.

Cross Browser Development Standards & Interoperability Best Practices – We’ve compiled a list of our 20 top coding patterns and practices that we’ve picked-up from attending endless conference sessions and reading hundreds of tutorials.

The Current Generation of CSS3 Selectors – After CSS 2.1, the W3C added a whole slew of new selectors to help us target elements in unique ways. This article will give you an overview of these CSS3 selectors, which I’d like to term the ‘current generation’ of CSS selectors.

CSS Tips and Techniques – some great examples of sweet CSS stuff

Introducing Live Extensions For Better-DOM: What They Are And How They Work – The Responsibilities Of Live Extensions, event handling is one of the key principles of working with the DOM. Events are the primary means of receiving feedback from user interaction.

40 CSS3 button examples with effects & animations – Here are some wonderful buttons, which are cool and practical and can be used in your web projects. Some buttons here do use jQuery, but not too lavishly to mess-up everything.

Don’t use flexbox for overall page layout – Flexbox is great, it just isn’t the best thing for overall page layouts. Flexbox’s strength is in its content-driven model. You can distribute items based on their content, allow boxes to wrap which is really handy for responsive design

What Nobody Told You About Sass’s @extend – Sass provides a lot of powerful features to write consistent and robust CSS. One of the most powerful yet tricky ones has to be @extend. While most Sass users understand the basics of @extend, I feel there are some more obscure parts to it that are not as well known.

CSS trickery and calc function – I feel like the most difficult part of a such an exercice is to leave the code aside and taking a couple minutes to actually understand what happens.

Object Oriented CSS and the Pagification of Modules – CSS architecture is a fairly new principle of front end development, although CSS has been around for almost two decades – the fact that the main culprit for any front end code refactoring has been CSS makes this contrast even more striking.

Kerning on the Web – To enable kerning in all browsers with kerning support, you’ll have to use a combination of the text-rendering and font-feature-settings CSS properties. Unfortunately, the font-feature-settings property is still new and requires vendor prefixes

Angular, Ember, And Backbone: Which JavaScript Framework Is Right For You? – You’ve got the perfect idea for a JavaScript-based application or website. Now all you have to do is pick the right open source framework.

Super semantic multicolor font icons in pure CSS – We overlap multiple glyphs and give each “layer” a different color. You can have two-color icons this way in pure CSS (using :before and :after), or more colors if you don’t mind creating extra elements through unsemantic HTML or by using JavaScript.

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

Smart Defaults: On Libraries & Frameworks – The reality is that you don’t always need to use a framework or library. Often times, you can get by with just a little bit of native JavaScript, saving precious bytes and seconds while doing so.

Improving front page performance: removing images, 5 ways – Some of those images are “above the fold”, meaning they’re visible without scrolling, while others are “below the fold”, requiring varying degrees of scrolling to see.

One Solution To Responsive Images – This plugin enables us to have one single batch of images for the website. We don’t have to think about how to resize images because the process is automated. This makes maintenance and updates much easier.

Creating Home Screen Icons for iOS and Android Devices – Favicons can be used to set the icons for when your website or web app is saved onto someone’s home screen. Let’s go over how you can set up favicons for the various iOS devices and Android ones in this short tutorial.

The One Web vision: design for the user, not the device – Anybody should have the ability to access any web content, service or application by using any type of connected device, from anywhere at any time. This is a principle defined by the W3C under the banner ‘One Web’. However, the reality is far from this.

Controlling heavy weight websites – More thought needs to be taken about how to offset the load to when the data is actually needed. Rather than transferring all of the sites assets up front, the site should load in what is needed and defer loading the rest.

A definitive guide to responsive text – The responsive text approach is fairly simple – use relative units everywhere and don’t overdo it with JavaScript. In fact, it’s so simple that you can’t afford not to do it.

The Best UX Articles of January 2014 – So, with so much quality content out there, we take one more look back at January 2014. We’ve compiled January’s best 5 articles we feel are interesting, invaluable or otherwise a must read for anyone with an interest in UX.

The Importance of Breadcrumbs in e-Commerce Website Design – A lot of times breadcrumb navigation is overlooked in the design process, since a lot of people still see it as something unnecessary. But the true is that this type of navigation can certainly increase usability of a site.

Applying XSL Transformations To Responsive Web Design – We will reintroduce transformations and explore their applications to mobile and responsive design. We will not only teach the old dog new tricks, but show that transformations are relevant to everyone who deals with HTML.

Why we don’t use a CDN: A story about SPDY and SSL – Using a CDN (content delivery network) for the new site was a forgone conclusion, as we assumed it would help us speed things up. But, after testing with a few different CDNs, we uncovered some surprising results.

Responsive Images: Still Waiting for a Standard? Try Rwd.Images.Js Instead! – The class rwdimage triggers the script to the given image. All other parameters are transferred through the data attribute data-rwdimage and its derivatives.

Three mistakes I see web designers make over and over again – I’ve been helping with a lot of website critiques lately. Here are three mistakes I myself have made and see over and over again.

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

Accidental API Key Exposure is a Major Problem – Accidentally posting API keys, as well as passwords and other sensitive information, on public source control repositories is a huge problem. It potentially allows anybody who comes across your code to access data ..

How Flat Design Will Reinvent Itself – Flat design has made its way to the mainstream. With big companies like Google flattening the UIs of their software, and major redesigns of operating systems by Apple and Microsoft, flat design looks like it’s here to stay.

Best jQuery Plugins of the Week [26th January- 1st February] – Here is yet another list of the best jQuery plugins of the week which includes 16 of them to let you check them out and pick the ones for yourself. Also, incase you missed out jQuery plugins lists of last five week’s

Ghostbusting For Front-end Developers – When you’re trying to test your app, assume laboratory conditions, avoid contaminations and just create a cleanroom testing environment. It’s safer and more likely to save you time chasing ghosts.

Five No-Tech Web Design Hacks that Will Make Your Website Awesomer – There are way too many things to keep in mind when designing a website. With all the developer details, architecture changes, we sometimes need a little no-tech inspiration on how to make websites look awesome.

The Best Freebies for Designers (January 2014) – Here are the best freebies for designers from January 2014. We have free GUI templates, icon sets, fonts, Photoshop brushes, PSD templates, PS actions… and everything else in between.

10 Design Trends I Don’t Want to See in 2014 – We talk a lot about emerging trends and how to make them work in a variety of design projects. But there are some design techniques that I am, quite frankly, sick of seeing.

A Guide to Social Logins – This reference guide will discuss what social login (gives users the option to sign-up and login on app using their account on a social network) is, look at social login examples in web apps, and provide links to relevant documentation and tutorials.

Factors to Consider When Choosing an E-Commerce Platform – Choosing the right e-commerce platform for your website is now easy task. There are hundreds of different options available with options in all different price ranges and with varying features.

Click, Tap, and Touch: A Guide to CTA Best Practices – The copy and design of your campaign can go a long way towards getting users to interact with your email, but the most important part of eliciting interaction is the call-to-action, or CTA.

Baseline Grids for the Web – Visual design often has a vertical rhythm, laying out text and graphics at regular vertical intervals. This makes side-by-side content line up nicely.

Getting Started With Pattern Libraries – All the pattern files (snippets of markup) are in their own folder, and adding one in there automatically adds it to the library. By breaking the site up into patterns, it’s easier to find those bits of markup.

Rethinking Links: The Search for a Better HREF – Sure, you can use helpful title attributes and informative link text, but at the end of the day, this might not be how your link needs to be visible. So, how can we make links more informative?

What White Space Can Do For You – Way back in 1930, groundbreaking Swiss designer and typographer Jan Tschichold wrote that white space “is to be regarded as an active element, not a passive background.”

What Is The Point Of A Website In 2014? – The one screen world. It’s a concept often written about in these posts and it’s an ideology that was created to force brands to start thinking about true customer-centricity instead of business and brand-driven silos

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

7 Beginner Mistakes to Avoid When Designing for Print – Designing for print can be a minefield for beginners. There’s so many easy mistakes to make that can have a serious impact on the quality of your final prints. With print runs also being very expensive, these mistakes can prove very costly.

Is templating killing your brand? – While non-designers can now — and should — be involved in the strategic placement and deployment of content, the most successful templated site designs have ongoing involvement from a solid design team.

15 printing terms every designer needs to know – Print design can be a confusing, not least because of all the unfamiliar printing terms and concepts that have evolved gradually over the hundreds of years along with the art and science of printing.

Type, Face & Character—Why you’re wasting a lot of potential in your product – Especially since other visual design elements are getting more and more removed, it seems that color and especially typefaces are becoming increasingly important to differentiate a product in the market.

Making Your First Font—A Little Guidance – Whether or not you pursue type design, as a hobby or professionally, starting the process of creating a typeface on your own can offer insight into how type works, how to use it well, (and certainly) how much trouble type designers go to to make truly great type

10 Mistakes that You Should Not Attempt – A brand logo must possess a manipulative prowess that takes hold of a looker, and never lets him go. Creating an intriguing logo that works one over goes beyond making a good start.

Best Adobe Illustrator Tutorials of January 2014 – The new year has already begun and as you all know in the first week of the new month we come up with the monthly roundup of preceding months cool tutorials that promise to guide you all throughout in an easy to understand manner.

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

Best Practices for Presenting a Photo Portfolio Online – Having a professional website to showcase your photography is an essential tool that every photographer needs. However, finding the right platform and means for presenting your work can be a headache.

Facebook Paper App: This Week in Social Media – Welcome to our weekly edition of what’s hot in social media news. To help you stay up to date with social media, here are some of the news items that caught our attention.

The Ultimate Guide To Blogging: How To Start A Blog That’s Epic – You can drive a torrent of blog visitors ON LAUNCH DAY, boost your email subscribers and start blogging for money immediately.

Subscription Model in Your Web Design Business – While the subscription model is certainly not a panacea and it does have its downsides as well, not to mention that there are many cases when you simply can’t apply it, it’s a good model to build your financial health on.

Low Hanging Fruit of Social Media: 12 Quick Changes That Will Make Big Results – Here are 12 simple profile hacks and engagement tips you can apply to increase fans, followers, and traffic to your website.


The key to keeping WordPress secure – Everyone wants to keep their WordPress install secure and judging by the number of posts about WordPress security, you’d think that it’s quite an advanced topic. The fact of the matter is that it’s not.

Why You Should Clean Out Your WordPress Themes Directory – Because WordPress is now powering more than 1 in 5 websites on the internet, WordPress sites are a prime target for hackers and spammers. If your site isn’t secure, hackers can use your themes as entry points.

How to Display a List of Child Pages For a Parent Page in WordPress – Often when working on a site that has pages with child pages, you may want to show those child pages on the parent page in a sidebar widget or another location in your template.

Mastering WordPress Meta Data: An Introduction To Meta Data – In this series of tutorials, I will show you various ways of working with WordPress post meta data and user meta data as concrete examples of how to work with arrays.

Search Engine Optimalization, Conversions, Analytics, etc.

20 Best Real Time Analytic Tools – The real time analytic tool tracks all the movements in a website like the exact number of visitors, the most popular pages, the broken links, the pages from which mostly visitors leaves the website and many other classified information.

The State of SEO in 2014 – There aren’t any drastic changes in the way we’ll do SEO in 2014. We still need to provide relevant content and a good user experience for our visitors. Nevertheless, there are some additional tips that might help your SEO efforts

Seven useful Google tips for bloggers & publishers – Blogging ain’t easy, especially when you’re starting from scratch, but there are many tools available that can make your life easier and potentially help drive more traffic to your site than you expected.


Coding a Responsive Mini vCard Webpage – In this tutorial I want to demonstrate how to build a simple tabbed webpage layout in the style of a simplistic portfolio. We can incorporate jQuery fade effects to switch between the tabs, sticking to a formal responsive design.

Fullscreen Overlay Effects – Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

CSS Button Hover Effects – Today I’d like to share with you a bunch of pretty neat CSS only buttons I’ve put together. I’m also going to go over their creation, and using them in design.

Freelance, Business and Workflow Related Stuff

10 Office Hacks That Will Increase Productivity – A lot of times it’s more about being in the right frame of mind than anything, but I want to share 10 simple hacks that have worked for me to dramatically increase my productivity.

The email line that’s client repellent – A lot of us don’t have time to think about proactively improving our business, much less looking for the holes in it’s sails. We’re consumed by responding to client issues, technical stuff, and everything else that comes packaged with the aforementioned list.

How to Improve Your Web Design Workflow – Using these few simple tips you may find some of them actually take longer to learn at the outset, but once you have a handle on them you’ll see your progress increase dramatically. Practice makes productive.

How To Balance Marketing Yourself With Getting Work Done – We’re going to look at why you need to maintain a tight hold on the balance between marketing and your design work, as well as some practical ways to do it.

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

Spirit – If the point of the web and community gatherings is for individuals to be subsumed into a larger group that is greater than the sum of its parts, then the whole point of an awards ceremony is to do the exact opposite: to single out some individuals in the group.

– § –

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.