.. Your Daily Design Dosis

Tweet Parade (no.11 Mar 2015)

| Comments Off on Tweet Parade (no.11 Mar 2015)

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

Conditional multi-column sublists – Being as creative as the designer in the sense that I didn’t burden myself with such practicalities as browser support (yet), I figured I could mock this up with Flexbox.

SVG Sprites and Icon Systems Are Super – Working with a great number of SVG icons on a large scale project can seem especially complex. We want access to the individual SVG parts as inline would provide us with but also don’t want the code for hundreds of graphics being repeated in our HTML.

Making a Responsive Image Comparison Slider in CSS and JavaScript – We have created a lightweight, responsive image comparison slider that works on any layout and size. Image Comparison Sliders are a great way to present before and after cases, this is especially the case when the differences are very small.

[attribute] – Almost anything more specific than a tag selector uses attributes — class and ID both select on those attributes on HTML elements. But class and ID aren’t the only attributes developers can select. We can use any of an element’s attributes as selectors.

Most common git screwups/questions and solutions – What better way that looking the most common ways people screw them up and how to fix the resulting problems! Here’s a short list, compiled from my own experience and issues I’ve come across on the Internet.

How to get started with CSS Shapes – The web has typically been a place of boxes and rectangles but an emerging CSS specification is going to change that. In this article I’ll introduce you to CSS Shapes, explaining what they are and the core concepts you need to start using them.

Understanding CSS Blend, Part 1: Darken and Lighten – Now that blend modes are in CSS, we want to eliminate at least some of that confusion so that we can create great designs without guesswork.

Using the HTML5 History API – The HTML5 History API gives developers the ability to modify a website’s URL without a full page refresh. This is particularly useful for loading portions of a page with JavaScript, such that the content is significantly different and warrants a new URL.

Sass Mixins vs Extends: The Data – I was an advocate of extends for the longest time, and went into this test thinking it would be a close race but felt extends would win purely on file size. Upon jumping into the test and watching gzip go to work I’ve been proven wrong.

Understanding the CSS animation-fill-mode Property – In this article, I wanted to focus on a single part of the CSS Animations spec: the animation-fill-mode property. This is the one animation-based property that isn’t very self-explanatory.

The Truth About !important!important, a legitimate feature of CSS, is a tool. It’s a critical tool for users, for who it’s what guarantees that their rules get applied. And it’s an important tool for authors, us web developers, not just to test but also to come up with sometimes incredibly elegant solutions.

All your base, are belong to us — or what base size do em-based media queries use? – The moral of the story is — your media queries, sized with em units, are going to be based on 16px per em unit — unless the browser’s font size has been changed by the user. You can not override the user’s wishes.

More Transparent UI Code with Namespaces – When we work at scale, we focus so much on things like architectures, naming conventions, methodologies, preprocessors, scalability, etc.: because writing CSS is easy; looking after it is not.

Building a Circular Navigation with CSS Transforms SVG – In this article I want to go over why SVG is better suited for creating this kind of UI element, and give you and overview of the SVG code for creating the menu items using SVG elements and transformations.

What is Meteor.js? – Meteor.js is a cohesive development platform, a collection of libraries and packages that are bound together in a tidy way to make web development easier. There are libraries like Tracker and Blaze that are built specifically for a reactive front-end experience.

BEM crash course for web developers – Today, block, element and modifier is what we’ll be focusing on and also what BEM abbreviation stands for. Because of your interest in this methodology I am going to give you more real-life examples of how you can implement BEM right away.

The Double Ampersand Mixin – Here’s the gist of the article: The + combinator targets an element’s immediate sibling, so if we reference adjacent parent selectors with Sass, we can generate helpful layout styles.

How To Use GitHub and the Terminal: A Guide – We’re going to introduce you to GitHub, the command line (also called Terminal on OS X), and Markdown through a guided exercise. Every step will be illustrated with a helpful screenshot or animated GIF that shows you exactly what your screen should look like.

Immutable CSS – It turns out that immutable objects are objects whose state cannot be modified after [they have been] created. That’s exactly what we’re aiming for with certain types of rule in our CSS!

Introduction to fetch() – fetch() allows you to make network requests similar to XMLHttpRequest (XHR). The main difference is that the Fetch API uses Promises, which enables a simpler and cleaner API, avoiding callback hell and having to remember the complex API of XMLHttpRequest.

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

Four factors that define a successful web optimisation test – When seeking to optimise a website, what is it that defines whether or not a test has been successful? Here’s a summary of some of the factors that make up a successful test. These points are discussed in more detail in the full report.

Beyond Blue Links: Making Clickable Elements Recognizable – Whether you adopt a flat-design style or not, interactive components must retain sufficient cues to suggest clickability. Signaling clickability with cues such as borders, color, size, consistency, placement, and adherence to web standards.

Continuous Input In Mobile Devices: Pain Or Gain? – This article invites UX designers and usability experts to look at the user experience of continuous input. We will detail the process of continuous input and weigh its gains against its pain points.

An Outright Guide on Retinafying your Website – I’ll be talking about the most prominent methods of retinafying your existing website for creating that perfect impression on your visitors. Starting off with the methods utilized for making a website retina-ready

Sorry, your site is not responsive – If you really want a site to be responsive then you need to tackle all the issues and site performance is definitely one of them. It’s great to see people are doing it!

Inlining critical CSS for first-time visits – After listening to Scott rave on about how much of a perceived-performance benefit he got from inlining critical CSS on first load, I thought I’d give it a shot. On the chance that this might be useful for others, I figured I’d document what I did.

Interaction Design: What Is It, and Why Does It Matter? – This blog post isn’t intended to be a thorough dive into the topic; rather, it’s an introduction to what IXD is, why it matters, and how you can pick up these skills.

How to optimise a website for multi-device browsing – If you have decided to take the plunge and optimise your website for multi-device browsing, here are four things to consider to ensure your site provides maximum ROI.

Why developers should embrace progressive enhancement – It’s a philosophy that truly affects a team’s productivity and has a more positive effect on the end product, because it’s an approach that tries to make things easier for both the developing team and ensures a better experience for the user.

Webdesign in Common, Web Typography, Tools, etc.

Clean, Readable & Modern Web Typography – This post will take a look at modern design trends for common web typography. Design might include basics like font size and font family, all the way through more complex ideas like vertical spacing and line height.

Organising a Large Scale Web Project : Five Essentials – The project certainly had its challenges, not necessarily all technical. In fact, some of the most important lessons that we have learned about managing, planning and testing the project have been about organisation.

SVG Tools And Resources You Might Want To See – Developers and designers will be able to successfully create visually stunning, innovative graphics for their apps and websites by taking advantage of these tools.

How To Start an Online Shop in 15 Minutes – Have you been selling in a brick-and-mortar shop and now you want to bring your business online? The solution is building an online store, so I want to show you how to start an online shop in just 15 minutes.

Every Designer Should Know The Importance Of Prototyping – It means that coding and design can be done at the same time, and the completed project will provide exactly the right sort of user experience, without the need for any further troubleshooting.

What’s new for designers, March 2015 – We’ve included lots of new apps for design teams, domain resources, new design tools, JavaScript resources, productivity resources, new frameworks, new mobile apps, new free fonts and much more.

The Command Line for Web Design: Grasping the Basics – You’ll learn all the essentials of working with a terminal or command prompt including how to open it, how to run commands, how to target your project folder when running commands, and how to deal with the most common error message.

10 Tips for Designing Icons That Don’t Suck – One of the smallest features of every app is the icon used to represent it on the screen of every mobile device and in the app stores. Designing a great icon is more than just putting a logo in a box.

What if testing was a part of the design process – Although testing is a powerful tool used by pros, there is no reason why you shouldn’t test simpler sites even if it’s a portfolio or a marketing landing page. The more abstract and high level the design the more value you get from your tests.

Affordances: The Designer’s Secret Weapon – Experiment with signifiers until you can confidently apply them; you’ll discover they can be one of the most powerful weapons you have in your design arsenal.

6 advanced web typography tips – Typography on the web has made huge leaps forward in recent years, allowing web designers to realise their designs with an almost print-like level of control. Here are six tips of Stock’s tips for upping your type game on the web…

‘gonzolicious’ is a personal Tumblr blog Theme with a responsive layout and tons of powerful features, it’s a great premium theme for all kinds of blogs.

Get it here!

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

10 Golden Rules You Should Live By When Combining Fonts – By looking a few guidelines, we can see what has proven to work well as a starting point, then get comfortable moving beyond those basics if a design calls for it.

Is it time to embrace responsive branding? – By embracing an adaptive, perhaps even responsive, approach to all branding, from typography to color, to the logo, we maximise brand recognition and ultimately brand engagement.

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

The Role of Web Design in Conversion Rate Optimization – Realistically not everyone is going to convert, but at least some of them must turn into your loyal customers. While SEO, advertising, social media, etc. can get you traffic, eventually your site must be good enough to capture their attention.

WordPress

How to Stop WordPress Trackback and Pingback Spam – Unfortunately, it’s also a feature that attracts a ton of spammers. Fortunately, there are easy ways to prevent and help stop WordPress trackback spam all together.

30 Experts Share: The Top *Non-Obvious* WordPress Plugins That’ll Make You a Better Blogger – This post isn’t about telling you to go and install plugins such as WordPress SEO by Yoast, Jetpack, or Contact Form 7. You probably already know about their existence, and very likely have them on your site already.

A Simple Guide to the WordPress Quicktags API – This API looks a little bit intimidating. But using it is pretty straightforward—even when using it to trigger callback functions. The HTML mode has some very dedicated users, and they would really appreciate it if you put in a button or two when you’re developing a theme or a plugin.

An Introduction To WordPress Attachment Pages – Attachment pages allow users to comment on images which may be great for media-related professions. In this article I’ll tell you a little bit about this relatively obscure page type and how you can add it to your theme using a bit of code.

How to Display the Latest Sticky Posts in WordPress – The code above queries the WordPress database to retrieve the 5 latest sticky posts. It then displays each sticky post’s title with a link in a list format. We have wrapped all that in a function and created a shortcode.

5 Best Contact Form Plugins for WordPress Compared – In this article, we have hand-picked the 5 best contact form plugins for WordPress and compared their pros and cons, so you can easily add a contact form in WordPress.

Disqus Review: Should You Use It with WordPress? – Engaging your visitors is vital to growing your audience, and enabling comments is one way to help you achieve this. There are many comment plugins out there, but one of the most popular commenting options available is Disqus.

How to Disable the Full Height Post Editor in WordPress – In WordPress 4.0, a new writing experience was introduced to the post editor. In this article, we will show you how to disable the scroll free full-height post editor in WordPress.

More Education is Needed on Backup Software, Services, and Strategies For WordPress – I’m surprised to see only 24% of respondents use a backup plugin at all considering there’s so many free options available.

Tips for Simplifying WordPress to Make it Client-Friendly – Removing menu items, disabling plugin deactivation, modifying the dashboard, adding notices in the backend and so on. In this article I’ll show you some techniques to help you streamline the WordPress backend for yourself or for your clients.

Creating a Featured Content Widget – With its Own Image Uploader – This widget would allow you to specify a title, add some text, an image and a link. This information would be presented in a nice way in the sidebar.

Search Engine Optimalization, Conversions, Analytics, etc.

Breaking News In The World Of Web Design – Beginning April 21st, Google’s algorithm will officially be “expanding [its] use of mobile-friendliness as a ranking signal.” In other words, expect a hit in ranking if your website isn’t responsive.

Optimizing Images For SEO – Images make an article more vivid and can actually contribute to improving the SEO for your article. In this post, I’d like to explain the steps that should be taken to fully optimize an image for SEO.

Tutorials

How to chart your hours with APIs, JavaScript, and SVG – In this article I will share the steps I took to build several visualizations from my time tracking data. Provided you know a little JavaScript, you will be able to follow along and visualize your own time.

Creative Gooey Effects – Today we are going to show how to use SVG Filters to apply a gooey-like effect to HTML elements. We’ll first cover some basics of the technique and then we’ll demonstrate several creative use cases for common website elements.

CSS3 Hover Link Effects – How to create awesome links using new features of CSS3: transition and transform. At the end of this tutorial you’ll have cool link hover effect that will surely rock your navigation.

15 Beautiful Text Effects Created with CSS – Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or typography. With CSS, you can use clipping and add animation to text to spice things up a little.

Interacting with SVG – When dealing with Scalable Vector Graphics (SVG), things can be pretty…unpredictable, to say the least. In this article, I’d like to explain a thing or two I’ve learned along the way, as well as highlight the limitless possibilities of using SVG files in your web applications.

CSS Contact Form – We have been receiving lots of requests about adding a contact form to our library. Here it is! A minimal and customizable snippet to throw a semantic form into your web projects on the fly.

How To Play Animated GIFs onClick [Tutorial] – The Animated GIF is a popular way to visualize a design concept or show off a short video clip. But if you have too many of them in the same page, it will deviate your user’s focus. For pages that showcase a lot of GIFs, this is bad news.

Freelance, Business and Workflow Related Stuff

Growing Your Design Business the Right Way – By laying out a plan for your business’s future now, you will move forward with a stability that is built to last, and make a name that consumers can depend on.

How I grow my business through networking (from a guy who hates “networking”) – The elevator pitch tries to make the sale in a split second. But sales don’t happen in an instant, unless they’re truly meant to. Sometimes they take weeks, even months. You can’t rush them.

How to win projects when your prices are higher than everyone else’s – The first thing you have to realize is that if people understand the tremendous amount of value you’ll give them, price becomes far less of an objection. It’s rare in business for care to be a factor.

7 Things to Think About Before Setting Your Freelance Rates – Setting rates is one of the hardest parts of being a freelancer. So don’t beat yourself up if you find it difficult at first. Often, freelancers have a hard time knowing what they’re actually worth.

Critical Mistakes To Avoid When Quoting A Web Design Project – In this article, we will look at seven critical mistakes that designers make when quoting web projects and show you how you can avoid them in your own business.

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

Your job is not to write code – Your job is to improve our product for our users. If you want to get technical about it, your job is to improve our product for our users in a way that improves the key metrics of the company.

Anatomy of a Hack – A step-by-step account of an overnight digital heist. Companies are continuously balancing the small risk of compromise against the broad benefits of convenience. A few people may lose control of their account, but millions of others are able to keep using the service without a hitch.

Who’s afraid of cheap logos? – Of course a $50 logos can’t be a good logo. Let irrelevant clients buy their cheap logos and free your time to do the interesting, money-making work that a ton of other clients are just dying for you to do.

Can an algorithm do your job? – It’s a wonderful theory—a great metaphor for urban design—but what we make is inherently limited by our own imaginations and biases and values. A program still bears its author’s fingerprint.

js;dr = JavaScript required; Didn’t Read – All your fancy front-end-JS-required frameworks are dead to history, a mere evolutionary blip in web app development practices. Perhaps they provided interesting ephemeral prototypes, nothing more.

Designing for Medical – Everything I’d worked on was consumer based, focused on solving relatively ubiquitous problems for large groups of people. I soon realized that while some things translate well, in other respects it’s a completely different ballgame.

To the young designer – What you miss out on is practicality, teamwork and compromise. Joining a team of designers and, far more importantly, working directly with engineers, requires these skills.

– § –

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.