.. Your Daily Design Dosis

Tweet Parade (no.38 Sep 2013)

| Comments Off

.. it’s Weekend again, 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.

Responsive website using AngularJS – AngularJS is a magnificent framework for creating Web applications. This framework lets you extend HTML’s syntax to express your application’s components clearly and succinctly.

A Look Into CSS Units: Pixels, EM, and Percentage – There are a number of methods of measurements used on the Web, specifically in CSS, namely Pixel, EM and Percentage.

Introduction To Polygonal Modeling And Three.js – The goal of the project is to enable developers with little 3-D and WebGL experience to create incredibly sophisticated scenes using common JavaScript practices.

position: sticky might be the next best thing – The most important thing is that sticky stuff will be easier to play with, without any JavaScript event handlers. I’m thinking for example at very long tables with sticky thead‘s, ..

Using CSS3 Page Break to Organise Print Pages – Although we are currently leaving in a digital era where everything can be accessed easily, there are many people who still prefer reading long text on paper. There is a chance that a number of your users will print out your content to read offline.

Using pointer-events with Media Queries – One bit of outside the box thinking with media queries is deals with pointer-events. Using the pointer-events property, we can also enable and disable some functionality with CSS based on media query state!

Introduction To Polygonal Modeling And Three.js – In the last few years, though, we have seen advancements in the use of 3-D models and animations on the Web similar to the trends in television, film and native software.

Introducing Responsive Web Typography With FlowType.JS – FlowType.JS, when boiled down, is nothing more than some clever math wrapped in a jQuery plugin, with some options for controlling font sizes to accomplish a certain line length.

How to Implement AJAX Without Killing Your SEO and Accessibility Efforts – That’s when PJAX arrives to save us all. PJAX allows you to add a PushState layer above the AJAX calls. What does it mean? It means that you can add paths and actually change browser history.

CSS Named Filter Effects — Non-Destructive Effects for Images and Elements – The filter-function property can take a URL that references a filter, a number of named filter functions, or a custom function. Again I want to focus on the named functions today.

Feature detection with CSS @supports – Although this detection is usually done with JavaScript, ideally it would be done within CSS which is where @supports comes in. CSS @supports allows us to have simpler and cleaner feature detection that doesn’t rely on other technologies, and works even if JavaScript is disabled.

Canvas Inspection using Chrome DevTools – In this article I will be showing you how to use this feature to start debugging your canvas work. The inspector supports both 2D and WebGL contexts, so no matter which one you’re using, you should be able to get useful debugging information straight away.

Controlling CSS Animations and Transitions with JavaScript – Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries.

How to Use Inline-Block – I’ve been using display: inline-block more often in CSS lately.With the widely-accepted dropping of support for IE7 and below, we don’t have to worry about hacks to make it work properly anymore.

Stop using so many Sass variables – The first is an example of abstracting the actual value away from the place you’re using it, with a more generic, semantically-named variable in its place. This approach has many fans, especially when it comes to colours.

Create flexible grids using Sass – When you’re writing styles for a responsive design, you don’t want to have to calculate individual widths for every element in your layout. Instead, you need a scalable solution that enables you to assign widths that match your grid on the fly.

Some Interesting Possibilities with CSS4 – There are some very exciting features in CSS4, and several that solve some very complicated code problems for CSS developers. With more features being added slowly and older ones being revamped, it is quite the task for the WS3 team.

Bring your workflow to the next level with Grunt – Grunt is a JavaScript task runner, doing its crazy things on top of Node.js and other magical stuff. Grunt can watch for file changes, recompile CSS, lint your JS, optimize your images, and many more other things, and this all in the background, and you don’t even have to leave your text editor.

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

Responsive Web Design at BBC News – Over the last five years there has been a massive increase in the number of devices on which audiences are viewing BBC web content, and BBC News needs a single site that can serve all these different users.

Apps, Tablets and Usability – The current trend towards flat design presents a real threat to the usability on tablets, a recent study from researchers at the Neilson Norman Group (NNG) has found.

The Next Generation of Responsive Web Design: RESS – I feel we are due for a “next version” of responsive web design, given that it’s been a few years since RWD was first introduced. I believe this next iteration is responsive design with server-side components, also known as “RESS”.

Addressing The Responsive Images Performance Problem: A Case Study – We started out by researching other responsive image techniques, but because none of them was a perfect match, we ended up combining some of the best hacks into our own solution.

10 Useful Responsive Web Design Tools – There are a lot of tools out there and it can be difficult to sort through them all. So we gathered 10 most useful responsive web design tools and libraries to get you started.

Page Height, Scrolling and Responsive Web Design – Think about the times you scroll on your mobile phone. Not necessarily on on the Web, but in general. Here are some common scrolling scenarios ..

Responsive Elements – Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny javascript library that you can drop into your projects today.

Make your mobile site 70 per cent faster – As mobile use is poised to overtake desktop use within the next year, there’s a serious disconnect between users’ performance expectations and performance reality.

7 Habits of Highly Effective Media Queries – As we all know, media queries are responsive design’s secret sauce. Here are some considerations for crafting high-quality media queries.

An Insider’s View of Mobile-First Design: Don’t Make These Mistakes – Mobile screens are small, driven by touch, and often connected to spotty networks. Which is why companies taking the plunge into mobile-first design quickly realize that designing for mobile is not the same as designing for the desktop PC.

Responsive Web Design: Will this bubble burst? – Responsive website design is the most feasible option for small websites or businesses that offer almost identical features to mobile and desktop audience.

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

The Importance of a Quality Portfolio – Freelancers that are new to the business should know that it is essential to build a quality portfolio if they want to be noticed by potential clients. They should use it to advertise the skills they possess and the services they offer.

How to Make Your Website Stand out from the Competition – What is the difference between the design of a really amazing website and one that looks ugly and uninviting? This article outlines some design elements and principles that will transform your design from okay to extraordinary.

Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors – Carousels allow multiple pieces of content to occupy a single, coveted space. This may placate corporate infighting, but on large- or small-view ports, people often scroll past carousels.

25+ Really Useful Tools For CSS Developers – With the help of these tools for CSS developers, you can easily maximize your output with an effortless way of simplifying your web development undertakings with the help of these useful CSS tools.

10 Responsive Lightbox Plugins -Lightboxes are wonderful tools to show up some specific content and highlight it from our site: pictures, videos and content from other sites via iframes could be inside a lightbox.

Perfect web typography with slab-serifs – However, there is a style of type that produces the strong horizontal bars of text that serifs excel at, whilst still enjoying the high contrast of sans-serifs: the Egyptian, or slab-serif.

Designing Big: Tips for Using Oversized Layouts – From big photos or video to backgrounds, photos and type, big layouts can have an immediate impact. They catch the user’s attention right away and demand to be seen.

All You Need to Know about Parallax Scrolling – The phenomenon of Parallax scrolling has become quite a roar in the recent times. Those of you who are not familiar with Parallax design can have some amount of enlightenment through the following lines.

How to design news sites – So when we see how many major news outlets limit themselves, it’s disappointing in the light of what could be done by making more use of AJAX. Or maybe not…

CloudConvert – Supports the conversion between more than 100 different audio, video, document, ebook, archive, image, spreadsheet and presentation formats. You can specify advanced options for every conversion type.

Naver – A jQuery plugin for responsive navigation. It is an easy way to turn any navigation system into a responsive-ready, mobile-friendly toggle. Feel free to use it in personal and commercial projects.

Building Consistency and Relationships into Your Designs – To help you when you are trying to create a design that has more consistency and will help you to build relationships between each of your elements. I want you to use the checklist at the end (or create your own!) to see how consistent your design is.

11 Tips for Preparing Enhanced Site Tracking During a Website Redesign – Below is a list of items that the web team should consider early during the redesign project in order to prepare the new site for enhanced tracking.

Reducing the Bloat – Even though we may sometimes have a need for websites and designs that are more complicated than we would like, there are things that we can do to help reduce the bloat and still ensure we’re delivering the best experience to our users.

How Much Will it Cost to Build a Website? – Ultimately, a website design costs what you want it to cost, but if you pay enough to establish a trusting designer/client relationship with a member of a reputable design firm, you’re more likely to be satisfied with the end result.

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

The secret of success: self-branding – There are many discussions on a logo vs. a brand. I can assuredly write that the two are intertwined but still two different things.

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

A 7-Step Process for Expanding Your Online Presence – Positioning yourself as the expert and reaching clients and prospective clients in the places where they spend time today is becoming increasingly important for enhancing your credibility, reputation, professional relevance, and referral power.

7 Ways to Increase Traffic to Your Blog – There are many reasons why you’d would want to increase the traffic to your blog . It could be for monetary reasons, to gain more public exposure or to show off your skills. Bloggers want to see their sites develop, evolve and grow.

7 Sure Fire Options to Drive More Traffic to Your Site – If your website doesn’t have as many viewers as you would like, don’t fret. There are a variety of ways to easily drive more traffic to your site without paying for ad space or being too pushy.

How to use images in blog posts – All blog posts should contain images. Let me say that again: all blog posts should have images. Blogs are not like scientific journals or books. They are a very specific platform that requires very specific type of writing.


The Future of WordPress – This post is intended to trigger some thoughts, tickle the brains of those who can translate this to reality. My own knowledge and expertise is too limited to create the appropriate solutions, yet my experience with WP over the past decade is enough to air some ideas and pointers.

Boost Your WordPress SEO with Short URLs – When the all-seeing Google indexes your website and decides which sites to prioritise over others, one of the factors it takes into consideration is your post’s URL, or permalink.

Search Engine Optimalization, Conversions, Analytics, etc.

Infinite scroll: its impact on SEO and how to fix it – Search engine spiders cannot scroll to the bottom of a page like an ordinary user, trigger the request for more content, and then wait to retrieve it for indexation.

The Beginner’s Guide to On-Site Ecommerce SEO – Today, we’d like to give you a basic understanding of on-site search engine optimization for ecommerce. It will be enough to get you started, make sure you’re sending all the right signals to Google and set you up for SEO success.


AngularJS Tutorial: Learn to Build Modern Web Apps – This tutorial will guide you through the process of creating a full-stack application. It features step-by-step instructions on how to build a fantasy football application, code snippets of the full application, and explanations on design decisions.

How to Make Awesome Flat Buttons (with CSS) – It’s easy to see the trend to these buttons: They’re simple, they’re elegant, and they usually have some quirkly-but-awesome animation effect. In this tutorial, I will present exactly the kind of button that we’re all blown away by, and give you some step-by-step instructions for how to set this up.

Creative Loading Effects – Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube.

Create a CSS/jQuery Image Rotator with Descriptions – So in this tutorial I am reintroducing some of Soh’s original codes on how to build this dynamic automatic rotator. The jQuery is contained within the same index file and it is easy to follow along.

Freelance, Business and Workflow Related Stuff

How Bad Chemistry With Clients Can Break Your Career – Your so-called “golden” client, who provides a mutually beneficial, long-term business partnership, may not actually exist.

Doing away with bad design ideas, and moving on to the good ones – We’re going to uncover a few key strategies creative professionals can use to quickly do away with bad design ideas, and move on to the good ones.

Why Startups Fail – You have to start somewhere if you’re starting on your own. Big named clients aren’t going to fall on your lap just because you worked on those clients IN AN AGENCY.

Design Dilemma: How Do You Know When You’ve Been “Fired” By a Freelance Client? – The financial hit did hurt, but I did manage to replace the client, and income fairly quickly. Again, another lesson in not getting too comfortable with a freelance situation. There are never any guarantees.

How Designers Can Develop Strong Attention to Detail Skills – Design skills would always be number one but aside from that, there are also other skills that one needs to develop in order to be a better designer.

Six signs your project will fail – So it’d be nice to have some clear indicators that my project is heading into trouble. I can’t give you a magic formula, but here are some of the signs that make me nervous.

Important Freelancer Time Management Advice – What would be your reply if you were asked what is the most pressing issue for a freelancer that cannot be avoided at any cost? Any freelancer worth his salt would come up with ‘time management’ as the reply.

5 questions you must ask at the start of every project – These questions also help build a line of communication between yourself and the client. This is also important to a well developed and thought out project because after all, teamwork makes the dream work.

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

Do as Little as Possible – Instead it is an appeal for simplicity and elegance: putting commonality first, approaching differentiation carefully, and advocating for consistency in the creation and application of web standards.

Please Stop Complaining About How Busy You Are – Yes, we all have some strange need to out-misery each other. Acknowledging that is a first step. But next time you speak to a friend and want to lament about how busy you are, ask yourself why.

The Dribbblisation of Design – We have a growing number of people posting and discussing their work on Dribbble, the aggregated results of which are moving our craft backwards. This post is not about Dribbble itself, it’s about what the community on Dribbble value.

A flat Apple – 10 observations and opinions on what’s good and what’s bad about iOS 7 from a designer’s perspective. Still, maybe a little more focus and a less rushed overhaul could have made the transition more graceful.

- § -

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.