.. Your Daily Design Dosis

Tweet Parade (no.02 Jan 2013)

| Comments Off

.. 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.

My Workflow: Never having to leave DevTools – I wanted to share what I felt like was the single greatest technical win I have come across in the last few months: using Chrome DevTools for full web dev workflow

Things you may not have known about HTML & CSS – I already had in mind some similar things, so I ended up writing this article down. It’s about some random things and facts you may (not) have known about HTML & CSS.

Guide to: Using Transparency (Opacity) In Web Design – In this post, we are going to look into how this particular effect is evolving throughout the years in web space, that includes going back a couple of years to see how it’s done prior to the emergence of CSS3.

How To Work With Transparent Colors And Images In CSS –  I thought I’d walk through how to work with transparency and the different ways to create transparent elements in web pages. Let’s start the conversation with opacity.

Write less, do more: CSS Style – When you consider the amount of time and effort wasted writing inefficient CSS for content that falls outside the scope of traditional front end frameworks, I was firm in my belief that the time spent up-front would quickly be recouped with each subsequent project.

Get Started With CSS3 Transitions Today – In this post, we’ll look at the basic syntax, step through some examples, and finally take a brief look at current browser support.

Using Microdata to Markup Structured Data in Your Web Pages – In this blog post you are going to learn how to use the new microdata attributes as well as taking a look at some popular schemas from Schema.org.

The harsh truth about HTML5’s structural semantics (part 1) – Created arbitrarily; they attempt to introduce a whole new way of structuring web pages; they violate HTML’s own design principles; they harm accessibility for some users; and you shouldn’t use them.

The harsh truth about HTML5’s structural semantics (part 2) – sectioning content is content that defines the scope of headings and footers. Each sectioning content element potentially has a heading and an outline.

Create Super Crisp Vector Web Graphics with SVG Images – Create an SVG for high DPI screens (mobile & desktop), a PNG for mobile, and a larger PNG for older desktop and tablet browsers … not quite our ideal of having one-image-fits-all, but 3 is better than 4!

Rethinking Dynamic Page Replacing Content – Today, we’ll be improving the existing demo such that the dynamic page replacing content doesn’t rely on the hash.

A Look Into: HTML5 Shiv And Polyfills –  if we give styles to HTML5 elements then view them in a modern browser, we should see the result of the styles. However, this is not the case when we view them in Internet Explorer 8 and earlier, somehow the styles do not seem to apply.

SVG Styling – SVG is the standard scalable vector based graphics format for the web and it’s supported by all modern web browsers. SVG’s importance has grown with the increasing number of high resolution devices.

5 Useful CSS Selectors – Besides the usual type, descendant, class and ID selectors, CSS offers several pseudo-class and pseudo-element selectors that allow us to target HTML elements based on their positions in the document –– some even target virtual elements and generate content from the CSS.

How Do You Structure JavaScript? The Module Pattern Edition – JavaScript is interesting in that it enforces no particular structure upon you. “Bring Your Own Organization”, if you will. As I write more and more JavaScript in web app sites, this becomes more and more interesting.

What’s going on here? – Sass 3.2 can generate a separate stylesheet with everything it needs to create a “desktop” look. This page was built mobile-first where smaller width devices get a single column layout, but IE8 and below still get a two column layout.

How To Use CSS3 Multiple Backgrounds – Adding background image with CSS is nothing new, but we were limited to only add one image in one declaration block. Now, CSS3 is raising the stakes by proiding you the option of adding multiple backgrounds.

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

Text size and screen ratios – The 16:9 ratio of the screen makes it either very tall (narrow columns) or a letterbox. It is great for movies, ok for reading books, but rubbish for websites. Reading websites matters to me more than movies.

Designing a responsive, Retina-friendly site – If responsive web design was the fad of the web design/development community for the last few years, the next one is going to be HiDPI support.

The Overflow Pattern – The overflow pattern is a technique used in fluid web designs to expose more content as screen real estate becomes available. Typically seen in carousels and data tables, the overflow pattern allows content to remain compact for small screens while still capitalizing on additional screen real estate.

A few things I learned from redesigning and redeveloping siteInspire – I started the process almost a year ago, which is an insane amount of time full of ups and downs. So I thought I’d pen a few notes as to what I learnt from the process.

Progressive Enhancement with Responsive Web Design and Flash – Maybe I missed the memo, but I’ve never seen Flash used in combination with Responsive Web Design. The transition between the two experiences is seamless and doesn’t require the user to make a choice they don’t understand or install software.

The Power of Faces in User Experience – A person’s face subtly reflects the power and complexities of his or her brain. We can infer someone’s mood or emotions and even read thoughts from a face.

Flexible Foundations – Responsive or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations. I’m able to count myself among the many who, until recently, have failed to see the benefits of embracing the inherent flexibility of the web.

4 Secrets For Doing Gonzo User Research – You were weird enough to become a creative pro. Don’t let research drag you down to being average. Time to go gonzo.

When Infinite Scroll Doesn’t Work – An infinite scroll works well for something like Twitter where you’re linearly consuming an endlessly flowing stream of data without looking for anything in particular, but for search results ..

A Comparison of Methods for Building Mobile-Optimized Websites – In theory, responsive web design is the best solution. But in practice, most RWD sites aren’t implemented optimally and result in slower load times.

Conditional Lightbox – This is just yet another instance where going beyond simple pattern translation can result in a much better user experience across contexts.

5 Tips for Responsive Builds – An iterative, agile-like approach is vital to account for responsive design challenges that inevitably arise as a website takes shape. With that in mind here are my 5 tips for responsive builds

iPhone Style Dragging for Both Desktop and Mobile with jQuery – Sometimes this is hard to accomodate for, but it’s not that hard to create some awesome cross device friendly touch and drag events with HTML5and some smart styling!

You Suck at Retina – The easier way is to just load the 2x asset for all clients. Modern browsers are pretty decent now at scaling down assets in-page. That’s typically fine for photos, and for things like logos — where you want pixel- perfect scaling at smaller sizes.

Responsive Design in IE10 on Windows Phone 8 – So, after all of that, it’s best to just use what Microsoft recommend to make it work everywhere

HTML5 is for the web, not for mobile apps – Android, iOS, and Windows Phone all support building applications with HTML5 and other web technologies. It all sounds great, right? Let’s take a look at some of the “advantages.”

Designing For The Empty States – Empty states are places in apps that have no content or data. They are empty. Traditionally empty states are overlooked as most designers focus on how best to display lots of content or data.

Bandwidth Media Queries? We Don’t Need ’Em! – As it turns out, accurately implementing such a dream media query is not a whole lot easier than implementing a machine that can accurately predict how much it will rain two weeks from next Tuesday.

Tips To Avoid Great Responsive Web Design Problems – Avoiding the responsive web designs problems is possible and a range of solutions are available for the same. Below are listed some of the tips that help you avoid problems associated with responsive web designs.

What’s to Come in 2013 for Responsive Design – This year, more and more designers are going to experiment with how things look on mobile. With that, we’ll see more of a push into mobile-first responsive design where we’re working from the smaller device up to the larger ones.

Responsive Web Design – Tips To Make It Responsive In True Sense – Little do we realize that the mobile version suffers when the size of the page or the number of elements increase. Now to deal with such situations you need to always prioritize performance over features.

CSS Techniques for Retina Displays – As web designers we have to use the above CSS techniques to make websites ready for high resolution display screens.

Take Responsive Design Beyond Media Queries – About things that go beyond fluid grids, flexible media and media queries — things like performance, device support, device optimization and future-friendly designs.

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

Building A New Website? 13 Things To Ask Your Developer For – Question: What’s one thing a business owner building a new website must demand from their development / design team?

10 Rules of Minimalist Design – Minimalist design gets a lot of hype; a quick Google search will yield dozens of lists boasting outstanding examples of minimalist design.  But what criteria do those lists use?  Is minimalist design subjective?

How to Self-Critique Your Design Projects –  With consistent self-critiquing and improvement of work, you will be able to arrive to the design that you wanted to achieve. Self-critique is checking on your own design, searching for flaws and other points to improve.

Five Web Design Mistakes that Will Pull Your Traffic Down – Designing a good website does not have to be intricate, provided you are conscious of some of the familiar mistakes in Web design and know to circumvent them.

50 Fresh Resources and Tools for Inspired Web Design – Take a look and you won’t regret it, this is the best moment to get your daily shot of inspiration for web design or to take any of the listed below as a gift for whoever you want, even for you.

Recent and Useful Tools for Web Development – This post talks about brand new web tools that convert good ideas in excellent pieces of web development. Slowly but constantly, web tools are replacing desktop programs and ..

Improving Your Website Usability Tests – If you want to improve your usability testing technique, there is no substitute for doing more tests. Designing your test to focus on key research questions and not being too rigid with your tasks is a good starting point.

How to develop a great portfolio – Developing a good portfolio is an absolutely indispensable part of building a client base, or getting a good job for that matter. And developing a good portfolio can be a very difficult thing to do if you don’t know all the little tricks.

13 Design Trends For 2013 – What better way to start the year than to make predictions – some obvious, some not so obvious – as to what trends will become more widely used in the design community.

How to use any font you like with CSS3 – With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not.

Fresh Resources For Designers And Developers – January 2013 – This round, you’ll find more cool stuff like color schemesresponsive email templates, a different kind of icon set and a few other cool jQuery plugins.

Latest Tools And jQuery Plugins That A Web Designer Needs – From the multitude of tools, apps and jQuery plugins that are present here, I hope you will find those that can be of help to you, depending on what projects you are working on and what specialization you have.

Ensuring an Effective User Experience on Your FAQ Page – Are you aware that there’s much more you could be doing with your FAQ page and that you could actually increase rapport with your users and customers as well as increase your sales with a proper FAQ section?

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

The top 5 alternatives to Illustrator – Adobe Illustrator is a superb vector editing tool that’s ideal for creating simple print work, web mockups and logos. But it’s also quite expensive and has a steep learning curve for novice users.

The Psychology of Business Card Design – Obviously you do not want your business card to look ugly. So you will naturally be going for decent looks and probably shapes and materials that stand out from the crowd.

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

Learn Important rules regarding Copyrights – Copyrights are to protect the rite of writers or designers. One must always be aware of copyright details before he or she decides to create a blog. This article will guide you through the do’s and don’ts of copyrights.

3 Methods to Showcase Your Best Content to New Visitors – The one drawback with a blog is that new content goes to the top and, eventually, older content falls into your archives where it might never be seen again, including your best content.

The Art of Leveraging your Blog – If you know how to leverage your blog it doesn’t matter how much traffic you get. The key to making money with any blog lies in the quality of the traffic you attract.

Propel Promotion Of Your Content: 9 Ways I Promote Sharing Online – One of the biggest things I see new content writers struggle with is the promotion of their own content online. There’s a definite line between helping your content get off the ground and shameless self-promotion.

How I totally screwed up my blogging strategy – Think about it.  Even if you come across just one idea every day, by the time you sit down to blog, you have at least seven potential post concepts to choose from.

Nine Powerfully Simple Ways to Build Your Email List – I’m going to outline exactly how to optimize all the various different aspects of your email marketing. These articles will be based on my own work with nonprofits, as well as big data research.


Create Custom Shortcodes for WordPress in Two Minutes – Once you’re comfortable with creating a shortcode, you can create custom functionality in just minutes — your imagination is the only limit.

10 Essential WordPress Security Plugins For 2013 – The great challenge when it comes to WordPress Security Plugins is to find the magic combinationwhich gives you optimal cover without conflicts or overlapping functionality.

Creating Highly Customized Post Types with Custom Meta Boxes – Once you start unraveling powerful features like this that are built into WordPress, which can seem a little overwhelming at first, you realize just how powerful it can be.

40 brilliant WordPress tutorials for designers – Fancy starting your own blog but don’t know where to begin? Want to add something new to your existing WordPress site? Then check out these 40 awesome WordPress tutorials

Powering WordPress and website security, Most complete guide – Basically, security is not about perfectly super protected CMS or systems in general. Something like that might well be impractical, or impossible to find or maintain.

An Comprehensive Beginners Guide to the WordPress Loop – The WordPress Loop is the code used to display main content and excerpts of content on WordPress sites. Often times the loop is used to “loop” through and display a number of posts titles and excerpts like on a blog listing page.

A Guide To Retina Graphics For Your WordPress Theme – This article is broken up into sections that you can navigate to, ‘Retina Images With A WordPress Plugin’ / ‘Retina Images Without A WordPress Plugin’ /‘Retina Images Using CSS Media Queries’.

How to Migrate Just the Content and Media You Specify to a New Site – The following instructions will point out all the gotchas and provide the exact instructions you need to move just the content you want to a new site, with zero downtime and including the attachments.

How to Prevent Your WordPress Site Content from Being Scraped – Content scraping is stealing. Hopefully, this post sheds some light on how you can protect, and even benefit from, content scrapers.

Build Beautiful WordPress Sites With Zurb’s Responsive Foundation Framework – This full-featured responsive framework offers a few advantages that some developers find to be sorely missing in Twitter Bootstrap. Let’s compare some features and check out options for using Foundation with WordPress.

Methods for Customizing the WordPress Login Form – In this article I would like to present just a couple of methods for re-designing your WordPress login form. The techniques may take a couple of hours developing new styles, but it can be finished within a day.

Search Engine Optimalization, Conversions, Analytics, etc.

Helping Search Engines Handle Pagination – Pagination is found all over the web. However, as handy as it is, it can sometimes cause problems for search engines. In this article you’ll learn how to solve these problems via HTML link elements.

7 Critical SEO Errors of E-commerce Websites – It’s common for online merchants to think that by simply listing hundreds or even thousands of products on their e-commerce website, search engine traffic will start rolling in. It turns out that is far from reality.

Is PageRank Based Only on The Number of Backlinks? –  If you want to increase your pagerank, then the best type of backlinks are natural backlinks. Period. Once you understand what natural backlinks are, then you’ll see that the number you have isn’t necessarily that important.

SEO – Massive Changes Expected in 2013 – Well, the year has just begun and we will have to wait and see how Google and other search giants change things for SEO. Let’s hope that whatever the changes are, they are for good.

How to Craft Phenomenal SEO Landing Pages That Rank & Convert – When it comes to landing pages, most of the talk, tips, and advice revolves around creating landing pages for paid search. SEO landing pages, on the other hand, ..


Live Album Previews with CSS3 and jQuery – Today we are going to make a script for previewing the contents of an album with a slideshow-like animation. This can be used in photo galleries, online shops, profile pages and more.

Building Icons With a Single HTML Element – With the arrival of ultra high definition screens (think Retina) new design challenges have arisen; we need to find ways to accomodate all devices. Let’s build an elaborate icon with just one HTML element.

Using animation-fill-mode In You CSS Animations – Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, ..

Beautiful Login Form using HTML, CSS3 and JavaScript – Firstly, we will add our stylesheet and and add a simple JavaScript for sliding out icons when we focus on input for entering details.

3D Book Showcase – Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening.

Perform a Split Reveal With CSS – One limitation that we run into though is that you can’t really slice an image into multiple parts. For instance, if you wanted to cut a photo in half and animate the separation, you couldn’t really do it with pure CSS.

Build a basic responsive site with CSS – Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website.

Rounded (brush-like) responsive drop shadows & glows with CSS3 and no images – All kinds of nice visual effects are now added to web pages using pure CSS3, and no images. When it comes to creating box shadows, the most used property is – not surprisingly – the box-shadow.

Freelance, Business and Workflow Related Stuff

Common Dilemmas Designers and Start-ups Face – Whether you’re an entrepreneur or a designer with a little bit of experience, it is very likely that you have run into troubles with the designer/start-up you decided to work with.

Prospecting for Larger Clients: The New Online is Offline – That’s why Google’s Panda and Penguin updates now take “social signals” into account, requiring SEO strategy and social media marketing be integrated.

13 Freelancing Predictions for 2013 – What does 2013 have in store for freelancers? In this post, I share my predictions about what 2013 may hold for freelancers based on my observations and experience.

Reworking Your Business Plan? Consider These Tips – So you’re getting started with business planning to help run your business better. You’ve understood that what matters is not the plan document, but rather the planning ..

16 simple ways freelancers can stand out from the competition in 2013 – But if you find yourself falling shorter than you’d like in your freelancing, here are some simple but powerful ways to step it up over the course of the new year.

The New Year Is a Good Time for Freelancers to Review Their Freelancing Business – In this post, I share some specific aspects of your freelancing business for you to review. You’re also invited to share your own approach to New Year’s resolutions at the end of the post.

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

Are Designers Crazy? – Does determining the exact shading on a hyperlink sound like a good use of resources when compared to all of Google’s other problems? My brain doesn’t work like that of a designer – I know that

- § -

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.