.. Your Daily Design Dosis

Tweet Parade (no.45-2015)

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

Things To Avoid When Writing CSS (Part 2) – Despite the post title, this time I’m going to talk about all the lovely things you should want to embrace and nurture in CSS. Only kidding! It’s just me losing my shit again.

Interactive Color Photo Highlight Effect In SVG – The creative process was unique enough to deserve a two-part series: this article analyses the workflow and code for the effect, while a follow-up will detail the information popups for each skater.

Animating the `content` Property – Did you know that you can animate the content property of pseudo elements? According the list of animatable properties in the spec, you shouldn’t be able to, but in the latest version of desktop Chrome you can

When to Use rel=”nofollow” – Assigning the rel="nofollow" attribute to a link informs search engines that the link is commercial in nature, or that it’s a link you don’t endorse. Links that have the the rel="nofollow" attribute are often called nofollow links.

PostCSS Deep Dive: Shortcuts and Shorthand – There are so many little bits of code the average web designer types out thousands of times through the course of their career, and if you can gain just a little bit of time back on each one it adds up to a lot in the end.

Understanding border-image – The border-image property is a relatively new property, which allows us to specify images to be used as borders instead of the typical border styles (border-style, border-color).

Do We Actually Need Specificity In CSS? – To restate the question in a way that gets more at the heart of the issue: If we lived in a world where specificity was never added to the cascade, would things be better or worse?

Naming Colors – While color management is a broad topic that’s outside the scope of this article, here are some general tips, in no particular order, to make naming and organizing your digital palettes a little easier

CSS Image Effects #5: Lomography – Lomography (AKA Lomo) was based on and inspired by a cheap Russian toy camera, the Lomo LC-A. These photos are often high contrast with vignettes and soft focus.

The Image Replacement Museum – These demos will take you through a comprehensive history of image replacement on the web, stretching back to 2003. Each demo is presented with its source link, if available—some are lost to the ages now.

A Complete Guide to Flexbox – The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic

Flexbox For Interfaces All The Way: Tracks Case Study – The days of floats and margin trickery are finally behind us, as CSS furnishes developers with new and improved properties perfect for those delicate layouts.

PostCSS Deep Dive: Miscellaneous Goodies – Some of the very best PostCSS plugins don’t fit into the categories we’ve covered in our previous series entries. In this tutorial you’re going to learn about five of these “miscellaneous goodies”.

Please, don’t commit commented out code – The main problem is commented code adds confusion with no real benefit. Just rely on your version control system to keep track of the code that once was.

JavaScript Strings: Uppercase, Lowercase and Capitalization – JavaScript’s simplest text manipulations transform strings between uppercase and lowercase. Capitalization is trickier (and not yet an established method), but entirely achievable.

TweenMax tips and tricks – I’ve been using TweenMax for over a decade and as an online motion designer I find GSAP without doubt the most powerful animation library around. Here are some other GSAP tips and tricks that will boost your workflow.

Which Input When? – The input field is the bread and butter of forms. They’re used for anything that requires custom input from a user, not a selection of predefined options. Usernames, emails, addresses, passwords, websites, phone numbers.

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

The Beginner’s Guide to Accessible Mobile UI Design – Accessibility isn’t just a nice to have — for mobile app designers and developers, building your app to accessibility specs helps your mobile UI design reach a broader audience, while becoming more usable for everyone.

Designing More Efficient Forms – As a product designer, this is a major opportunity to help your users — while designing forms, think about the contexts in which users interact with them. Remember that well-designed forms aren’t just pretty. They’re also clear, accessible, and efficient.

Guide for Using Typography in Responsive Web Design – The most important element in any website is of course, its content. The most important part of any content is its text. Make it visible. That’s it. That’s what the whole article was about.

9 responsive typography tips from the experts – It stands to reason that responsive web design requires responsive typography to suit. But what does that actually mean, and how do you implement it? Font size, spacing and layout should work together to create an elegant, legible text setting in each viewport.

Bruce Lawson on Responsive Images – Bruce Lawson from Opera shows us how to send correctly-sized images to devices with HTML’s new responsive image capabilities. Bruce proposed the <picture> element in 2011, and this year it went live on Opera, Chrome and Firefox [VIDEO].

Why Performance Matters, Part 2: Perception Management – Performance is never about milliseconds, kilobytes or number of requests; it is not about mathematics. Performance is all about perception and psychology.

Guide for Using Typography in Responsive Web Design – A website that has everything else done in the perfect manner, but no attention paid to typography is like a beautiful car that doesn’t run. It won’t get you anywhere.

The Extra Effort for Great UX – Great user experiences are the result of putting in the extra effort. When usable just isn’t enough. Maslow states that when a person is fully self-actualized, they find contentment as their needs have been all fulfilled.

What Netflix’s rebrand teaches us about responsive design – What’s fascinating about Netflix’s rebrand is the way it embraces, and refines responsive design; this is responsive design beyond viewports, it’s responsive design for mobile, the web, print, social media, and of course TV.

Webdesign in Common, Web Typography, Tools, Email, etc.

50 Free Resources for Web Designers from October 2015 – The sharing is what makes our community truly great! Here are this months 50 best free resources for web designers from October 2015

Designing a landing page for color-blind people – Whenever you are designing your logo or your landing page, keep in mind that some people will see it differently than you do. As the logo will probably land on external spots, where you don’t control background, you should avoid green and red colors.

Will Flat Design Ever Die? – Flat design certainly deserves merit for its return to a cleaner content-focused framework. In this piece, we’re going to take an in-depth look at the flat design style and discuss what works, and what simply falls flat.

10 Unfortunate Design Trends We All Wished We Could Forget – Let’s take a moment to look at some of the design trends that need to be sent upstate to the farm where overdone bevels and excessive drop shadows go to die. Are they the best? The worst?

Desktop IDEs: Our Top Choices for Web Developers – In this article we’ll walk through the most popular IDEs. Each of these programs has different advantages for programmers, and our goal is to briefly describe the coding possibilities.

How to design the perfect contact page – Universally, website users want simplicity, so it’s not surprising that all of these featured contact pages ooze “easy”. However, insight, imagination and a unique approach are needed to create, strengthen or sustain brand interest when users hit the contact page.

The Nine States of Design – As we learn to craft systems rather than pages, we must invest effort into shaping these often missed states of design and create with a component lifecycle that can support everyone.

How to Use Data Visualizations to Win Over Your Audience – Look for opportunities to enhance the communication flow between these teams, and you’ll find you get much better data visualizations, which compel viewers to your desired course of action.

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

How to Create a Vintage Typographic Illustration Poster in Adobe Illustrator – We’ll walk through creating a typographic illustration using the “No Place Like Home” quote. Since The Wizard of Oz film is set in the early 1900s, we’ll be using a vintage style inspired by typography from that era.

Top 100 New Adobe Illustrator Tutorials – Adobe Illustrator has been the go to program for graphic designers for a while and although some alternatives have appeared, it is still the best option. You’ll see in this article a range of recent Adobe Illustrator tutorials as well as some old ones.

Why San Francisco – It’s common for typefaces to share similar anatomy, forms, and traits, redesigning slightly to make it work well in the intended application. It looks like this is what Apple did with San Francisco and that’s not a bad thing.

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

8 Ways to Generate Leads With Your Blog – Offering a suitable and relevant reward in return for people’s contact information is a great way to generate business leads. In this article you’ll discover eight ways to generate leads with your blog.

Why I am worried about Twitter and why you should be too – Twitter simply hasn’t managed to build an organisation capable of executing the strategies necessary to build and maintain a successful social media platform.

Sentence length: why 25 words is our limit – They don’t have time to deconstruct sentences and contemplate clauses, they just want you to get to the point. Doing this shows you respect your reader’s time, interest and attention.


How to Create a Custom Author List Widget in WordPress – For many websites good authors are the most important asset they have. Showcasing them properly can be an important concern and WordPress doesn’t really have anything powerful out-of-the-box.

8 Top WordPress Opt-In Solutions to Help Build Your Email List – In order to do that with a WordPress site, you need to find an outside solution to help you get those visitors to opt in to your list. Below we’ll go over 7 of the most popular and reputable opt-in plugins/service on the market today.

Convert your HTML Website to WordPress Theme With This Simple Tool – As simple as 1, 2, 3…. . It only takes three steps to convert your traditional HTML website to a WordPress site in 15 seconds or less. This handy tool not only saves you the time it takes to recode the site, but also saves you money!

How to Use the WordPress REST API – There is a lot of buzz around the upcoming REST API for WordPress, and rightly so! After the introduction of custom post types way back in version 2.9, this may be the biggest step toward making WordPress a true application framework.

Best Practices for Selling Ads on Your WordPress Site – Today, expect to learn about the pros and cons of selling ads on your website, what you need to consider before getting started, and the top solutions for integrating ad spaces and ad management into your WordPress site.

Unit Testing Ajax and API Requests in WordPress Plugins – I’ve taken the plunge and started writing tests. In this post I will introduce you to unit testing a WordPress plugin, using my recent experience as a guide.

6 Tips for a Smarter WordPress Blog – A blog’s ability to adapt to users based on their activity can make loyal followers out of passive visitors. To do that, you’ll need an intuitive knowledge of your audience’s behavior and a handful of smart plugins that will let you put your knowledge to action in your blog.

What’s Coming in WordPress 4.4 (Features and Screenshots) – We followed the development closely, and we are excited to report that it is expected to be released during the second week of December 2015.

Search Engine Optimalization, Conversions, Analytics, etc.

Four benefits of aligning SEO and UX when building your website – We know that Google increasingly considers user behavior signals. Factors like page load time, button size on a mobile screen and ad cluttering above the fold all speak to the weight of user experience signals in the organic search algorithm.


Multi-Level Sliding Accordion Only with CSS – Following the instructions and code examples above you created fully working multi-level accordion only with HTML and CSS! The best thing is that this accordion doesn’t depend on single line of JavaScript and will work in all modern browsers.

Rain & Water Effect Experiments – Today we’d like to share some WebGL experiments with you. The idea is to create a very realistic looking rain effect and put it in different scenarios. In this article, we’ll give an overview of the general tricks and techniques used to make this effect.

Flipping Login/Sign up Form Only with CSS – Are you bored with using the same old login and sign up forms? Would you rather enhance the ux of your project? What about creating single card containing both, login and also sign up form?

Freelance, Business and Workflow Related Stuff

How to Deal with Scope Creep in Web Design – When left unattended, scope creep in web design, as in any business, causes stress and costs time and money. The solution? Learn how to identify and attend to potential scope creep situations immediately.

How To Read a Client E-mail – Opening your inbox is the modern office worker’s equivalent of opening King Tut’s tomb. Our inbox contains both treasure and curse. I’m gonna teach you how toactually read a client email. Which they should have done in school.

Freelance Work Versus a Salary Job: The Pros and Cons – Which is better: freelancing or working in-house? The answer is not simple. They each have their pros and cons, and which one is right for you depends on your personality and how you want to work.

How to Tell Your Client They’re Wrong Without Getting Fired – You know that what you’ve done will work. And you know what they’re asking for will hurt the project. You’ve done this before. That’s why they hired you, right?

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

Not good enough – It’s easy to say how somebody isn’t living up to your expectations. I fail to live up to my own expectations of myself on a nearly daily basis. When it comes to web development, it’s easy to pick apart a site and complain about how it could’ve been done better.

From Pages to Patterns: An Exercise for Everyone – Resist the temptation to dive straight into code. There’s a lot to be gained from getting away from our screens and focusing first on thinking, language, and approach.

– § –

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.