.. Your Daily Design Dosis

Tweet Parade (no.07 Feb 2013)

| Comments Off

.. weekend! Time for a new roundup with last week’s best tutorials and articles found on the interwebs. It’s all about HTML, CSS, responsive web design, graphics, 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.

Using The New Twitter API V1.1 – From March 5th 2013 Twitter are removing there current API and it will be fully replaced with the new API V1.1. This means that any application that is currently using the old API will stop working on March 5th.

Using background clip for text with CSS fallback – It is no surprise to find people using non-standard properties in HTML, and it is no big deal if it fails gracefully in other browsers. Unfortunately, background-clip: text fails rather spectacularly in non-WebKit browsers.

Advice for Up and Coming Front-End Developers – The easy answer to this is to just do more work. Take on as many projects as you can. The more work you do, the more you’ll learn as you arrive at different problems and challenges with each project.

DevTools: Visually Re-engineering CSS For Faster Paint Times – Increasingly, whether it’s on desktop or mobile, users want their web experience to be snappy and delightful. This means that even if the browser is busy rendering the page or loading in content, the user should still be able to scroll around and interact with it.

Object-orientation and inheritance in JavaScript: a comprehensive explanation – The good news is that it’s actually quite simple, but the bad news is that it works completely different than object-orientation in languages like C++, Java, Ruby, Python or PHP, making it not-quite-so simple to understand.

Introducing csswizardry-grids – hat post deals with the thoughts, reasonings and theory behind how such a grid system works. csswizardry-grids is a simple, fluid, nestable, flexible, Sass-based, responsive grid system. It allows you to rapidly construct fully responsive websites whilst abstracting all the layout information away from your components.

Optimize your JavaScript with RequireJS – RequireJS is an effective way to improve the speed and quality of your JavaScript code additionally making it a lot more readable and easier to maintain.

Animated CSS effects with fallbacks – New CSS3 modules enable cool effects, but what about browsers that don’t support them? Opera’s Chris Mills demonstrates a few examples – and styling alternatives via Modernizr.

When to Avoid the Descendant Selector – So the idea here is that you avoid the descendant selector where it will cause unnecessary restrictions, specifically “high in the DOM tree”. In these examples, which are using elements high up on the DOM tree, these styles are not reusable, so they could unnecessarily bloat your code.

Understanding JavaScript Function Invocation and “this” – In my opinion, a lot of this confusion is cleared up by understanding the core function invocation primitive, and then looking at all other ways of invoking a function as sugar on top of that primitive.

What is SVG? [Guide to SVG Part 2] – In this part we’re going to expand upon what we already know, as well as look at some of the more interesting features that SVG has. Lets take a look at some other structural elements that SVG allows us to use.

Photoshop Blend Modes in CSS from The Adobe WebKit Team – It’s very early days so this obviously isn’t an in-depth look but it’s fantastic to see the power of blend modes coming to CSS. It’s also fun to see what the future of CSS will look like and this is very exciting.

Quick Tip: The HTML5 Context Menu Attribute – Basically, it allows you to add different options to a browsers ‘right-click menu’ with just a few lines of HTML and will even work with Javascript disabled. Although, and very sadly, it currently only works in Firefox.

Usability, User Experience, Responsive Webdesign, Mobile, etc.

Thoughts on Media Queries for Elements – “We need native CSS media queries at the element/component/widget level, not just the viewport.” So, without any fanfare, I want to share my thoughts on element media queries, and then open it up for discussion in the comments.

When is a link not a link? – By all means add all the JavaScript whizzbangery to your site that you want. But please make sure you’re adding it on a solid base of working markup. Progressive enhancement is your friend …especially when that same functionality is provided by a native HTML element.

Think About Your UI – Why Responsive Web Design is NOT Right For Your Website – Of course there is a growing number of smart phones. That’s like saying “There are more people in the world than there were yesterday.” It’s a trivial fact that doesn’t mean anything.

Responsive design for DIY-developers with Susy – Sometimes you want something more generic, elegant and flexible. You want to write CSS yourself. You want control over every line of code. You want Susy. Susy is a set of Sass and Compass extensions to make responsive design easy for you.

CAPTCHA: Inaccessible to Everyone – The reason that there are so many CAPTCHAs is that there is so much spam in the world. They are perceived as an effective way to prevent robots from, for example, posting comment spam on blogs.

Design Dissonance: When Form and Function Collide – In the strictest sense of the term, design dissonance often relates to usability—when a design somehow pushes a user in the wrong direction, in terms of both understanding and action.

Responsive Tables – A few smart folks have already put together their thoughts on responsive tables and, while I think the proposed methods are pretty good, I think there might be room for improvement.

Getting Started with Responsive Typography – Responsive type is resizable. It can be changed based on screen size or user preference. Responsive type adjusts for column width as well, so that lines of text are not too long or short. Responsive type also adjusts for differences in pixel density and screen resolution, so that letterforms do not become pixilated or blurry.

Mobile Navigation Patterns – This is an article about helping mobile site viewers find what they’re looking for more quickly and directly, removing barriers and hopefully making a better navigational experience for everyone (with a focus on e-commerce).

When Responsive Design is Not an Option: a Checklist for Optimizing Your Mobile Site – For some businesses, responsive design is simply not the best option because their mobile visitors’ needs are so different from desktop users, and thus require drastically different content.

The Latest Rules Ruling Responsive Web – I personally believe that with all these smartphones, androids and iPhones; responsive web designing is here to stay so, better learn the rules and follow them.

The Five Elements Of Modular And Adaptive Content – What I mostly hope you take away from this post is the general idea that our content needs to be modular just like our code and the visual patterns we use across a site.

Seven techniques for providing a tablet optimised user experience – In ecommerce, tablets are now finally being recognised as an entirely distinct category than smartphones, so the overarching mobile category is no longer relevant.

The progress element – Since browser support is pretty good, it’s definitely worth using the <progress> element where appropriate, but you should also ensure that you provide textual fallback for legacy browsers as has been outlined above.

Eight ways to adapt your content marketing strategy to mobile – Mobile is changing our behaviour. And the message from a recent mobile marketing event, hosted by ORM London was, adapt to this change or be left behind. Mobile usage is big and it’s set to be even bigger.

The Challenges and Rewards of Responsive Design – the rewards of responsive design seem at first, endless and it is unarguably a huge leap forward for the web design world, and a big step forward into fully responsive web browsing on all websites.

The Mobile-Only Strategy Imperative – So, while we’re not quit there yet in terms of content creation, writing and more, there is a vast majority of the population that is making the transition away from the PC as seamless as physical landlines to mobile phones was… only this shift is happening faster and faster.

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

Top Design Trends Business Websites Should Avoid – Web designers always want to stay on the cutting edge of trends and sell those ideas to their clients to show that they can handle the latest and greatest technical and artistic advances, but that doesn’t mean that they are right for all businesses.

15 Most Popular jQuery Plugins of January 2013 – It’s time for our monthly roundup of the most fresh jQuery plugins of January 2013, Check out these plugins to see what you may have missed in January.

What is web typography? Basic concepts and rules explained – We explain the concepts and terminology of web typography, including how it differs from print typography, in words you can understand. Typography is the art of arranging type into a legible, aesthetically pleasing and design-appropriate layout.

Use of Pricing Tables in Web Design – Those who offer different services, proper implementation of a pricing table is a vital part of website creation since well-organized data is one of the methods to bring positive impact on visitors as well clean and open comparison help to win customers.

Top 5 E-Commerce Trends For 2013 – In this growing age of globalization, online businesses are trying hard to please customers and generate profits. This article discusses what I consider to be the five key trends of e-commerce for 2013 and suggests ways in which you can benefit from them.

Does the Web Design Work?The ultimate goal of web design is to change a certain behavior. An important thing before we get started: What I’m talking about here is web design for commercial purposes, not for personal projects or pleasure.

Setting Weights And Styles With The @font-face Declaration – In this article, we’ll start where we left off. Because weights and styles help our visitors to read our content, we should make sure they work! And getting weights and styles to work correctly using the @font-face declaration can be a bit crazy-making.

Designing In The Transition To A Multi-Device World – It’s obvious that our digital world and, by proxy, our design process are in a state of transition. And they should be: considering design in the context of your materials and goals is always important.

Setting Up A Staging Environment – A staging server is a mix between production and development; you get to test your app as if it were in production. Let’s review some of the issues that you’ll have to consider, as well as the steps needed to replicate a production Platform as a Service (PAAS).

Favicon: A Changing Role – Many developers pay insufficient attention to the importance of favicons and thereby miss an opportunity to make their websites that much more distinctive and memorable. The concept of favicons was first introduced by Internet Explorer in 1999.

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

Understanding the Basics of Color Processing – The most widely used color model in field of design printing is CMYK. There are two basic tenets that have to be understood when using this Subtractive Color Model. First is that white is considered as the color’s absence.

Design an effective PDF form using InDesign CS6 – While web designers happily create beautiful, functional forms in HTML, the rest of the world is drowning in boring black and-white PDF eForms. And dull forms means less response from your client’s customers.

Tips and Tricks For The Perfect Imprinted Logo – This post can be used as a helpful guide to ensure that the imprint left on the product is an impression that will stick in the heads of everyone who sees it.

A Critical Approach To Typefaces – I’ve always wondered, “What is it that makes a typeface or any other design good?” However simplistic this question may seem to typographers, it is a legitimate question many of us are trying to answer.

How to Create Calligraphic Ampersand Symbols in Illustrator – In this tutorial we’re going to practice our hand in drawing calligraphic versions of ampersands in Adobe Illustrator using the Pen Tool (P) and Width Tools (Shift + W).

How to Use Pen Tool in Adobe Photoshop – In this tutorial I will teach you the basics of the Photoshop Pen tool, which allows you to create your own, custom shapes.As you might, or might not be aware of, the Pen tool is one of the few shapes in Photoshop that work with Vector Graphics.

Font kerning: 10 expert tips – We explain both the fundamentals and the finer points of kerning. Follow our pro advice and you’ll soon be on your way to achieving typographic perfection. Kerning is the process of adjusting the spacing between letters to achieve a visually pleasing result.

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

5 Ways You’re Not Using LinkedIn (But Should Be) – The reality is: this is a much more powerful tool than that… and you may not be using LinkedIn to its maximum benefit. Current careerists often use LinkedIn for generating leads and researching their next job opportunity.

How To Use Email To Alienate Your Users – Spam! But what is spam? Are you spamming users without realizing it? And is there any place in the world for email marketing? Most of us have a love/hate relationship with email. Its one of those necessary evils.

21 Social Media Marketing Tips From the Pros – Would you like to know how to get the best results with your social media marketing? We asked twenty-one social media marketing experts to share their best social media tips today.

Big Trouble in Little Content: Planning for Reusable Microcopy – Writing engaging, reusable microcontent is tricky business. Whether you need titles, tweets, or summaries, consider the destination channels and the workflow.

Most Websites/Blogs Have A Natural Traffic Limit – It’s important to understand that eventually your blog is going to hit its natural traffic limit so you can move on to other things. The timing varies from blog to blog. It might be six months from now, it might be two years. But it’s eventually going to happen.


10 of the Leading WordPress E-Commerce Plugins – If you’ve been thinking about using WordPress for an e-commerce website you may be wondering which e-commerce plugin is the best fit for your needs. There are several different options available, and in this article we’ll look at 10 of those options.

Creating Vanity URLs in PHP: Rewrite Rules – In this post, I’ll show you a more advanced technique that will keep your folder structure clean: rewrite rules in Apache. Apache is the web server software most commonly used to run PHP sites.

Crucial Things You Must Do When Changing Your WordPress Theme – It is very easy and simple to change themes in WordPress with just a few clicks, but you need to have a checklist of items to take care of before you change the theme. These steps are critical to ensure that everything works smoothly, or you may end up losing parts of your site.

Taking a closer look at WordPress Coding Standards – Coding standards in any project gives a similar look and feel to the complete code base which makes it much easier to maintain. People can understand the code written by some other person as it will still follow the standard.

WordPress Theme: Choose Responsibly – Some websites get good ratings while others fail to make an impact. This impact can only be created if the site looks good and functions well and the WordPress theme that you have chosen really makes a difference here.

Search Engine Optimalization, Conversions, Analytics, etc.

7 SEO Tasks That Are Wasting Your Time – If you’re still carrying out any of the following SEO tasks, stop. There are too many other important areas to focus your attention on than to waste time using these techniques!

Stop Clicking Here! 7 Superior SEO Alternatives to Generic Links – A strange trend develop in the world of SEO: the rise of the “generic link.” Generic links are bland phrases that avoid using keywords that search engines use to determine the context of what you are linking to.

Categories vs. Tags: Usage, Organization & SEO – Once you understand how categories and tags work, you now have to prevent them from getting out of control. Your categories and tags can start getting out of control if you don’t take the time to organize your posts properly.

SEO for Freelancers – As a freelancer, you rely on relationships. Building repute and credibility is the only way to build your business. Take this focus in your SEO strategy and you will avoid wasting your time.


Icon Fonts in Use with a Fancy Hover Effect – In this tutorial we will play a bit with icon fonts. Besides other advantages, this technique provides an easy way to have your icons look crisp on retina displays. We’ll use a custom set of social icons generated with IcoMoon App and we will add a fancy effect on hover.

Freelance, Business and Workflow Related Stuff

Take Control and Save Time When Designing for Clients – Always maintain a great relationship with the client, leaving them feeling satisfied at the end of a project but saving you the heartache that running a project can bring. So if you’re struggling to deal with clients and losing the passion to design because of this then why not give our approach a go?

Business Ethics in Freelancing: A Primer – Ethics is really, your moral compass. Each has their own, but since none operate in a vacuum, a freelancer should consider the bigger picture: how their actions would impact their job, reputation, and the profession that they represent as well as the client with whom they are dealing with.

How to find your USP – The truth is that you also need to be a salesperson. Why would anyone want to hire you over your competition? By answering this question confidently with a unique selling point (USP), you can help set yourself apart from the crowd.

How Spec Work Undermines the Design Business – What’s Spec Work? In a few words it’s producing work and submitting it to a prospective client without ensuring that you will be paid and your rights will be respected.

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

10 things they never taught you at (interactive) design school – We ask leading interactive designers to tell us the most important things they’ve learned in their careers. What they say may surprise you.

4 Ways To Amplify Your Creativity – Creativity is key to innovation. So how do you expand your own creative capacity and that of your business? Here are four specific ways to lead a more creative life and boost your creative capacities. Creativity is not about blue rooms and brain waves but about social engagement and mining the existential.

Paul Boag: web designers must iterate more – Headscape founder says it’s time to ditch ‘build it and you’re done’. Boag argued that many website owners (and by extension designers working for them) retain a “print mentality”, setting sites in stone until an inevitable redesign a few years later.

Stop Selling Ads and Do Something Useful – To remain relevant to consumers who spend hours each day focused on smaller screens trying to get stuff done, marketers will have to think like publishers and technology companies.

- § -

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.