.. Your Daily Design Dosis

Tweet Parade (no. 45 Nov 2014)

| 2 Comments

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

(Auto) Prefix All The Things – Early on, our focus went into building libraries of mixins designed to handle prefixes. Instead we could have been focusing the incredible power Sass gives us to address tougher problems. What a shame.

Sass-based Media Queries With Breakpoint – Today we’re going to take an in-depth look at managing responsive breakpoints with Sass using the Breakpoint plugin. Breakpoint is a Compass extension so you’ll need to have Compass running before you can use it.

Building a Social Profile Widget: Get Your Follower Count – There are a lot of free and premium social profile widget plugins available for WordPress that one can use in linking to his/her personal or website social network’s profiles. I will show how to get the count of Facebook page Likes, Twitter and Google+ Followers, and how to build a social profile WordPress widget.

Styling And Animating SVGs With CSS – How to export and optimize SVGs, techniques for embedding them and how each one affects the styles and animations applied, and then we’ll actually style and animate with CSS.

Ditching jQuery – I wrote an article documenting my move away from jQuery in favor of modern, native JavaScript (aka vanilla JS). This article details how I write scripts today, and includes a growing collection of native JavaScript equivalents for common jQuery tasks.

How to use & to simplify your Sass – The ampersand (&) is a wonderful little character. It’s an ancient symbol, a ligature of the Latin “Et,” that connects words, phrases, and thoughts. Today, the use of & has become more varied, but & still maintains its original meaning of and, as well as, or this too.

How SVG Fragment Identifiers Work<use> means inline SVG. It doesn’t help you when you want to use a part of a larger SVG in SVG-as-<img> or SVG-as-background-image. That’s where fragment identifiers come in.

CSS Grid Polyfill Level 1 – I’ve been working on a piece of javascript you can add to any modern browser in order to add support for CSS Grids. Today, I’m releasing a first version to you, as part of larger css-polyfilling plans.

Animating With Inline SVG – While using inline SVGs might not be too common, it gives you the flexibility to animate virtually all aspects of an SVG with CSS. Let’s take a look at how to use animation to complement your designs.

Get up and Running with Google Web Starter Kit – Web Starter Kit is a new Google initiative; part of their mission to streamline web development workflow, whilst at the same time advocating best practices which they suggest in Google’s Web Fundamentals.

SVG Animations – There are many ways to animate and manipulate SVGs; in this post, we’ll go over how to animate embedded SVGs with Sass and Bourbon. Animating SVGs with CSS gives us great browser support and uses properties already familiar to those already using CSS animations.

Useful Shortcuts for a Faster Workflow in Sublime Text 3 – Sublime Text 3 has a lot of features and shortcuts for the modern coder to play with. Let’s take a look at the most important which I think will boost your workflow to a new level.

Switching from Ruby Sass to LibSass – I’m going to share all the “gotchas” I discovered when I tried compiling my mixin library with LibSass. While LibSass 3.0 is close to Ruby Sass 3.4.6, there are several things that don’t work identically.

Styling Cross-Browser Compatible Range Inputs with CSS – Styling for range inputs has improved dramatically since the release of IE10. It is now possible to generate cross-browser compatible range inputs (sliders) using only CSS. In this tutorial, we will take a basic range input

How we do CSS at Ghost – The current state of CSS at Ghost is one of flux. We have rewritten Ghost’s CSS a couple times to make it leaner and easier to learn. This post is a primer on how we do CSS at Ghost, and how parts will be done going forward.

Layout Math with CSS: Understanding calc – Designers and developers need to understand the role of each CSS measurement system, but they also require a method of binding and adding these units together in stylesheets. Into this role steps the powerful calc.

How to Enable CSS Transform in IE6-8 – For modern browsers like Firefox, Opera and Webkit based browser support CSS Transform with their vendor-specific prefixes, but you will not find it on Internet Explorer. So herein, I will use javascript library called cssSandpaper that allows cross browser CSS Transforms, even in old IE.

An easier way of using polyfills – Polyfills are a fantastic way to enable the use of modern code even while supporting legacy browsers, but currently using polyfills is too hard, so at the FT we’ve built a new service to make it easier.

Only You: Using only-child in CSS – One step above the :empty selector, :only-child selects elements that are entirely alone within their containers. You might wonder where this could possibly be employed in your CSS, but use-cases are actually surprisingly common.

A Quick Overview of CSS calc() – The CSS calc() property expression allows us to dynamically calculate the result between the subtraction of two CSS length values right in our stylesheet without using JavaScript, and even if length values don’t share the same unit.

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

Can Responsive Website Design Change the Fortunes of your Business? – Today, more than 17% of all web traffic comes from mobile devices. There is every indication that the number of people using mobile devices for internet access will keep growing exponentially.

Just what is it that you want to do? – Progressive enhancement is not about offering all functionality; progressive enhancement is about making sure that your core functionality is available to everyone. Everything after that is, well, an enhancement

Responsive Images in Practice – Together, these features let us mark up adaptable, flexible, responsive images. They let us send each of our users a source tailored to his or her device, enabling huge performance gains. Armed with a superb polyfill and an eye toward the future, developers should start using this markup now!

Responsive Navigation Solutions and Resources – In this post I’m going to take a quick look at some of those solutions and also share some useful resources to help get you on your way.

Why Responsive Images Matter – Responsive web design is still pretty new, in the grand scheme of things. We’re all still getting the hang of it, myself included. There are plenty more things for us to be wrong about, I’m sure, but I’m excited to find them with you all.

Mobile First Means Content First with Responsive Web Design – Even though I’m still wrapping my head around all the nuances of “mobile first = content first,” I believe the phrase aptly reflects an important new reality for businesses and marketers that can be understood as a two-part equation

10 ways to improve mobile UX – In this post, I’d like to share 10 must-do things regarding User Experience (UX) your mobile website. Let me make one differentiation to start with. Although all things mentioned in this post also apply to tablets, I have had my iPhone in mind when writing this post.

Understanding Media Queries in HTML Email – Email designers have long sought to build campaigns for every device. Today, we’ll dissect the ever-useful media query and see how it can benefit nearly any email campaign.

Responsive Philosophy – But adapting to the screen is only the first frontier of a new, responsive web. Today, users already expect a more meaningful experience on the web – experiences that not only respond to what device they’re using, but also their location, time of day, what they’ve already read, and events happening in real-time.

Webdesign in Common, Web Typography, Tools, etc.

Why and how I ditched icon fonts in favor of inline SVG – Webfonts are the new hotness, and icon fonts even more so. There’s plenty to choose from, icon nirvana reached? Not really. Icon fonts have a few nasty problems that icon font makers rarely make you aware of.

4 Great Tweaks to Drive User Engagement on Your Site – The focus is now on real engagement and measurable results from our websites’ traffic. Here’s a roundup of the most impactful ways in which you can grow engagement and see conversions on your site.

Design essentials – Whether you float to the left or float to the right, you’ll find these libraries and resources for design, HTML, CSS, and fonts useful.

Designers Code Differently – There are tons of new courses, tutorials and tools shared every week. Many may complain that they have too much to learn. But if the tools are simpler, wouldn’t it be just as easy as learning how to use the chopsticks?

A Deep Look at Data & Content Design Patterns – As users are able to interact with and edit more more parts of their applications, every piece of information and content must be designed with that in mind. In this article, we dive deep into 18 different UI patterns for data and content management.

Don’t Make These Landing Page Mistakes If You Want Conversions – Whatever the design and content, you must be sure to avoid landing page mistakes which will turn visitors away and lose conversions. A landing page has to grab a visitor’s attention within the first five seconds, so it has to be kept as simple as possible.

Your Website is an Ugly Baby, You Just Don’t Know it Yet – Below are a few questions you should be asking yourself as you design websites for businesses. All examples were analyzed with a Heatmap —a feature that makes it very easy for designers to understand how users are interpreting your site.

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

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

User Experience is Brand Experience – The phrase, “we’re concerned about our brand,” is often misused. Brand experiences are somewhat difficult notions to wrap one’s head around. As such, some mistake their visuals for their “brand.”

The Designer’s Guide to Visual Punctuation – Punctuation is more than just periods and exclamation points. In terms of design, punctuation can be anything that causes a reader or user to stop or pause. It can happen while reading text or as the eye moves from one element to another.

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

Should You Repost Your Blog Content on Other Websites? A Data-Driven Answer – You share it on your social media profiles, tell a few friends to promote it and then repost the exact same blog post on other sites like Medium and LinkedIn. The question is: should you be doing this?

Amazing Writing Tips of Killer Copies for Your Portfolio Site – All these steps will help you achieve best results in your copy. You don’t need to pressure yourself in creating a killer copy now, keep these steps in mind and you are ready to go. I hope you find these steps useful for your copy.

How to Build a Powerful Network Using LinkedIn – In building your LinkedIn network, the more selective you are, the more valuable your network is. In this article I’ll explain how to build a smart LinkedIn network.

Blogging: WordPress or Jekyll – So you want to create your own blog, or port your blog over, but you may not know which platform is the right fit for your needs. Of course there is a world outside of WordPress or Jekyll, but for sake of simplicity we’ll only dig down into these two.

Blogging Mistakes, Traffic and Content Ideas – Here’s another list of useful and interesting links I found while browsing the web over the past couple of weeks. If you are looking to boost your traffic or to learn more about promotion and SEO, you’ll like the links below.

When Is a Blog the Right Form of Content Marketing? – While I won’t deny the power of a good blog on the right site to do all of those good things and more, you should always question anything that’s touted as the right answer for everyone (and everything). So should you blog?

The Future of Email Marketing – I’ve gathered some examples that point to some big changes amongst email providers and email marketing tools, and no doubt, they will soon influence the design of the hundreds of email templates available on ThemeForest.

WordPress

Creating Maintainable WordPress Meta Boxes: Save and Retrieve – In this article, we’re going to continue the process by saving the information to the database, retrieving the information, and displaying it on the front-end.

3 Common WordPress FTP Upload Errors and How to Fix Them – There are a few common errors which occur a lot when trying to upload a WordPress site via FTP to your server. These errors go beyond entering your host, username, password, and port number incorrectly, but cause similar errors.

Adding Custom Widgets to the WordPress Admin Dashboard – Sure, there are plugins that add modules there but there are countless metrics and shortcuts you may want to add yourself. In this post I’ll show you how you can add your own – completely customized – dashboard widgets easily.

What the heck are WordPress Attachment URLs – and what to do about them? – In short: every time you insert some media (an image for example) into a post, WordPress creates an entirely new webpage/post containing nothing more than that single piece of media.

50 Filters of WordPress: An Introduction to Filters – There are—literally—hundreds of WordPress filters in the core and these 50 examples will be only a part of them (about 10%), so there might be an addendum if you like the series and suggest new examples about new filters.

What Most Web Designers Have Wrong About WordPress Theme Hierarchy – I want to start by focusing on the key mistake that most would-be WordPress theme designers make when it comes to working with the WordPress theme template hierarchy, then go on to give you a broad overview of how WordPress themes should come together.

The best free WordPress plugins for November 2014 – Now that Halloween season is ending, it’s time to think about what really matters. I’m talking about WordPress plugins; though family, friends and two-to-three months of holiday cheer ain’t bad either.

Improving WordPress Shortcode Usability – In this tutorial we are going to talk about WordPress shortcodes and what I think is the missing piece with shortcodes in WordPress. They allow you to give the author of the website full control of the content on the site and where it is positioned.

Learning More About WordPress Excerpts – We know that an excerpt provides a nice way to summarize your blog post, news release or whatever else you’re posting to your website. What you may not realize is that, with a little tweaking, the excerpt can become a pretty powerful tool.

Use WordPress’ built-in dashicons for custom post types – In WordPress 3.8, while revising the entire admin interface, WordPress introduced “Dashicons“, a new font built especially for WordPress that ships with core. It allows developers and site owners to choose from a range of icons and use them in their plugins and sites.

Creating an MVP With WordPress – WordPress has been evolving from the times that it was just a blogging platform – today with thousands of plugins and built-in functions, it is a powerful CMS that is capable of handling hundreds of thousands to millions of users and transactions.

Understanding & Working With Custom Post Types in WordPress – In this tutorial, I’m going to explore Custom Post Types in WordPress. Firstly, I’ll make you familiar with custom post types and custom taxonomies, and then take you through creating a custom product post type.

Use WordPress’ built-in dashicons for custom post types – In WordPress 3.8, while revising the entire admin interface, WordPress introduced “Dashicons“, a new font built especially for WordPress that ships with core. It allows developers and site owners to choose from a range of icons and use them in their plugins and sites.

Creating A Customizable Post List Template in WordPress With Advanced Custom Fields – In this article we’ll use ACF to create a page template, which allows users to list posts based on category, status or any other criteria.

Choosing a WordPress Theme Framework – the Ultimate Guide – WordPress Frameworks have become big business. In this article we’ll look at theme frameworks and what they are and compare 10 of the most popular ones available.

Search Engine Optimalization, Conversions, Analytics, etc.

Google Analytics Dashboards – Today I’ll be explaining a feature that I find very useful: Google Analytics dashboards. I’ll explain what they are, how to create them and how you could use them. And I’ll top it off with a little surprise at the end ..

How to Perform the Ultimate Local SEO Audit – Every business that competes in a local market and who competes for the display of localized results in SERPs will likely find the need to conduct a local SEO audit at some point. The best way to beat the competition is to know where you stand and what you need to fix.

International SEO: A beginner’s skills guide – It’s possible to not only make you site more accessible to your global audience, but also with a few processes and techniques, grow that audience substantially.

Tutorials

Crafting Off-Canvas Navigation For Responsive Sites – After you’ve squeezed and merged every element on your page in an ever-decreasing viewport, there’s just two places left to go: outside, or underneath.

Simple Morphing Search – A simple effect idea for a search input that morphs into a fullscreen overlay. The idea is to enlarge the search input and show some relevant content or search results.

Build a RESTful API Using Node and Express 4 – Today we’ll be looking at creating a RESTful API using Node, Express 4 and its Router, and Mongoose to interact with a MongoDB instance. We will also be testing our API using Postman in Chrome.

Mega-Site Navigation in CSS and jQuery – A responsive and easy to customize navigation for mega-sites, enriched by subtle CSS animations and support for devices with javascript disabled.

How to Create Off-Canvas Sliding Navigation Menu – This article will show you how to make a cool sliding navigation with an off-page canvas effect. We will use CSS transition and animation as well as jQuery for adding/removing classes to trigger the animations.

Triggering CSS Animations on Scroll – In this quick tutorial I’ll show you how to trigger CSS animations on selected elements as you scroll down a page, all without having to use a Javascript/jQuery plugin.

Freelance, Business and Workflow Related Stuff

Designing for Trust: Building Confidence in Your Website – Improving the trustworthiness of a website can help improve its conversion rate, whether we’re talking about buying a product, downloading an ebook or subscribing to a newsletter. Security, privacy, aesthetics and other factors all play a big role.

How To Make More Money As A Freelancer – I’m talking about the clients who passed on hiring you and went with a competitor, weren’t interested or you couldn’t close the deal with. These are all missed opportunities. I’ll cover ways you can effectively optimize your business to close more projects and make more money.

How to build a stellar portfolio to land your very first freelance gig – How do you present a professional portfolio with only personal and student work (and if you’re lucky, one or two pieces from your current job)? How do you build a beautiful portfolio?

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

Where To Find Great Designers – Today, with designers employed across the working world, from tech startups to banks, the smartest employers are casting a wide net. Design schools aren’t a bad place to look. But they’re just a start. Here, 10 tips for finding your next great designer.

Good Design is About Process, not Product – A designer’s process determines the difference between mediocre and great work. Natural talent and training aren’t substitutes for good design habits. A bad process will leave you with tired, unsurprising clichés.

Stop Breaking the Web – We are crushing the web. Dedicated client-side rendering sucks. Polyfills are used for all the wrong reasons. Those hideous-looking hash routers are bad and we should feel bad. We have been telling each other for years that progressive enhancement is great, and yet we’re doing very little about it!

Make Mistakes—The Importance Of Failure – Don’t be afraid to fail. Don’t be afraid to make mistakes. It’s ok to fail and err. It’s how we learn. We try. We make mistakes. We try again with new understanding. It can be hard to leave your comfort zone, hard enough that many of us try the same things in the same way we tried before.

– § –

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.

2 comments

on this article: “Tweet Parade (no. 45 Nov 2014)”
  1. Thanks for another great tweet parade Jan.

    Essentially I can ditch Twitter and just follow your blog to stay up to date!

    Keep up the great work.

    Cheers
    Petr

    • Ahoj Petře,

      Yeah man, and you can ditch your Google Reader as well, haha! Glad you like the Tweet Parades buddy .. and yeah, will keep posting these because it’s a great way (for me) to stay up to date!

      Thanks for your time to comment here man, speak you later! Ciao vole ;-P