.. Your Daily Design Dosis

Tweet Parade (no.34 Aug 2012)


Yay, it’s Weekend .. time for a new roundup with last week’s best articles and tutorials found on the interwebs. It’s all about webdesign, graphic design, SEO, tutorials, social media 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.

Node.js for Beginners – Event-driven programming can be overwhelming for beginners, which can make Node.js difficult to get started with. In this article, I will teach you some of the basics of Node.js and explain why it has become so popular.

SASS and Compass for Web Designers: Finishing Off – The end is in sight! Our Creative Portfolio web page is almost finished. In these final two screencasts we’ll look at cleaning up our SCSS file structure, styling the newsletter subscription form and the footer.

Flickr-Style Dynamic Edit Fields with jQuery and CSS3 – I hope this tutorial can introduce some of the more complex actions in jQuery to interested web developers. My code isn’t overly difficult in that even a novice JavaScript developer could figure out the key points.

How To Write Code Comments Well – Code organization is a huge thing, especially for developers (because they deal with code), and often times it’s a philosophical debate as to how code should be documented, if spaces should be used instead of tabs, what kind ..

21 Handy Online Tools To Test Your Code Snippets and Preview Your Work Instantly – In today’s post we will be showcasing free code testing tools.These tools help you manipulate your unprepared projects and see how your code functions fundamentally..

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

Goals, Constraints, And Concept In A Redesign – This post and the one from last week are the backdrop for everything that follows. What I’m hoping you take away from both posts is that before I started sketching and wire framing and designing, I spent a lot of time thinking.

10 common UX mistakes startupsmake… and how to avoid them! – A positive user experience can transform your business. 10 essential tips to put you on the right track for a better customer experience

Infinite Scroll: The Web’s Slot Machine – A few years ago, everyone was clicking. Today, we’re all scrolling. Twitter, Pinterest, Facebook, and as of this week, Instagram and Medium – it seems everyone is getting on the infinite scroll bus.

Responsive Design: Sensors, Systems, And Actuators – I want to call your attention to an article by Mark Boulton, that could just as easily have started this series, a presentation by Brad Frost, and then briefly mention a few things that didn’t find their way into the series.

Towards A Retina Web – With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards.

The Difference Between Information Architecture and UX Design – Even with regards to its definition, User Experience takes Information Architecture as its foundation and brings it to the next level.

Getting Started with CSS3 Animations – In comes the CSS3 “transition” property. The transition property allows you to control how an element transitions from frame to frame. In this case the unhovered state to the hovered state.

10 Most Important Guidelines for Mobile Web Development –  All you need to have is a whole new perspective regarding designing of the mobile website. Today, in this article I am aiming to sum up the most important guidelines for mobile web development in a simpler way.

Separate Mobile Website Vs. Responsive Website -The two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Mitt Romney’s dedicated mobile website, and in the blue corner is incumbent Barack Obama’s responsive website.

High DPI Images for Variable Pixel Densities – One of the features of today’s complex device landscape is that there’s a very wide range of screen pixel densities available. Some devices feature very high resolution displays, while others straggle behind.

Automatic Conditional Retina Images – One line of JavaScript and a few mod_rewrite rules and we have no fuss Automatic Conditional Retina Images. No DOM crawling. No redundant requests. No server-side scripts. No cookies? No problem, they just get the original image.

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

50 Useful Websites And Resources To Become A CSS Expert – Here we have collected 50 excellent and valuable CSS reference websites and resources for you that will help you complete your CSS tasks easily and effortlessly. CSS knowledge come very handy when you need to..

Create Rich Web Typography With CSS3 & OpenType: Discretionary Ligatures & True Small Caps - Support of OpenType fonts in modern browsers means that we are finally able to control typographic details that make the difference between presenting content and communicating with type.

12 Icon Font Sets Perfect for Replacing Images – Reducing number of HTTP requests is necessary when tuning websites. An example would be CSS sprite that helps to combine multiple image request to a single one. Well, if icons like the ones on admin page ..

Marketing Techniques for Any New Website Launch – I want to share a few tips for Internet marketing which should be done right after a new website launch. There is a laundry list of trends you can follow which really bring attention to newer websites.

Avoid FOUT by Adding a Web Font Preloader – FOUT (a Flash of Unstyled Text) is what you’ll often see in that brief moment before a browser has had chance to load and apply web fonts. Typekit and Google Web Fonts offer us a way around this inconvenience.

8 CSS tools for better web design – It’s a bit odd to execute by hand some repetitive CSS tasks, and also really not productive. I have collected for you a set of eight tools that will help you to build better websites faster.

30 web design secrets to boost your skills! – Packed with professional know-how, you’ll discover secret features of well known tools, the beta services that the design industry is buzzing about and CSS tricks that make page design for multiple platforms easy.

“Coming Soon” Pages: Be Successful Or Die Trying – Even if you have a team of professionals who promise to build a website in the shortest period, it could be several months before the complete website can go live. So, using a “Coming Soon” page is a good idea.

Top 30 CSS Tools and Applications for Developers – Today we have compiled a list of 30 Useful CSS Tools and Applications that will assist and simplyfy the work of developers and designers.

How to design your website to be more interactive – By integrating a few simple elements into any website design, you can encourage interaction and boost site performance. These methods are four of the most popular ..

Creating and Using a Custom Icon Font –  They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than sprites because they are vector and so can ..

best articles of last week

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

Create a Cool Ribbon Style Logo Graphic in Illustrator – Follow this step by step Illustrator tutorial to create a cool ribbon style logo graphic with gradients and effects in Adobe Illustrator. We’ll create the graphic as a vector design to allow scalability as a logo.

75 top typography tutorials – Round-up of typography tutorials has a central theme of experimentation. Learn how to design a headline typeface, create isometric 3D lettering and to smelt your favourite font.

20 New Photoshop Text Effects – Apart from looking good and funky, such text effects can go a long way in leaving the right impression on your potential clients.

20+ New Photoshop Text Effect Tutorials – I’ve put together more than 20 fantastic Photoshop Text Effect Tutorials that give you cute, creepy, festive, fun and even legendary results.

A Collection of Adobe Illustrator Tutorials Released in June and July 2012 – Adobe Illustrator is now a widely used software in the field of design. Web and graphic designers use this tool to design all sorts of things from art logos to technical illustrations.

How to Prepare a Business Card for Print in Illustrator – In this article, I am going to walk you through the several steps you can do to prepare a business card for print. Although I focus on a business card here, these same tips can be applied to other printed pieces as well.

Design, typography and legibility – Sometimes design won’t involve type and you will have a whole lot of different problems to solve but when design meets typography there are certain things to consider when working with them as a whole and legibility is one of them.

50 Tutorials For Creating Vector Graphics Using Free Software Inskape – Inskape is the best vector graphics program available for free, and is a great alternative application to illustrator. If you’re a designer on a shoestring money budget this is the perfect application for creating high quality vector graphics.

20 top tips for great logo design – There’s a whole bunch of ‘gotchas’ when producing logos which can sometimes be forgotten in the race to the deadline finish-line. Here’s a checklist of 20 tips to help you produce on-brand and targeted logo designs.

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

How to Build a Content Strategy for Your Blog – It’s never a good idea to start a blog without taking some time to think it through first. Many of us think we’d like to become a blogger, but we don’t sit down and think about what exactly that means.

What Should You Know About Content Before You Design? – Content informs design. You can’t design a website without an understanding of what content will be on it. You don’t need and likely can’t have every last piece of content written before you get started, ..

How to Create the Perfect Facebook Fan Page, 2012 Edition – Although the rollout of Timeline met with a lot of resistance from those used to the previous interface, over time we’ve all realized that it offers much more control over the visual branding of pages than ever before.


How to Get The Most Out of Your .htaccess File – Whether a beginner or pro, though, knowing what the htaccess file does and can do for you, can enhance a site’s performance, security and more.

Transform WordPress into a Powerful CMS – Here in this post, I have chosen a few top notch WordPress plugins that allow you to do that – transform WordPress into a powerful CMS. We have a few that creatively use WordPress custom field and magically ..

WordPress Filesystem API: the right way to operate with local files –  It abstracts file manipulation functionality into a set of commonly requested methods so they can be used securely in different hosting environments.

The Ultimate Guide to WordPress Post Excerpts – In the theme, theme developers have access to the the_excerpt() template tag. If you have filled in the excerpt box, WP displays your custom excerpt (this is the a great way to write up a custom ‘teaser’ for long posts).

The WPLift Guide to Strengthening Login Security in WordPress – In this post we are going to discuss some ways to strengthen the security of login page by obscuring access to it. Strengthening your login page protects you from some very common exploits and hacks.

How To Become A Top WordPress Developer – First, let’s set a few things straight: becoming a top WordPress developer is hard work — very hard work. It’s going to take a lot of time, energy and determination. If you’re looking for an easy checklist or some ..

Create an Author Comments Feed in WordPress – In this tutorial I am going to ease this task by creating an author comments feed for the comments of all posts written by a single author. Then you will be able to view all the comments in one place.

Search Engine Optimalization, Conversions, Analytics, etc.

How Not to get Penalized by Next Major Penguin Change – Expect that the next few Penguin updates will take longer, incorporate additional signals, and as a result will have more noticeable impact.


Triple Panel Image Slider – In this tutorial we will create a jQuery triple panel image slider with a 3D look. The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, we will slide in the respective next image in each panel.

25 Awesome Tutorials for Web Developers – Being a web developer is amazing because not only that you create stuff with your own mind and hands, but also because you can work with cool technologies and you’ll never get tired.

Unfolding 3D Thumbnails Concept – A 3D thumbnail view concept for image slideshows: the current image gets opened up and a thumbnail view unfolds in 3d.

How to Create an Interactive Graph using CSS3 & jQuery – In this tutorial we will code an Interactive Graph using jQuery (plotting plugin “Flot”) and CSS3. Flot is a pure JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

Code an Awesome Hire Me Card With Your Gravatar – Today we’re going to build a card-style “Hire Me” widget that you can quickly drop onto any web page. A bunch of great stuff about CSS positioning and how to use pseudo elements to pull off some cool effects.

How to Build a CSS3 Sliding Menu – In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect.

Animated Responsive Image Grid – A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the ..

Freelance, Business and Workflow Related Stuff

Thinking about freelancing? Check your priorities first – But with starting anything that involves a substantial time commitment, one must analyze their current situation and decide whether it is not only right for them, but beneficial to them in the long run.

5 Real Reasons Why You Don’t Earn What You Deserve as a Freelancer – In this post, I’ll examine five common reasons why freelancers don’t earn what they deserve. You may find that one of these reasons fits your situation.

The Benefits of Teamwork in a Startup Environment – In this article I want to discuss some of the key ideas behind teamwork in a startup environment. When first building your new idea the adventure can feel exciting and spontaneous.

How to Find Work When It Doesn’t Find You – Freelancing for a living is flat out nuts. Some days you’ll be so buried in work that you never think you’ll see the sun again. Other days will make you wonder how in the world you’re going to make rent this month.

6 Tips for Estimating Price Quotes – For first time freelance web designers, nothing is more intimidating then when their first client asks, “Well, what will it cost?” We all imagine the hardest part of getting a gig will be finding the client, the proposal, or the project itself.

Tips for Building Trust with Your Clients – Trust is an important component of any relationship. When it comes to freelance work, trust can encourage a client to want to work with you again.

How to Give a Killer Concept Presentation – A concept presentation is where you present your development work and decide a particular direction before launching into full-work mode. There are three distinct stages of a concept presentation and you can excel in each of them.

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

The importance of aesthetics in user experience design – The aesthetics problem in design exists not because UX precludes a focus on beauty. The problem is that not all UX people take the long and difficult road to convince clients and stakeholders of the very real business benefits of good aesthetics.

Everything in its Right Pace – Successful experiments turned into trends, and those trends are now becoming unquestioned convention. But is real time always the right choice? Do we even want everything we consume to move at this pace?

A Clever Theft – Steal Inspiration Everywhere – Nothing is original. I agree with that. But then you start to think. And the thing I figured out is that I don’t care. I don’t care if there is something original left in this world or there isn’t.

The Four Stages of Giving Up Photoshop – Would I recommend others try Keynote for layouts? Definitely, at least for one project. Although I was frustrated at first, by the time I was finished, my workflow was completely different than it had been previously.

It’s Business and It’s Personal – The challenge for any business is how to balance Predictability, Efficiency, and Convenience—the first three essentials of Different’s pyramid of “Essentials of Customer Experience”—with personalized service

The Designer Will Make It Pretty – Designers who ignore the potential impact of prettiness on their work are at risk of being surpassed by peers who share their skill set but who appreciate the role of beauty.

 – § -

I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the comments-section. 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.


on this article: “Tweet Parade (no.34 Aug 2012)”