.. Your Daily Design Dosis

Tweet Parade (no.48 Nov-Dec 2012)

| 1 Comment

A new weekend, .. 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.

Essential CSS Layouting Resources – Forgot how to properly tame the CSS layout beast, you say? Or didn’t learn it in the first place? Worry not, since here’s a list of a couple of the best and easiest layout techniques.

Why use @supports instead of Modernizr? – The reason to use @supports over Modernizr is performance; functionality that’s built into the browser will always be faster than adding it in script. Removing an external dependancy saves an HTTP request to download Modernizr and doesn’t require time to execute the JavaScript.

Use Tomorrow’s Web Standards Today With CSS ‘@Supports’ – Modernizr is great when you need it, but did you know that soon the browser itself will be able to give you the same information?

Changing Times For Web Developers – 6 Tips You Should Read To Survive – Think about crafting your web applications properly. Use commonsense to mix and match based on scenarios. Here we go with 6 Tips to be a responsible web developer, and to stay on top of what you do.

30 Amazing Resources for Sass Lovers – Despite the predictions of countless skeptics, Sass hasn’t proved to be a fad at all, but rather a remarkably robust set of tools that genuinely improve CSS authoring.

An Introduction to the Command Line – The command line can be rather intimidating to some developers, particularly those coming from a design background who may be used to GUIs, but fear not, the command line is your friend.

To HTML5 or not to HTML5, that is the mobile question- Until HTML5 catches up to native apps in enabling users to play games and load social networks quickly, the latter will dominate those segments. Still, HTML5 is ahead ..

Using JavaScript to check if images are enabled- Sometimes it’s useful to know if images are enabled in the user’s browser, so that you can adjust your CSS and/or JavaScript to make sure that important content is not hidden and that the page is still usable even if images aren’t loaded.

Colors in CSS – we have various ways to describe color with CSS. Some of them like keywords and hexadecimal has been there almost since the beginning of the web, while other like HSL or RGB came later.

30 Useful CSS Snippets for Developers – A great list of 30 CSS Snippets and I’m sure whether you are an experienced web designer or you just making your way in, they are all well worth checking out.

CSS3 Repeating Gradients [CSS3 Tips] – There are many CSS3 features that change the way we decorate a website, one of which is CSS3 Gradients. Now we are able to deliver these effects by only using CSS

CSS prefixes: it’s not that simple – Too many developers use vendor prefixes in a way that harms website compatibility. The problem is multifaceted, and so there isn’t really one group of people that are to blame, or one golden solution.

Exercise Better Web Typography With CSS Hyphens – I noticed something that only type-obsessed nerds probably notice: some really good-looking hyphenation. A quick right-click to “inspect element” revealed this gem: -moz-hyphens: auto;.

5 APIs that will transform the Web in 2013 – Over the next year, there are a number of technologies coming down the pipeline that have the potential to radically transform how we use and develop for the Web.

CSS :target - The :target pseudo selector provides styling capabilities for an element whose ID matches the window location’s hash. Let’s have a quick look at how the CSS target pseudo selector works!

How to get started with Sass – This article will walk you through the basics, and help you over the prep work required to get Sass set up, so you can use it in your own projects.

CSS3 Image Reflection [CSS3 Tips] – Properties that are currently not included in CSS3 official specifications that are worth to try out, one of which is the box-reflect property that is initiated by Webkit. This property can reflect on the objects specified.

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

Solving design problems – Whether you’re designing something new, or redesigning something, even following just one of these steps will help. The more steps you follow, the better the results.

Responsive Mobile Navigation Menu – Methods and Solutions – There are many solutions, such as select drop down menu, css drop down menu, toggle nav, block, footer anchor, sidebar nav and many more.

Responsive Column Layouts – Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. It doesn’t require any first or last class and the number of columns can be adjusted base on the viewport.

26 Of The Best Mobile Website Resources On the Internet- According to ComScore, we’re just over a year away from having more mobile web users than desktop ones, here are some key resources on mobile and your website to help you make the transition.

WordPress Mobile Solutions Compared – A pure responsive approach to building a website can be a very tempting proposition. After all, it promises to address both your desktop and mobile website needs in one go.

The 10 principles of mobile interface design- In order to keep pace with this rapidly changing landscape, designers and developers need to start thinking about mobile as a primary project goal; not something tacked onto a desktop-centric project as an afterthought.

Best Practices For Creative And Thoughtful User Interfaces – Thoughtfully designed UIs are often more likely to be highly recommended – even if they solve the same problem as their competitors.

Fluid Grids in Responsive Web Design Tutorial – It’s your decision to choose between a fixed or fluid grid to design the layout. Throughout this tutorial we are going to focus on fluid grids and their importance in responsive design.

Why You Should Consider A Ligature Icon Font For Your Next Project – However, there are three fundamental disadvantages to icon fonts, two of which are also shared by image sprites

The ultimate “target retina screens” media query – In terms of CSS, to specifically target this group of devices, unfortunately there’s no easy way to say “apply this set of rules to all devices where physical pixels are not equal to CSS pixels”.

Responsive Typography in Web Design: Understanding and Using – RWD has different components. Another component is Responsive Typography, it is quite recently introduced, and is the one we will discuss in today’s article.

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

Seal the Deal: 10 Tips for Writing the Ultimate Landing Page – So let’s look at 10 key steps to writing and designing a landing page that will help get you the results you’re looking for

How Are Web Designers Getting Affected By Cloud? – Large IT organizations have taken advantage of cloud hosting and software as a service (SaaS) features for several years now, but individual web designers are finally starting to pick up on the cloud computing trend.

Using Transparency in Web Design: Dos and Don’ts – Experimenting with transparencies is a great way to expand your design repertoire. Like many other effects, use this technique sparingly and test the design in multiple environments to ensure that it works and looks as you intended.

7 Great Tools to Help You Build Your Own HTML5 Forms – Forms can be one of the most complex aspects of your front-end development work. They’re far more complicated than most of the items that you’ll work with from both an HTML and CSS perspective.

10 Tips for Great Web Typography – Understanding the basics of type is the key to readability, flow and design harmony. Here are 10 quick tips that any designer can use on the way to creating outstanding web typography.

Design Improvements to Attract Visitors to Your Websites – Type and goal of website, potential users, and business policies behind it are only some of the essential factors that could affect the strategy.

Website Personalization: Tailoring Website For Magnetism – Personalization process is about offering ‘tailor-made’ environment to a visitor with dynamic content, which varies as per the needs, selection and user behavior.

Chrome Dev Tools: Networking and the Console – The Network panel gives us a view into the resources that are requested and downloaded over the network in real-time. Viewing network traffic isn’t the most glamorous activity – especially if you’re new to web development.

The Importance of Design Functionality & Conversion – It’s difficult for designers to come to grips with the look of a website that’s made strictly for optimizing conversion rates.

Your 12-Point Checklist for Mobile-Optimized Landing Pages – This post is going to tell you the best practices for optimizing your landing pages for mobile devices — it’ll be a handy checklist to ensure you don’t miss out on that on-the-go audience of yours.

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

Adobe Illustrator tutorial: Create vintage type styles – In this tutorial, Melbourne-based type artist Bobby Haiqalsyah details how he creates vintage-style pieces through the interesting use of original reference materials, ..

Photoshop tutorial: Master lighting effects – Setting the overall mood of an image can be easy, thanks to simple, highly effective lighting effects in Photoshop.In this tutorial you’ll learn various techniques used by the professionals, including brushes, layer adjustments and layer modes.

The Aesthetics of Reading [PDF] – Specifically in this paper we examine the benefits of good typography and find that good typography induces a good mood.

Effects of Typography on Reader Mood and Productivity – In their paper titled The Aesthetics of Reading, Kevin Larson and Rosalind Picard present their findings on the effects of typography on reader mood and cognitive performance.

Roundup: 21 Articles On How To Create a Good Logo And How To Avoid Disaster – Creating a logo is a hard thing to do because in a single image you need to include everything starting from that company’s ideology and all the way to the consumer’s psychology.

Your Brand is More Important Than You Think – The importance of establishing your brand in the era of Digital Darwinism cannot be overstated. Digital Darwinism occurs when technology and society evolve faster than one’s ability to adapt

10 Beautiful and Free Slab Serif Fonts – Slab serif fonts, which have blocky shapes at the end of some (or all) characters, are versatile and can be used in many situations. This collection of free fonts includes a handful of excellent slab serifs for you to check out and download.

StyleManual – This is an absolutely incomplete, personal reference. When something is in question, I plan to document the opinions of multiple books, drawing my own conclusions and setting my own rules for style.

What makes a good logo designer?- The process of creating a logo, at least on a professional level, can easily become a long series of complex tasks that don’t necessarily have anything to do with designing, and to be successful in doing that the designer needs to have a quite peculiar mix of skills.

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

How to Optimize Your Website for Social Media – So what can you do to ensure that your website or blog is receiving the right amount of attention from social media, i.e. how do you optimize your website for Social media?

Your Blog is Your Portfolio – Any blog can be turned into a portfolio blog with just a few additions. And these changes will only make your blog more attractive to your followers and the search engines.

What’s Your Long-Term Blogging Strategy? – They key to building a successful blog that produces long-term income is planning, or strategy. Your blog is your business and no one sets up a business on a lark.

On New Inspiration Sources for Blogging- The issue of inspiration, fighting writer’s block, getting ideas for new posts and articles, and generally being able to write new posts on a consistent basis is one of the main challenges of blogging.


Customising and Simplifying the WordPress Admin for Your Clients – When you’re building a website for your client, sometimes there are parts of the WordPress admin that you don’t need them to be able to access.

What’s New in WordPress 3.5: The Developer’s Perspective – The final version of WordPress 3.5 is coming closer – the first release candidate has already been presented to the public. It means that we should have our hands dirty with testing.

Registering Custom Post Types- Registering Custom Post Types is a breeze, really. You just need to set all the variables that are going to govern how your custom post type should function, and put that code in either a plugin, or your theme.

Using The Wp_Editor() Function On Theme Options – In this tutorial we are going to create a function that can be used to add a TinyMce textbox on your theme options page. A tinyMce textbox allows your users to easily create HTML in a textbox.

Parse RSS Feeds as Content in WordPress – What most people do not know, however, is that WordPress is also quite capable of pulling in RSS content from outside blogs and parsing it for display within one of its many template files.

How to Break a WordPress Install (And Fix It Again) – Sometimes it’s tempting to change the Site URL to reflect a change in your domain name. It is important that you do not do this!

Understanding and Using Featured Images in WordPress – WordPress also lets you add a special kind of the image to the post called as a featured image. This featured image is not a part of the content but can be used in the various places in the theme to display the post.

How to Find a Backdoor in a Hacked WordPress Site and Fix It – Time and time again, we have helped users fix their hacked WordPress sites. Most of the time when they reach out to us, they have already cleaned up the site, and the hacker was able to get back in.

Custom Database Tables: Creating the Table – In this article we’ve looked at reasons why you should and shouldn’t use custom tables, as well the details you’ll need to consider and finally how to create a table.

Top 100 Resources for WordPress Tips, Tricks, and Tutorials – Thankfully, a lot of bloggers like to share the tips that they’ve picked up along the way. In no particular order, here are our top 100 resources for WordPress tips, tricks, and tutorials.

44 Ways to Hack the WordPress Media Library – Today we’ll go over all kinds of different ways to enhance, hack, and extend the capabilities of the WordPress media library.

Search Engine Optimalization, Conversions, Analytics, etc.

10 Tips to Improve Conversion Rates – Your website may be at the top of Google’s search rankings, but if you fail to convert your visitors, your SEO is effectively worthless. Conversion rate optimization is just as important as SEO.

47 Resources To Carry Your Link Building Through 2013- It is also clear that Google will continue to roll countless updates that will have some impact (big and small) on sites that aren’t careful with their link building tactics.

Everything You Need To Know About Meta Description Tags – The Meta Description tag is a concise summary of page’s content to describe the current web page. They are used by search engines for displaying little snippets of text ..

7 Sure Signs You’re Due for Negative SEO – Negative SEO is relatively rare, but it’s still essential to keep a close eye on your back link profile and ensure you’ve got nothing in common with a spammer

Creating a Mobile Strategy: Reach Your Audience On the Go – Become more accessible to your target audience and increase customer loyalty by being available whenever and wherever they want to access your site. Follow these steps to create a mobile strategy.

XML Sitemaps 101 – We all know how important XML sitemaps are in helping the search engines index our websites better, but it is quite surprising how many webmasters fail to implement it this simple, crucial component of site optimization.


CSS3 Image Gallery with Dynamic Caption Text – For this tutorial I want to show how we can build a standards-compliant HTML5/CSS3 image gallery with fading captions. We will be using CSS3 transitions to create the animated effects.

Flawless clickable drop-down navigation – In this tutorial I’ll show you how to create a superb clickable drop-down navigation, using jQuery and of course complete with CSS fallbacks.

Animated 3D Flipping Menu with CSS – CSS animations aren’t just for basic fades or sliding elements anymore — CSS animations are capable of much more. Today’s we’ll create a simple but awesome 3D flipping menu!

Calendario: A Flexible Calendar Plugin- Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness.

Build a Freaking Awesome Pure CSS Accordion- What we’re going to build is a pure CSS horizontal accordion slider. You’ll be able to insert as many slides as you want, each with unique content and each accessible via a click event, all without a lick of JavaScript.

Create a Glossy Photo Effect with CSS3 ~ In this tutorial I’m going to show you how to recreate this common effect of making a glossy image, by using some CSS3 gradients.

Single-Page Ajax Portfolio Update Panel with jQuery – In this tutorial I want to explain how we can build a simple portfolio update panel using jQuery. This will make it easier to embed a similar page widget into any portfolio layout.

How to create a simple CSS3 tooltip – Today I’m going to show you how to create a simple tooltip using HTML and CSS to display the title tag of your hyperlinks.
Simple Effects for Drop-Down Lists – Today we want to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin.

Swap Your Page’s Background Image on Navigation Hover – Today we’re going to embark on just such a challenge. We’ll build a basic home page that swaps out background images based on the link that you’re hovering over in the navigation.

Freelance, Business and Workflow Related Stuff

Entrepreneurshit. The Blog Post on What It’s Really Like – It’s not for everybody and you shouldn’t feel bad if you aren’t one of those that chooses this life. You’ll probably be healthier and wealthier.

Better understanding your client’s business- In this post, I explain how you can better understand those organisations, before helping them make the changes necessary to ensure their site succeeds.

Finding Jobs as a Freelance Web Designer Or Other Freelance Specialist- Are you a freelance web designer looking for great opportunities? The thing to do is to figure out if you can do this online and find some great sites to use.

How to Determine if You Should Accept a Freelance Project – Unfortunately, making decisions on which projects to take is not always easy. In this post I’ll cover a number of different factors that I feel should be considered.

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

Building a Design-Driven Culture – Being design-driven means treating design as a partner (and a leader) in the product creation process. Look at your feature roadmap right now.

User-Centric Website Design – We design websites in order to make life easier for the end user. If our website looks good, but has certain annoying features that turn away visitors and potential customers, the project has failed.

Just Don’t Make It Annoying – I find that whenever I’m designing a user interface, the one safe rule to follow is simply this: just don’t make it annoying. This might sound banal, but there are often cases where blindly following ..

Design and Functionality: The Perfect Mix – While beautiful design is important for ecommerce sites, functionality has to be priority in this situation, because customers will quickly leave your site if it’s confusing or inconvienient.

Understanding the Split Layout in Web Design – While this might sound a little silly and obvious in the beginning, this fundamental layout can be very effective. Our eyes tend to follow a zig-zag motion while skimming through a page.

Stop wasting your marketing dollars: Build your brand first – Many marketers and most entrepreneurs think about brand as something you do at the last minute. It’s a name, logo or website that you create right before you launch. But this is backwards thinking that will end up costing you money in the long run.

 – § -

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

1 comment

on this article: “Tweet Parade (no.48 Nov-Dec 2012)”