.. Your Daily Design Dosis

Tweet Parade (no.21-2015)

23/05/2015by Jan Rajtoral | Comments Off on Tweet Parade (no.21-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.

Tweet Parade 21

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

SVG Basics: Circles and Ellipses – While most designers use a visual editor like Adobe Illustrator to create SVG drawings, knowing the basics of SVG syntax can allow you to create elements like lines, circles and rectangles easier and more precisely

How To Create SVG Animation Using CSS – CSS Animation could also be an alternative way of using JavaScript library like SnapSVG. In this post we will see what we can possibly deliver with CSS Animation in SVG.

10 Cool Things HTML Tags Can Do – At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went obsolete. This post will remind you some of the HTML tags that you didn’t know you could use.

Nesting Components – Using CSS components is somewhat straightforward. We add the markup and give it the component’s class name and all is good. Where it gets trickier is when we try to nest components. And when they need to be tweaked based on the context.

Building a Better Gulpfile – I try to apply conventions and standards. For Gulp, I created Noise, which is a set of common tasks that I need when using Gulp. Additionally, it has a very customizable Gulpfile.js file that can be used in various projects.

The End of Global CSS – Introducing local scope has had a significant ripple effect on how we approach our CSS. Naming conventions, patterns of re-use, and the potential extraction of styles into separate packages are all directly affected by this shift, and we’re only at the beginning of this new era of local CSS.

Revisiting :Visited – I see two causes behind today’s relative scarcity of :visited styling. I’m guessing most designers and developers don’t actually want to get rid of the :visited state, but have unwittingly lost it by overriding unattractive defaults.

33 Open Source Sass-Based CSS Code Snippets – This gallery includes 33 free code snippets written with Sass/SCSS code. Feel free to dig through these examples and reverse engineer the syntax. You might be surprised how much you can learn!

Introduction to JavaScript Functions – Functions are a core part of JavaScript; they’re used everywhere. Thankfully, basic functions are also pretty straightforward. Functions are a core part of JavaScript; they’re used everywhere.

What you should know about collapsing margins – Collapsing margins happen when two vertical margins come in contact with one another. If one margin is greater than the other, then that margin overrides the other, leaving one margin.

In CSS, the Only Wrong Answers are Definitive Ones – The very nature of CSS leaves many problems without an exact solution, and the right one for you won’t always work for others. If you’ve written CSS long enough, you run into these sorts of situations all the time.

Getting Dicey With Flexbox – What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake.

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

Choosing performance – If a website is slow it’s because performance was not prioritized. It’s because when push came to shove, time and resources were spent on other features of a site and not on making sure that site loads quickly.

Is Mobile Friendly “Friendly” Enough? – The performance metrics were satisfactory for a cable connection speed, but on mobile connections it was considerably slower. It didn’t take long to realize that while the site was mobile friendly in the sense of design, it wasn’t mobile friendly in the sense of data/network usage.

Why ‘mobile first’ may already be outdated – So if you’re designing and building software to sell to employees or companies, and that includes everything from enterprise software to calendar and to-do apps, you better be thinking about big screens as well as small ones. It’s not just about mobile-first.

On mobile, slow speeds kill – Sometimes even a perceived faster performance can help boost usage and engagement. So it’s no surprise that Facebook is using speed to lure publishing companies to collaborate.

Why web design is losing its soul – RWD is the future, no doubt. I’m excited to see what we build as we continue to learn and master responsive development. Even more so, I’m excited to see some of you bring some soul to your work, and bring some magic back to the web.

Accessibility, Part 3: ARIA – If a user is using assistive technologies, one way of making that possible is to make it easier for those technologies to parse and understand your site and its content. In this article we’ll be focusing on one particular way of doing this: ARIA.

SCALABLE DESIGN vs RESPONSIVE DESIGN – SVG 2.0 has been a working draft since April 2015 (this year) and is not currently supported in any browsers. However, the roadmap seems to suggest that we shall soon encounter partial browser support hopefully this year.

The easiest way to find and fix usability problems – If you think your site has usability problems, you’re probably right about that. Every website has them and it’s a constant battle to find and fix these issues. The easiest way to do it is by watching people use your site in job-based usability tests.

The Cost of Performance – There’s no better way to illustrate the cost of bad performance than the old story about every extra tenth of a second of load time costing Amazon millions. But good performance has a cost too: development cost.

How to successfully combine typefaces – How you choose to combine typefaces doesn’t really matter, what counts is the end result. However, it’s when you take risks, and look for unexpected pairings, that you’ll discover the most satisfying results.

New Web trends: immersive interaction design – Here we’ve collected some of the modern IxD techniques that users are flocking to. Some are genuinely new, while others are just new takes on old ideas. Either way, they’ll help you stay ahead of the curve …

An Introduction to Static Site Generators – A static site is not some magical solution that will solve all the problems — they’re perfect for some cases, but terrible for others. It’s vital to understand how they work and what they can do in order to assess

Iconifying Content – This tutorial will walk you through the concept of iconification — taking content on a page and applying CSS to transform it into a simplified, icon-sized preview of itself.

Browser testing – In my mind, that word implies that a user of a particular browser should be able to accomplish the primary tasks on the website, whether that’s reading an article, booking a ticket, or buying a product.

8 Rules for Creating Effective Typography – Today we’re going to discuss something that is both a hot trend and timeless art: typography. The basic rules outlined below will help you become more aware of how you structure and use typography in your designs.

WordPress

Website security is not a DIY Project – There are people who run their websites without paying attention to security at all. And there are people who run their websites thinking that a simple plugin, a single solution, will do everything they need for security.

Are You Using Pre-Made Layouts? – Fast page loading, coupled with ease of customization, are significant website development time savers. Not to be overlooked however, is the importance of having a pre-made, easily customizable, layout at your fingertips.

Creating Custom User Roles in WordPress – Through this post, I would like to provide a brief introduction on user roles, and will explain the process of how you can create custom roles based on your needs. Also, you’ll come to know why you need to create custom roles.

In Defence Of WordPress – The internet is verbally attacking WordPress again. I read a lot of hate towards WordPress for its latest security vulnerabilities that have become public. What I don’t see is praise in how those updates are handled and distributed to its millions of users.

Search Engine Optimalization, Conversions, Analytics, etc.

Top 7 SEO trends you need to follow to succeed – In the SEO industry, most things aren’t evergreen, and most things end, or are changed to some degree. Keeping up with the current news and trends has become a part of our everyday lives.

The 7 Most Common SEO Myths Debunked – SEO can provide a huge benefit to entrepreneurs – even if the results aren’t immediate. For those that are still hesitant and come up come up with countless reasons to not try it, I am going to prove they aren’t true. Here are the top seven objections debunked.

Everything you need to know to get started – With Analytics, you can easily track the overall success of your website and digital marketing campaigns. With a little bit of reading and a good bit of practice with it, you can understand Analytics in no time!

Tutorials

CSS Mega Dropdown – One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content. We’ve been working on a similar concept, a responsive mega dropdown component with sub-categories.

20 Useful CSS Snippets for Responsive Menus – The following responsive code snippets are perfect for any type of layout. You’ll find vertical and horizontal navs with dropdowns and slideouts and all kinds of animation effects.

Animated Page Transition in Ajax – We’ve been playing around the idea of replacing the refresh of a web page with an animation, that takes place while the new page content is loaded using Ajax. We used the pushState method to manipulate the browser history.

Freelance, Business and Workflow Related Stuff

Common Freelance Mistakes Web Designers Make – In this article, I’d like to share the most common freelance mistakes web designers make (including myself), so you might avoid them and save yourself time, money and stress.

13 crazy freelancing myths debunked – A lot of designers have wild misconceptions about freelancing and what it’s actually like. Despite what many people think, it’s not all fun and games and working in your PJs.

The True Cost of Progressive Enhancement – That often makes it difficult for us to put hard numbers against the cost of not doing progressive enhancement and the financial savings of doing things the way we almost always do.

The psychology of simple – Find a way to use simple to your advantage and make your users or audience instantly comfortable. Think about what their expectations are and how you can leverage their mental shortcuts to create something that is simple, beautiful, and same same, but different.

The Sliding Scale of Giving a Fuck – Having an internal barometer for what’s important and what’s less critical is incredibly useful for helping others trust your responses to ideas and proposals. Not only that, but I’ve found myself now reading others’ internal barometers.

Meta-Moments: Thoughtfulness by Design – Ever had a moment on the internet when you’ve been forced to stop and think about what you’re doing? I call such experiences meta-moments: tiny moments of reflection that prompt us to think consciously about what we’re experiencing.

Instant Web – That’s my biggest takeaway from Instant Articles: we (designers and our clients) have to start tasting our work. Not just in our proverbial kitchen, but where our users actually eat the stuff.

The 10 commandments of good form design on the web – There is a trend in web design to show form labels only when a field is focussed. This can be cool on a simple form like a username/password form, but for anything longer it is probably a bad idea.

– § –

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

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.