.. Your Daily Design Dosis

Tweet Parade (no.03 Jan 2014)

.. stay up to date! 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.

Tweet Parade 03

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Loading Scripts with jQuery – If you’re using jQuery, there’s a built in method for loading a single script which may come in handy if you’d like to lazy load a plugin or any other type of script. Here’s how to use it!

Myth Busting: CSS Animations vs. JavaScript – Some of the more significant shortcomings of CSS-based animation so that you can avoid the headaches I encountered, and make a more informed decision about when to use JS and when to use CSS for animation.

Writing A Better JavaScript Library For The DOM – Lately, I have started to see more and more problems with jQuery, at least my use of it. Most of the problems are with jQuery’s core and can’t be fixed without breaking backwards compatibility — which is very important.

Flexible CSS cover images – I recently included the option to add a large cover image, like the one above, to my posts. The source image is cropped, and below specific maximum dimensions it’s displayed at a predetermined aspect ratio.

How to use the File Reader API – In terms of browser support the File Reader API is supported by everything modern with the exception of Opera Mini, so you can be confident using it right now.

Bulletproof Accessible Icon Fonts – What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? We’ll show you how to implement bulletproof font icons.

Single Line Comments (//) in CSS – That said, CSS does actually already allow you to use //, after a fashion. It’s not quite a line comment, but a next construct comment. That is, whenever you use //, the next CSS construct – either declaration or block – will be “commented out”.

Vertically Align Text in CSS – To achieve the same vertical alignment for multi line text, we use the CSS trick of displaying text as a table element inside the parent div. Once we assign the child div as a table cell, we can assign vertical-align to it to put it exactly at the center!

A Call For Web Developers To Deprecate Their CSS – Freeing hand space is critical, so it’s important that we try to remove one of the languages in our stack. Through process of elimination, we are left with finding an alternative for CSS. Fortunately, that is possible with Node.

Introducing CSS variables – If there is one thing a language needs to qualify as a programming language, it’s variables; they’re incredibly useful, save us a bunch of work and typing, and improve coding all-round.

Animating CSS Shapes with CSS Animations & Transitions – Talking about animating CSS shapes with CSS animations. We’ll be creating very basic “shape-shifting” layouts of sort. There are also many considerations to take when animating CSS shapes, so we’ll go over all points in this article.

7 Creative Uses of CSS `content` – Another flexible addition to CSS was the content property, which on a basic level, allows you to place text content within a :before or :after pseudo element. Here are seven clever uses of css content.

Create a CSS grid using calc() – Calc() is a native CSS function that allows you to use mathematical expressions with addition, subtraction, multiplication and division. So, lets use calc() to create a really easy-to-use grid system.

When to use target=”_blank” rel=”nofollow” – This used to be “invalid” in HTML (maybe only XHTML?) but people used it anyway since it worked. It’s now perfectly valid in HTML5. But are there good reasons to do so?

A Practical Guide to AngularJS Directives – An overview of custom directives and explain how to use them in real world Angular projects. At the end of the tutorial, I will guide you through the creation of a simple note taking app with the help of Angular directives.

8 Sass mixins you must have in your toolbox – At their core, Sass mixins are blocks of code that you define once and can then re-use anywhere. A mixin can take multiple parameters and make calls to functions to in the end output CSS.

10 HTML Tags You Might Not Be Using – I’ll show you 10 HTML tags you may not be using or maybe even aren’t yet aware of that help to increase the semantics and maintainability of your web pages.

The ins and outs of CSS grids – Today, the best type of grid is one that is fluid or responsive where the grid will respond to the different screen sizes and realign the elements accordingly.

What is Unobtrusive JavaScript and Why it’s Important? – Unobtrusive JavaScript is a best practice methodology for attaching JavaScript to the front-end of a website. It’s an ideal to strive toward and something we should bear in mind whenever we’re adding JavaScript to a site.

How to deliver a seamless mobile checkout experience – 23% of all online retail sales in Q2 2013 came from mobile devices and interestingly, while tablets account for 85% of all mobile sales to date, smartphones have seen a greater rate of growth in mobile transactions.

What responsive web design means for team organisation – After working as a consultant with some very talented internal teams to redesign corporate websites using responsive techniques, I’ve identified a common theme over the past year: RWD is a catalyst for organisational change.

Fast Enough – When you make a decision to create a “richer” experience in any way, you’re trading some level of performance for that richness. That doesn’t mean it’s never a worthwhile exchange to make. Eye candy has value when used appropriately and responsibly.

Touch Event Emulation with Chrome – The problem we face with this is that we are developing websites on a traditional desktop that has no touchscreen capability. So, how do we debug a Touch event, if something is wrong with it?

A Responsive Web Design Process – I’ve been thinking about a right process for quite a long time and finally came up with what I think is a good look at the practical side of designing websites in 2013.

7 unbreakable laws of user interface design – While web pages today have simple user interfaces with no more than navigation and contact forms, the rise of new technologies and standards will create a demand for more dynamic and customized experiences.

UI & UX: Differences, Evolution & What Is to Come – To the end consumer it looks like many apps offer similar if not identical functions and services. That’s why it’s important to take your user interface (UI) and turn it into a user experience (UX).

Better Responsive Images With the <picture> Element – This article will introduce you to <picture>, a new proposed element created to try and solve the problem of serving the version of content images which better suits the device currently visiting a web page.

What’s new for designers, January 2014 – New web apps, jQuery plugins and JavaScript resources, web development tools, responsive design resources, collaboration tools, coding resources, and some really great new fonts.

How to create web fonts using code – Generative typography has become a popular field for graphic experiments. Designers combined their knowledge in typography with creative coding, and the possibility to use algorithms to change the shape of glyphs opened up many possibilities.

10 Useful Screen Capture Websites – I’ve listed below, in no particular order, a collection of useful screen capturing websites that I use on a regular basis, along with they’re specific benefits.

Making for a Delightful User Flow: Checkout Process – There is a lot of talk out there on the interwebz about great user experience. In this post, I will go over one delightful user flow that is just spectacular to give you a tangible example of what you should strive for.

The 18 best image compression tools – No matter how carefully you design your images, the graphics tool you’re using will not save the finished files in the most efficient way. And so passing those images through a compression tool can reduce their size considerably.

Some Cool CSS Tools Worth Checking Out – Whether you are a professional developer or a newbie, sometimes coding can be a tedious job and can take too much time. Time saving CSS tools have been released and helpful in order to quicken the coding process.

Goodbye to 8 Design Elements Whose Time has Come – Some of them have died already, some are dying, and a couple have been recently diagnosed as “terminal.” Looking forward, I think their diminishing presence will make 2014 a better year for experience design.

PSD to HTML is Dead – Photoshop mockups can be used as a visual aid to discuss ideas. In a PSD to HTML workflow, the Photoshop document represents the final site and it’s expected to look exactly the same in the browser.

Better web typography in 13 simple steps – Instead of simply knowing the rules you also need to understand the reasoning behind them. Here are some of the basic dos and don’ts of typography, specifically applied to the web.

5 Tips for Pre-Launch Landing Pages – Taking out the possibility that you built bad product — that it was poorly designed or the functionality was off — the problem probably comes from the lack of building anticipation and excitement prior to the launch date.

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

What’s new in icon design – We’re going to do is to analyze 5 concepts of designing icons, new characteristics or “patterns” that could become relevant, and the characteristics concerning new paradigms.

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

Editing Tips For Business Web Content – Defining “quality content” is difficult. A useful approach is to look at the editing process, because editing is where content theory is translated into cold hard facts.

Writing Is Thinking – When you write about your work, it makes all of us smarter for the effort, including you—because it forces you to go beyond the polite cocktail-party line you use to describe what you do and really think about the impact your work has.

Developing a Response Model in 5 Easy Steps – Before we find new ways to beat an algorithm or push more tweets at a time, I have an analog solution that every brand should have, but sadly, few do…it is the lowly social response model.

8 Best jQuery Tutorials for WordPress Beginners – With these tutorials not only will you learn how to add these nifty jQuery scripts to your WordPress site, but you will also get a chance to learn jQuery a little bit, and how to use it in WordPress.

Search Engine Optimalization, Conversions, Analytics, etc.

How to Create a Prioritized SEO Action Plan – Clients and managers will be much more likely to implement your recommendations if you propose clear, concrete action plans that prioritize steps based on expected cost and benefit.

Tutorials

“Look Inside” Book Preview with BookBlock – A “look inside” book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation.

What Makes a Great Designer? – While these tips help, there’s no right or wrong path to success and there’s no right or wrong path to greatness, either. Anyone who has made up their mind to be great or successful eventually stumbles there one day.

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

Make, Do – Make with your best effort, and do what you can. Don’t let the possibility of what could be deter you from forward progress. Otherwise, how are you going to get it done without putting yourself at the risk of a stroke?

How Modular Content Works – With modular content, you don’t have to commit to where images or text or any other media will appear on a page until you are creating that page! You don’t have to worry about catering your content to a structure that already exists.

Workflow Orchestration for the Wary – More than some other subjects, consolidating your workflow using a task runner or something similar is best learned by doing. I urge you to try it out hands on: walk through an online tutorial or find a simple project of your own and experiment.

Learn to Code: Tips for Designers (Part 2 of 2) – “Not only can coding offer opportunities and benefits for your own life, you can bring experience and qualities to coding that will make it a better, more productive environment for everyone.”

– § –

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

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.