.. Your Daily Design Dosis

Tweet Parade (no.42 Oct 2014)

| Comments Off on Tweet Parade (no.42 Oct 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.

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

Building a Website by Progressive Enhancement – When building a website you have a few ways to do the fancy stuff. A third is to start with a bare bones page, and add scripts and styles so it is readable and usable without them (progressive enhancement). In this series we will focus on the third option.

Design Amazing Single-Page Apps with the New Foundation and Angular JS – In the final part of our three-part Foundation for Apps saga, we’ll be discussing our AngularJS Integration and how it helps you produce single-page web apps.

A Graceful Fallback for SVGs in Old IE – Now I hope going forward you’ll use SVGs even in projects that still require support for older versions of IE. This means you’ll be safe in the knowledge that they can gracefully degrade to PNGs if needed.

How to use CSS3 transforms – CSS has developed exponentially in a relatively short time. CSS3 has tons of amazing features, and one of the key aspects is the ability to modify an element using CSS Transforms.

An Introduction To The HTML5 History API – With the HTML5 History API, we have more control on playing with the browser history. For example, we have a way to add an entry in the history, or change the URL in the address bar without refreshing the page.

Introduction to Dates and Times in JavaScript – JavaScript doesn’t make these distinctions itself: with the exception of the Web Performance API, all time in JavaScript is derived from a standard known as the Unix epoch

A Guide to SVG Animations (SMIL) – SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification

Cutting-Edge CSS Features You Can Use Today – In this article, we’ll cover three cutting-edge features you can add to your CSS toolkit today: blend modes, masks, and clipping paths.

CSS “vertical-align: middle” property for all browsers including IE7 and IE6 – The first example works in all new browsers except Internet Explorer of version 7 and less. The second one looks more difficult, but it has some tricky fixes which make it workable in IE7 and IE6.

The Theory Behind Progressive Enhancemen – It will make your code more maintainable. You will likely have more semantic HTML. You will be able to revisit it in the future and easily understand what’s happening with the markup, the styles, and the scripts.

Installing Node.js on Windows – We’ll be going over how to install Node on a Windows 7 personal computer, but the general process is the same regardless of which operating system and OS version you’re using.

Getting Started with SASS (with interactive examples) – Have you always wanted to learn Sass, but never quite made your move? Are you a Sass user, but feel like you could use a brush up? Well then read on, because today we are going to review the features of Sass and some of the cool things you can do with it.

Replacing Radio Buttons Without Replacing Radio Buttons – It’s tempting to replace them altogether, with some custom markup and CSS of our own design. The trouble is, the resultant rat’s nest of divs and spans will lack the semantic and behavioral qualities that made the standard type="radio" input accessible.

Introducing the HTML5 “Menu” and “Menuitem” Elements – These two elements are amongst the least talked-about among developers, probably owing to their lack of support in major browsers. Firefox is the sole browser to have implemented this element at the time of writing.

Personalizing Git with Aliases – Part of getting comfortable with the command line is making it your own. Small customizations, shortcuts, and time saving techniques become second nature once you spend enough time fiddling around in your terminal.

CSS-Only Solution For UI Tracking – But what matters in the end is the impact for clients. We all use instruments like Google Analytics. It is a powerful way to collect data. In this article, we will see a CSS-only approach for tracking UI interactions using Google Analytics.

Resources for Getting Into NodeJS – Node.js has exploded in popularity since its relatively recent introduction in 2009. I’ve traversed dozens of sites looking for relevant beginner-level material. In this article, I’ll do my best to present what I think are the best up-to-date (and free) resources for getting into Node.js.

Automatically adjusting the height of a textarea to its content text – While I was working on a simple web based markdown editor I needed something where the users can type their texts. I only needed something simple and stupid – the good old TEXTAREA.

Detect Inverted Color with CSS and JavaScript – If I can read the original value for background-color or color and I can read the value for the filter, then I can compute the inverted value, which means there is a way after all.

A Close Look at CSS Box Shadow – The CSS box-shadow property can be used to give block elements a drop shadow or an inner shadow. Let’s take a close look at this CSS property. Here are three different examples of applying the CSS box-shadow property on a div.

WOFF2 See the Wizard, a Wonderful JavaScript Feature Test – We’re always interested in ways to lessen the weight of the assets we serve on sites, which often means better performance for all. On average, WOFF2 results in 30% smaller files compared to WOFF.

Usability, UX, Responsive Web Design, Mobile, Performance, A11y, etc.

Simplifying Complexity: Responsive Interfaces – Responsive design needn’t only be a cure for site formatting. Responsive design allows us to be… Responsive. Allows us to respond to our users. Interfaces can be fine-tuned for the individual, making use of location and other metadata.

Wayfinding For The Mobile Web – To help balance the craving for visual simplicity with the need to keep websites easy to navigate, we can borrow some concepts from the world of wayfinding. This article shows how you can apply these concepts to the mobile web.

Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors – First off, your icon sets should be vector-based. The approach described in this article focuses on generating multiple asset versions from a single vector shape in a Photoshop document that contains all of your icons.

Responsive Versus Adaptive Design: How To Choose Between The Two? – Owing to complications arising out of using the same code in every version of the website, an alternative to RWD technology known as adaptive delivery or design is what brands are turning to these days. How would you choose between the two?

CSS-Only Solution For UI Tracking – But what matters in the end is the impact for clients. We all use instruments like Google Analytics. It is a powerful way to collect data. In this article, we will see a CSS-only approach for tracking UI interactions using Google Analytics.

Putting ‘Intuitive’ Back Into Intuitive Design – The interface and overall experience design of your product can take the same approach, allowing your product to meet your users’ needs through intuition and exploration.

Mobile Devices and Responsive Design Patterns for a Successful Experience – Responsive web design has become a usual phenomena and not a trend anymore, but there are still flaws that make this process more of a hassle than an enjoyable experience.

3 fundamentals of responsive design you have to master – Responsive design is the future of our industry, but with so many different techniques flying around, it’s often hard to keep up. Master these 3 simple techniques, and you’ll be 90% of the way to being a responsive designer.

Responsive Images: The Ultimate Guide – It goes without saying that until a magical one-for-all formula comes along, none of the solutions above will address every possible design eventuality. But that doesn’t mean you can’t create beautiful, responsive content that works like a dream from desktop to mobile.

Adaptive design: what is it and why should I be using it? – Layout can form a part of adaptive design, sites automatically transforming accordingly within a viewport or a range of screen sizes; but equally it can be about adjusting elements of a website in order to more appropriately address use cases, ..

Webdesign in Common, Web Typography, Tools, etc.

Loading webfonts with high performance on responsive websites – Webfonts are spread all over the internet, but we still don’t really know, how to load them efficiently. Here is my simple guide on what to do, to offer the optimal user experience without having to avoid the expensive accessories (aka webfonts).

An introduction to Modernizr for designers – In this article I’m going to introduce a way to ensure that you’re designs are able to take advantage of new HTML and CSS features using the Modernizr JavaScript library and API.

8 Tips To Become A Better Front End Developer – Whether you are a newbie or professional, chances are that some of these points will help you to bring your front-end development career to the next level. Here are 8 tips to help you to become a better front-end developer.

The easy way to future-proof your web design skillset – The last century has seen a tremendous shift in the value we place on artisans. Particularly in light of the mass market style production of products, craftsmanship is still sought after for its quality and distinct style.

Adventures in Dynamic Subsetting – An initial load on nytimes.com, today, will serve 480kb of font files, ign.com will throw another 240kb at you, and the new Gotham goodness on twitter.com will net you 155kb*. Compression can help, but to truly optimize web font usage, web designers need to get familiar with subsetting. Or even better: font services could do it for us.

How to be a Good Developer – In this article, you’ll learn about how to be a better developer by following the “etiquette” of programming and you’ll learn how to use this information to perhaps teach others to better themselves.

Perfect your calls to action with the right words – Words are hugely powerful. They are what mostly make up the Web. Without copy the Web would be nothing. Yet in many design projects words are seen as an afterthought when they should be the focus from the off.

Be A Better Designer By Eating An Elephant – Learning something daily is not hard. Some amazing websites will help you do it; they’ll give you some random, small, independent piece of knowledge that’s great to talk about over coffee but that won’t stack.

How To Get Started in Web Design – This is also going to require a little time and mostly isn’t directly about the coding itself. It’s about getting you to a place where you’re doing web design for real and you can’t help but learn!

Icon fonts vs SVG – which is the best option? – If you’re building an icon system for a site, what are your options? Two of the most popular vector options are SVG and icon fonts. Each has its pros, cons and usage scenarios. Here’s how to make the right choice for your project.

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

The Ultimate Guide to Cutting Stuff Out in Photoshop – In today’s post I give an overview of a range of cutting out techniques that I’ve learned over the years and offer advice on when each method is best used.

6 Great Tips to Create Better & Original Logos – The experience is something subjective, how to sharpen the skills is intensively treated in our previous posts, but we haven’t talked that much about how to develop the boosting environment in order to create better logos.

Useful Illustrator Tutorials of 2014 For All Learners – Here we have collected a selection of illustrator tutorials published in 2014 that could be very useful for designers. Some are quite advanced and time-consuming, but there are also beginner tutorials and quick tips included here.

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

Why your current social media strategy is wrong – Some of the biggest brands in the world are spending big bucks in the hope of turning paid likes and followers into measurable ROI. Guess what: They’ve been doing it all wrong.

7 Obsolete Social Media Tactics You’re Wasting Your Time On – You already know social media marketing is a channel that can drive traffic and sales, but the question is: are you actually seeing an increase in traffic or sales?

Exploring Social Design Patterns For the Web – Although many people are designing mobile products that are social in nature, few understand what that really means, how it works, or why it’s important. In this article, we dive deep into 10 different UI patterns for social design.

8 Ways to Make Social Media Work for You – However, too many businesses fail to do their research before diving into social media – and there are many ways to fail at social media. Follow these eight practices to set your business up for success on whatever platforms you decide to use.

WordPress

Set Up WordPress Like a Pro – A complete professional installation and configuration can contain a lot longer than the famous 5 minute install! From .htaccess security to automated deployment, I’ll take you through some amazing methods you can use to create a WordPress environment fit for pros.

Creating Maintainable WordPress Meta Boxes: The Front-End – This article will continue building on what we’ve done thus far. We’re going to be introducing content in each of the tabs, implementing functionality that allows us to toggle said content, and we’ll begin introducing the fields for content on the first tab.

How to use WordPress shortcodes in page/theme templates – Plugins and widgets enable users to take advantage of a huge array of extra or additional functionality – from displaying a simple list of popular posts to conducting user polls or inserting complex forms.

Database Changes to Improve WordPress Performance – There are many ways of scaling your WordPress website, but we will focus on database tweaks in this post. WordPress uses MySQL as a database and this post assumes you are familiar to the database structure of WordPress.

Factors to Consider in WordPress eCommerce Plugins – What should you look out for when setting up a WordPress eCommerce website? Below I have reviewed some of the possible solutions and particular features that make them stand out from the rest.

Should You Accept Comments on Your WordPress Site? – This desire to interact extends to the websites they spend their time reading — this is especially true for blogs. For WordPress users, the main source of interaction will be through the comments left underneath the articles you publish.

How to Display Social Share Counts in WordPress as Text – We will develop a WordPress plugin that displays the number of Facebook likes, Twitter posts, and social share count of a specific URL. To display the share count of a social network in a WordPress post or page, embed the shortcode of the social network as defined by the plugin.

Rock Your WordPress Forms With Gravity Forms Conditional Logic – Wouldn’t it be great if you could create a form that’s super clean, and that shows only what’s necessary for each particular user? With Gravity Forms conditional logic you can do all that – and more.

Create Custom WordPress Shortcode and Make Your Site User-Friendly – Although there are five of them already, the need for more shortcodes still continues as more and more plugin and additions of features are being developed. By that, this article is about how to create custom WordPress shortcode.

Understanding And Making the Best Use of Your functions.php File – I just realized that in all my writing about WordPress I’d never tackled as fundamental a thing as what “functions.php” is and does, and I think that’s been a mistake. So, we’ll cover what it is, what it does, what it means to you, and consider a few “best practices”

How to take your WordPress sites to the next level with custom post types – Custom post types are one of the key elements you should grasp if you want to create flexible, professional-grade, WordPress sites. In this article I’ll take you through creating a custom movie post type for a movie database.

How to Optimize a WordPress Database – A large database can greatly affect the performance of your website as it takes longer for your server to retrieve information from database tables. This is why database optimization is so important.

White Labeling Your WordPress Site: The Complete Guide – Basically, your site’s backend could be doing more for you. It could be working harder for you. And that’s why white labeling—the process of adding personalized, branded touches—is such a good idea.

Search Engine Optimalization, Conversions, Analytics, etc.

Homepage optimization – Perhaps optimizing your homepage for search engines works for some of you, but ranking in Google should definitely not be the only purpose of your homepage! In this post I want to explore the main purpose of your homepage and give tips on how to optimize your homepage!

Tutorials

A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects – With jQuery and CSS3 image hover effects, adding brilliant effects to your web pages is no more difficult task. jQuery has simplified it to a great extent that now even a beginner can also create an effective and professional looking web designs with some brilliant hover effects.

Auto-hidding navigation in CSS tutorial – Our goal is to create nice navigation that will slide in when we hover over the icon for navigation (yes, the burger one). Everything will be controlled only by CSS. So if your JavaScript skills are not that rock solid, don’t worry, you will not need them today.

Freelance, Business and Workflow Related Stuff

What I do when a web design client doesn’t pay me – Like you, we wanted to be in control – instead of being pulled by puppet strings each week. You do all the hard work – you deserved to be paid for it. And you deserve to be paid on time. Our clients now respect that if they do business with us, it’s on our terms.

How Much To Charge As A Designer – Listed below are some ways that you can alter your service so it caters more towards the client who is willing to pay the premium price, but there is nothing to entice him/her. Ultimately this means that you can start charging what you are really worth.

6 Efficient Ways to Work Smarter, Not Harder – Some one-time tasks are simply easier to just get done. But those tasks that you will do over and over again, you can definitely come up with a plan and use the right resources for Designers to work smarter, not harder.

Transitioning from Freelance Themer to Professional Developer – However, if you’re reading this, there is a good chance you understand what it is like to be a freelance themer and not quite feel like a professional developer.

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

The self-actualizing designer – The thing about design is that it’s not about you. It’s about the problem in front of you and unless you have a huge ego problem, that problem is not you.

Why don’t you use Bootstrap? – I’ll be explaining why I choose not to use Bootstrap when creating websites for our early/idea-stage businesses. In summary, I would use it in a handful of circumstances but not for a customised production-ready site.

Primed and Ready to Go – It’s absolutely essential to treat front-end development as part of the design process. However, the (foolish, artificial) line between design and development “phases” gets in the way of true collaboration between disciplines.

How to start a startup without ruining your life – Startups are emotional roller coasters that one minute make you feel like you’re changing the world and the next minute, that everything is falling apart.

“I Don’t Know” – I think it’s high time that we got rid of the stigma attached to “I Don’t Know”. This is especially relevant in the web development industry – where the technologies we use come and go as fast as the speed of light.

– § –

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.