.. Your Daily Design Dosis

Tweet Parade (no.06 FEB 2014)

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

Simple CSS-Only Row and Column Highlighting – You don’t really know how big the table is from CSS, so just make the pseudo elements super tall with a negative top value of half of that.

Best Resources for CSS3 Transition Animations – This post includes a handful of brilliant CSS3 animation libraries using transition effects. Many of them are based solely on CSS3 while others utilize a jQuery fallback.

Progressive Enhancement and Data Visualizations – This approach is a perfect example of Progressive Enhancement – for browser compatibility, accessibility and SEO you have a simple table, for modern browsers a beautiful graphic.

SVG Basics—Creating Paths With Curve Commands – Today I want to continue the path discussion and talk about the different curve commands at your disposal. The curve commands take a bit more explanation than the line commands so lets get right to it.

4 tips for a smarter CSS workflow – Whether you’ve been coding for years or just getting started, the landscape for CSS development has changed dramatically in the last few years too. Now, we have plenty of tools at our disposal that can help us to build lean, performant CSS.

image-rendering: pixelated – The CSS property image-rendering and the value pixelated are interesting because they turn off the browser’s standard smooth scaling (normally bi-linear interpolation) and replaces it with another scaling algorithm (nearest neighbor in most cases) when resizing the images.

Responsible Social Share Links – Social share scripts are convenient and easy to copy & paste but rely on JavaScript and add additional overhead to your site, which means more HTTP requests and slower load times. Instead, use share links that don’t require you to load scripts for each social site.

How to create an animated and stateful toggle using only CSS (no Javascript!) – The component is a simple binary toggle, but with a caveat: it was constructed using only CSS. I had some requests to show how it was done, so I’ll detail how to create your own CSS-only toggle here.

Create a 2 Column Layout with Flexbox – My next task was creating a responsive two-column layout with columns of equal width and fixed-pixel margin between them, as well as any amount of padding. It was appallingly easy…and that’s why I love flexbox!

A “simple” D3.js area chart – D3.js is mindbending, and I find the examples on the D3.js wiki to be too little explanation with too much going on. In this example, I will show you how to make the simplest area chart I could devise.

Vector Graphics in Sass – This may be confusing, because CSS and thus Sass is already part of the realm of graphics. Instead of styling content, I wanted to (ab)use Sass to render an image, pixel by pixel. The output can be drawn as a box-shadow value on a 1×1 pixel element.

Automate Your Tasks Easily with Gulp.js – Gulp is a streaming build system, by using node’s streams file manipulation is all done in memory, and a file isn’t written until you tell it to do so.

6 CSS Tricks to Align Content Vertically – Let’s talk about vertical alignment in CSS, or to be more precise how it is not doable. CSS has not yet provided an official way to center content vertically within its container.

Experiment: Using Flexbox Today – In this experiment, I’m attempting to show the value of Flexbox in today’s layouts, outline a strategy for adding it and give a few examples of how Flexbox can give current layouts extra powers that we either couldn’t achieve, or were difficult to achieve before.

Animating pseudo-elements – Pseudo-elements are like getting extra DOM elements for free. They allow us to add extra content, decoration and more to our pages without adding extra HTML, and they can be animated.

A successful Git branching model – In this post I present the development model that I’ve introduced for all of my projects (both at work and private) about a year ago. I won’t talk about any of the projects’ details, merely about the branching strategy and release management.

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

Delivering The Best User Experience With Your Navigation – Website navigation usability relies on having a well designed menu that makes it absolutely clear how to access each part of the website content.

Redefining Lazy Loading With Lazy Load XT – Lazy loading is not limited to images. It can be used on pages with complex JavaScript, iframes and third-party widgets, delaying the loading of these resources until the user actually needs them.

Website Usability Testing: Why and How To Start? – Usability is a key aspect in a design which makes it easy to use, provide information in a logical sequence, position design elements on their desired locations and there should be a complete absence of ambiguity.

Infinite and Endless Scrolling: Discussing Pros & Cons – Infinite scrolling or endless scrolling promises better user experience. However, advantages are often accompanied by disadvantages. Once you have understood the strengths & weaknesses of endless scrolling, you can use it to enhance your site’s interface.

How to avoid ux design trends and why you should – My argument isn’t that we shouldn’t let ourselves be inspired by very good design such as Medium.com, Spotify or Airbnb. That would be stupid and ridiculous.

When to Override Native UI Components – In a few rare instances, we find that it is acceptable to override the standard UI components provided natively by browsers and instead implement custom UI components.

Webdesign in Common, Web Typography, Tools, etc.

The Death of Web Design – There is no longer an obvious value in custom-built design – we can find cheaper, faster and “safer” means elsewhere. Using a tried and tested design is safer in the sense that we know it works.

How to host a static site with Github Pages – This guide is short and sweet and assumes you already have your static site hosted on an existing Github repo and are comfortable using command line.

Examples of Animation in Web Design – Animating elements of an interface serves both a functional and aesthetic purpose: when applied thoughtfully, it can increase a user’s delight and make an interface easier to use by providing context.

The Fold Manifesto: Why the Page Fold Still Matters – What appears at the top of the page vs. what’s hidden will always influence the user experience—regardless of screen size. The average difference in how users treat info above vs. below the fold is 84%.

25 Must-Have Pages for Your E-commerce Website – What pages make up an e-commerce website? The most essential ones that come to mind are home page, product page, shopping cart, and checkout. What else?

Why You Should Use Git – Ever since version control systems such as Git have become widely-known and well-used, modern development processes have radically changed. Here are some reasons why Git has the power to improve your development workflow.

Style Guide Generator Roundup – There are a lot of different kinds of generators out there. Many of them are based on workflows or a particular tool, and some of them have been ported over to several different workflows, so I’m breaking these down by workflow.

7 simple rules for mobile typography – Mobile devices have inherent challenges for any typographer: space is limited, and ambient light is often poor. But by making simple adjustments to the techniques we already use for the Web, we can improve readability on mobile devices.

A Beginners Guide to Markdown – If you blog, write or create any form of text-related content for the web, you must already be aware of Markdown. It is a very popular plain text formatting syntax that can be used to create formatted text easily and convert it to valid HTML.

An exploration in Material Design by feedly – Google recently launched Android Lollipop which introduces some major changes and a new visual language called Material Design. With this new OS, Android is bringing a comprehensive guide for visual, motion, and interaction design across platforms and devices.

Wireframing & Prototyping: The Past, Present, and Future – Knowing the origins of wireframing and prototyping will help you put everything into a historical context, allowing you to comprehend the practice and predict how it will evolve in the future.

When can a website be over 1mb? – The thing is, generalising data can be misleading. Not all websites are created on equal footing. In this particular case, users will not “go elsewhere”.

10 Tips for Prototyping Your Designs – Even though there’s a wide variety of prototyping techniques, they all share plenty of common ground In this article, I’ve distilled years of prototyping tips and best practices from the best specialists in the field.

An Introduction to Front-End Developer Tools – The tech stack for front-end web development has expanded vastly in recent years. For veterans of the industry, the progression has been gradual, however for folks just starting out, these changes may not be the easiest to digest.

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

Margins and Spacing in Design and Print – Spacing and Margins are one of the key secrets experienced designers use to create clean well balanced design. The fact is the principles are quite simple where anyone can follow and drastically improve their visual content.

The Basics of Drawing Type & Creating Your Own Handwritten Font – Ever wanted to give your digital layouts and designs a truly personal touch? In this tutorial we’ll look at how you can create a font from your own handwriting, for use on your computer.

10 Creative Photo Manipulation Adobe Photoshop Tutorials – The best of creative Adobe Photoshop Tutorials, mostly about photo manipulations, mixed media and retro poster style. Check out new tricks, techniques that you can learn and apply it to your own designs.

10 typographic mistakes everyone makes (including us…) – Now that you’re aware of some of these established conventions, you can help honour the rich and beautiful history of typography in the next chunk of text you set.

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

Increase Social Media Security to Protect Personal Info – Despite the extra precautions taken by these companies, their security were no match against the cyber criminals who passed through the cracks to steal personal information.

The Ideal Length for All Online Content – I dug around and found some answers for the ideal lengths of tweets and titles and everything in between. Many of these could have been answered with “it depends,” but where’s the fun in that?

WordPress

Using wp-config to Customize WordPress – In this article, we will take a look at the wp-config file in order to know what it is, what it contains, and what we can (and must not!) do with it.

Beginner’s Guide to Adding Your Own WordPress Hooks – Hooks are not just for use in WordPress, they are essentially a design pattern you can implement in your own work. I’ll show you how you can create your own hooks to make it easy for you or others to build upon your work.

Create Fully Functional Directory Sites with WP Directory – If I were to ask you to build a directory website using WordPress, what would your first thought be? Yes, you’re right. It will be about choosing the right directory builder plugin.

A simple snippet to force SSL for your whole site – So, if you want to force pages to load over HTTPS, you need to add a little snippet so that even if someone tries to access your site over HTTP, they will be redirected to the HTTPS version of the page they’re trying to reach.

How to Build A Website 10x Faster Using WordPress Tools – Today, I wanted to clear once and for all why using WordPress is the best choice for most freelancers. I will also cover how to make your workflow super productive by using theme framework.

WordPress Hooks: Actions, Filters, and Examples – Hooks in WordPress allow developers to easily tie their own code in with the WordPress core code base, themes, and plugins. In this article, we’ll discover what hooks are, go over the different types of hooks, and look at a few examples of hooks in action.

WordPress Translation Plugins Part 3 (Alternatives to WPML) – There are not a whole lot of alternatives available that serve the same purpose as WPML. The few that are, all come with their own quirks. Let’s look at three of them that are most popular – and all free.

Adding Multiple Post Thumbnails/Featured Images In WordPress – This tutorial will help you in understanding the steps involved with one of the finest methods for adding multiple post thumbnails/featured images in your WordPress blog/site.

Preventing WordPress Spam Using No Captcha reCaptcha – There are many different solutions to prevent bots from submitting web forms; one of the most popular solutions is reCaptcha. reCaptcha actually displays an image with some text in it and user has to enter the text to submit the form successfully.

Create a Full Width Page for WordPress in a Few Simple Steps – What if you find a theme that’s almost perfect but doesn’t have the kind of full width page template you need for your landing or about page – or maybe doesn’t have one at all?

WordPress robots.txt Example – The robots.txt file is a very powerful file if you’re working on a site’s SEO, but one that also has to be used with care. It allows you to deny search engines access to certain files and folders, but that’s very often not what you want to do.

How to use custom taxonomies in WordPress – In this article, I will cover custom taxonomies and how they are created. I will make three custom taxonomies to show how the code can be reused with ease and also adapted to the needs of each taxonomy.

Search Engine Optimalization, Conversions, Analytics, etc.

How to find new clients fast using Google Analytics – So whether you’re a complete newbie or you’ve been staring blankly at your stats for a while, here’s a simple 3-step process for using Google Analytics to find more clients for your business.

How to Roll-Up your Data in Google Analytics – How your account, properties and views are planned and organized in Google Analytics will affect all of your reporting moving forward, so it is a step that shouldn’t be rushed overlooked.

Control How Google Indexes Your Content with Meta Tags – The meta robot tag is a consensus meta tag among search engines like Google, Yahoo, and Bing. The use of the meta tag is to let web developers have accessibility control for web pages, against search engine crawlers.

How To Improve Your Ranking: 5 Quick SEO Tips – All you need to do is follow some quick tips and implement them as good as possible. Then your ranking will improve almost by itself. We will show you five simple tips to boost your website.

Tutorials

How to Build a YouTube Video Website Background – In this article, I’ll show you how you can build a cool video background site using YouTube. We will use jQuery.mb.YTPlayer.js to customize and control the look of the YouTube video background design.

Freebie: ScrollMagic Starter Templates – Today we’re giving away three ScrollMagic website templates for you to use and repurpose. Each of them are unique and built with Bootstrap 3 so you can quickly reuse them.

The Gooey Effect – SVG filters are quite powerful. It is a pretty extensive topic. Here we will only cover the basics necessary to understand how this effect works.

Bouncy Navigation in CSS and jQuery – A full-screen navigation, with floating menu items. We used CSS animations and a pinch of jQuery to animate navigation items, and let them bounce in and out the screen.

How to Create a Sticky Navigation – Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport.

Freelance, Business and Workflow Related Stuff

Three Things I Learned at Teehan+Lax – There are things I learned at T+L that I will take with me everywhere I go. I’d like to take a moment and look back at the three most important things that made T+L special to me

10 Ways Designers Solve Problems – Designers, by nature, are problem-solvers. Every project is a problem or challenge that involves helping other people understand something. Designers have to see through all the fog and clutter to create a solution.

How to compete with big agencies as a freelancer – You might not have the budget to go toe to toe with them in advertising, but that doesn’t mean you can’t crush them when it comes to service, customer experience, and quality.

Freelancing 101: 10 Ways to Make Clients Look Good – Making your clients look good will help you create lasting relationships and trust. It can also help you increase your earning potential. Here, we’ll look at 10 ways you can help out clients and possibly grow your freelance business.

What No One Tells You About Working From Home – I’m sure you can easily imagine the benefits of being able to work at home, but until you’re actually there, it can be difficult to think of the downsides. Here are some things to consider before you decide to work from home.

How to Get Paid More as a Freelancer: Negotiating Your Rate – If you want to exploit that sort of earning potential, and make sure you always come out on the higher end of salary negotiations, there are a few skills you must develop. These skills are a vital part of your freelance business

How to be found by clients – It’s the purpose of your site that truly demands either one or the other in your choices. It can be both. What many creatives forget about a portfolio, is that it needs to read like a story for some people who hire creatives.

5 Simple Mindset Changes That’ll Get You Paid More by Clients – As with anything that is worth it’s while, it takes time, but it’s a pretty simple path to becoming more valuable and needed. There are 5 mindset shifts that’ll get you paid more by clients.

How To Streamline Creative Dialogue – I noticed that we often discussed visual or technical issues without a clear understanding of the business goals — sometimes even without clear objectives at all! We approach this simply by asking the right questions and listening carefully.

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

Reframing Accessibility for the Web – We need to change the way we talk about accessibility. Most people are taught that “web accessibility means that people with disabilities can use the Web”—the official definition from the W3C. This is wrong. Web accessibility means that people can use the web.

“God is in the details.” – The details are the last 1% of a product. They’re hard to define, they’re impossible to scope, and they’re absolutely no substitute to thorough research, great design and clever engineering. They can, however, be the difference between an average experience and a great one.

What Will Save Us from the Dark Side of CSS Pre-Processors? – Though each camp might have a different approach to tools, the important commonality they share is a deep understanding of the CSS that comes out the other side. Neither set of tools is a crutch for ignorance. Know your craft.

Ol’ John Henry – So… Are WordPress Themes, SquareSpace, Macaw, Froont, and The Grid killing web design? My new answer is: Probably. Probably a bit. In order to win, you need to do more than the Machine; faster, better, and for cheaper.

Visual Design might be a thing – If the problem has a story that can be traced back, the environment is supportive, and answers are available, then I can certainly see instances where designers learn not to go hunting for the problem.

– § –

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.