.. Your Daily Design Dosis

Tweet Parade (no.51-2015)

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

This is the last Tweet Parade of this year! I wish you all a merry Xmas and a very happy, successful and healthy New Year! Hope to see you back in the 2nd week of 2015, .. have FUN!

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.

50 Javascript Tools & Resources from 2015 – The first thing you will probably notice is the considerable decrease in the number of jQuery plugins in this collection, when compared to last year. What we’re seeing instead is smaller, lighter and standalone JavaScript libraries being built without all of the jQuery bloat.

SMIL is dead! Long live SMIL! – Unfortunately, support for SMIL is waning in WebKit, and has never exist for Microsoft’s IE or Edge browsers. This article explores some of those SMIL-specific features and delves into the alternatives to achieve the same effects with a longer tail of support.

Website Layout Tools Compared: Flexbox Vs. Susy – Some feel that flexbox is powerful enough to handle all of their layout problems. However, they are unsure whether to learn it because of its confusing syntax. Others feel that Susy is much simpler and prefer its simplicity to flexbox.

Taking Let’s Encrypt for a Spin – Let’s Encrypt—a new certificate authority from the Internet Security Research Group (ISRG)—has been promising to help with this, pledging to be “free, automated and open”.

Grid, Flexbox, Box Alignment: Our New System for Layout – In this article, I’m going to take a look at the common features of our new layout systems, along with a couple of examples which serve to highlight the differences between them.

What I learned in one weekend with CSS Shapes – So go out there and try CSS Shapes on your own. I really liked it and I will definitely use it on my new projects. It’s similar to work with graphic tools such as Illustrator, Indesign and Sketch.

How and why to use labels in forms to make them more accessible – It seems the UserVoice page of Microsoft Edge has a checkbox that is inaccessible to screen reader users. So, here is a quick reminder of how to use labels in plain HTML (without any ARIA extras) and why that’s a good idea.

Battling BEM – 5 common problems and how to avoid them – I certainly don’t recommend picking living room centre-piece this way, but when you need a life jacket (as you do in a sea of CSS) I’d take function over form any day.

Flexbox Patterns – Flexbox CSS is awesome, but it introduces many new concepts that can make it difficult to use. I built this site to provide interactive, practical examples of how UI components can be built using flexbox CSS, so you can start using it in your own code right away.

4 JavaScript Design Patterns You Should Know – In this post, I want to discuss these common patterns to expose ways to improve your programming repertoire and dive deeper into the JavaScript internals.

Animating Clipped Elements In SVG – Clip paths open up a wide array of exciting possibilities. Understanding the simple mechanics and how everything moves relative to each other can help you create some powerful and captivating interactions for your users.

Click SVG Element to Focus (and Style) – But you DID say “clickable using CSS” specifically. That’s a little trickier. Usually we have :focus in CSS, but I don’t think there is any tried-and-true way to make an SVG element itself focusable.

Pseudo and pseudon’t – I like CSS pseudo-classes. They come in handy for adding little enhancements to interfaces based on interaction. Take the form-related pseudo-classes, for example: :valid, :invalid, :required, :in-range, and many more.

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

Designing with Contrast – Our efforts to simplify brought with them a trend of ultra-minimalism where aesthetics have taken priority over legibility, accessibility and discoverability. The trend shows no sign of losing popularity — and it is harming our experience of digital content.

The Effects of Parallax Scrolling on User Experience in Web Design – Parallax scrolling is becoming an increasingly popular strategy in web design. Researchers attribute this pleasurable user experience to the fulfillment of the following variables: usability, satisfaction, enjoyment, fun, and visual appeal.

The Effects of Parallax Scrolling on User Experience in Web Design – Researchers attribute this pleasurable user experience to the fulfillment of the following variables: usability, satisfaction, enjoyment, fun, and visual appeal.

Responsive Progressive Accessible Vanilla Search – I wanted a keyboard-friendly, accessible search box that uses no special elements. I also wanted to avoid unnecessary clicks to expand the search box and use it. Ideally it would work fine without CSS and/or JavaScript.

The web accessibility basics – I always thought that it is not so difficult to find resources about these basics, the recurrence of that question prompted me to finally write my own take on this topic. So here it is, my list of absolute web accessibility basics every web developer should know about.

The 3 Commandments of Great UX Design – These are the three essential, non-negotiable elements for a great UX design. They can be used as a checklist for every UX project you do and shouldn’t be too hard to memorize.

“Learn More” Links: You Can Do Better – The phrase ‘Learn More’ is increasingly used as a crutch for link labels. But the text has poor information scent and is bad for accessibility. With a little effort, transform this filler copy into descriptive labels that help users confidently predict what the next page will be.

5 UX best practices for a stunning website – When it comes to visual storytelling, photos are an obvious choice, but you shouldn’t overlook illustrations if they might better suit your story and brand. Mascots can even add another level of personalization and friendliness.

Responsive vs. Adaptive Design: What’s the Best Choice for Designers? – On the surface, it appears that adaptive requires more work as you have to design layouts for a minimum of six widths. However, responsive can be more complex as improper use of media queries can make for display and performance issues.

Button UX design – Note that not every button is a designated call-to-action. Sometimes you just need a button, like in your comment form. Nevertheless, that button should look like a button! In this post, I’ll discuss five types of buttons and give you my opinion as a full-time web surfer on these.

Responsive Equations – We wanted to explore what this notion can mean for fragments that happen to be math. Since that’s an incredibly complex area, there are various ways to approach this problem.

Being Responsive to the Small Things – With container queries, you’ll be able to consider the breakpoints of just the component you’re designing. To date, there are a handful of open source solutions to fill the gap until a browser implementation sees the light of day.

Performance Calendar » Immaculate Imagery with Lazy Pictures & BPG – Use responsive images and asynchronous loading to lower initial page weight by ~80% and improve the Speed Index.

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

The Languages And Frameworks You Should Learn In 2016 – You will find a short list of the new releases that we think are the most important below, together with suggestions for the things we believe would be a great investment of your time to learn in 2016.

Designing a landing page, a behind the scenes look on planning through to execution – Here is a useful guide where I will step you through my thinking and the process I used for designing a new landing page. It’s for my upcoming masterclass, which oddly enough is called ‘Process’.

8 responsive web design trends that defined 2015 – In the short timespan since, responsive web design has gone from an interesting new idea to the industry-wide accepted approach to multi-device design. Let’s take a look back at successful trends of the year with an eye towards the future.

Grid Systems for Screen Design – Grids are the invisible scaffolding that give a design coherence. Their work took for granted a few things, though: a fixed page size with precise control over type-size, line-height and margins.

4 things to consider before adopting a design trend – Trends are constantly changing. If you adopt trends too quickly, your brand can come across as inconsistent. If the trend is short-lived, your brand can go from lovable to lame in a matter of months.

Front-End Dev Resources, Tips, & Tricks You May Have Missed – Front end development is an ever-evolving profession with new processes and skills to absorb and implement as the web grows. These are the ones I found myself actually going back to check out.

4 Tips on Writing a Services Page that Sells – Your Services page can be just… well, a list of services. Or it can help you reassure buyers who are close to hiring you to do their website – becoming the tipping point that turns them from interested to committed and ready to spend.

Beyond the Style Guide – Don’t worry, this isn’t a misplaced cake recipe, but an evaluation of modular design and the role style guides can play in acknowledging these different concerns, be they presentational or programmatic.

Color vs. Contrast — Which makes you click? – This is not another “use red instead of blue” article. We have heard that one time too many. Applying colors to designs is a delicate process that needs to see in context the audience and the entire environment of the project (or website) you want to modify.

‘Touch Keyboard’ Implementations Have Improved Just 9% Since 2013 – We first benchmarked touch keyboard implementations across 48 leading mobile e-commerce sites back in 2013 and now again in 2015, and sadly, touch keyboard implementations have only improved by a measly 9%.

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

Stop building features, start building brands – We live in a very very (very) noisy social world where attention is so hard to get. If you don’t do the work , chances are high for your product to be invisible at the launch and for you to completely miss your potential.

How A Logo’s Color Shapes Consumers’ Opinion Of A Brand – The easiest way to show your company is green? Actually use the color green in your branding. A new study on the ethical implications of logo colors suggests that the blue might be “greener” than green when it comes to branding.

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

How to Connect With Influencers on Social Media – Building relationships with the right influencers can extend your reach and boost visibility with your target market. In this article you’ll discover how to find and connect with influencers on social media.

A Game Plan for the Top Social Networks – Do you want to drive more traffic to your blog? Looking for ways to use social media to promote it? Understanding how to best share your blog posts on many social networks will maximize your visibility and reach.

WordPress

10 Super Powers All Successful WordPress Developers Don’t Know They Have – WordPress developers come in all types. Some are dabblers, some are core committers, some are plugin dominators. But the very best possess the above ten super powers.

WordPress in 2016: How the REST API and Calypso Will Force Change – From the good (the REST API being merged into core), the bad (the REST API being merged into core, if you’re scared of JavaScript) to the ugly (#wpdrama, anyone?).

Can A Large Number Of Plugins Affect Your WordPress Site’s Performance? – In general, try not to weight your site too much and keep it as simple as you can. If you have the resources to speed it up, you can use around 40 plugins without making it too slow.

13 Killer JavaScript Resources to Get Up to Speed for WordPress – There’s been a lot of talk about JavaScript in the past couple of weeks and how it would transform WordPress since Automattic debuted its desktop app Calypso for WordPress.com and the REST API was merged into WordPress core.

Declaring Performance Bankruptcy with WordPress (and how to fix it) – A month after the launch of the new site — I declared performance bankruptcy. It was time to figure out our problems and fix them. Defining a performance budget early allows you to tailor your design and assets to meet your needs.

16 WordPress experts share their insight about the new WordPress Calypso – I do want to provide you with some general information about Calypso, in case you have missed. But before we dive into Calypso, let’s first get on the same page by pointing out some facts that confuse many people.

New in WordPress 4.4: Responsive Images – The implementation in WordPress modifies the markup of image tags embedded in the content. This is done every time a page is generated, by the wp_make_content_images_responsive() function which is hooked to the_content filter.

Use Cases Of The WP REST API – Everyone at WCUS was buzzing about APIs — and, with the inclusion of the WP REST API infrastructure in WordPress 4.4, APIs will remain at the forefront in the conversation around the future of WordPress.

How to Build a WordPress Autoblogging Website – Autoblogging is a way of setting up a website whose blog is taken care of automatically, constantly updated with fresh, curated and quality content of your choice. It can also be an opportunity to make use of affiliate marketing and earn some extra cash every month.

Search Engine Optimalization, Conversions, Analytics, etc.

SEO Future Predictions for the Next Year: 2016 – To begin with, take note of how Penguin 4.0 update has affected your website. Make use of the remaining days of 2015 to resolve all existing issues. Create a robust SEO strategy to fight Penguin and step in the new age of SEO as you welcome 2016.

Tutorials

Top 55 Useful And Detailed CSS3 Tutorials And Techniques – To help you not go through the same thing I’ve made a sorted list of CSS3 tutorials on 5 categories: Navigation tutorials, Text tutorials, Gallery and Animation tutorials and Misc tutorials.

Animated Map Path for Interactive Storytelling – This demo is an interactive map that will animate a map path while scrolling the page. The main idea is to connect the story being told with the path itself. It will appear as soon as the image is in the visible viewport.

Freelance, Business and Workflow Related Stuff

Be Fluid with Your Design Skills: Build Your Own Sites – Like anything in life, things run smoothly when you make the effort to share experiences, empathise and deeply understand the needs of others. How can designers do that if they’ve never built their own site?

4 Things that aren’t the job of a proposal – If you want work, you need to write proposals, and for many people that is not a happy thought. They really want to dive in to their craft and knock out a great design or write elegant code. The proposal is simply a way to get to the execution of that craft.

5 Tips for Making More Money as a Freelance Designer – Here are some tips that will surely boost your design work’s value. These tips are not things you can do overnight; you will need to put in some hard work in order to achieve your desired results.

How Clients Get You To Charge Less (And Why You Shouldn’t) – So many of us step into those dark alleys again and again because those sketchy strangers in those dark alleys disguise themselves as clients and friends in white shiny offices.

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

Why I’m Ending my Github Streak after 844 Days – If you are new to software or open source, I recommend you set a goal and get to work. It will teach you a lot of skills that nothing else can — being consistent, building or breaking a habit. But also, take a breath every so often.

What I Learned about Product Design This Year – I’ve learned it’s very valuable to design both sides of the experience, because marketing and product design flex different muscles. Designing for product when you’ve mostly done marketing, or vice versa, will deepen your knowledge as a designer overall.

The reason behind your declining content engagement – Are you seeing a decline in people engaging with your online content? If so, you are not alone. You are suffering from content saturation. We are flooded with a never-ending stream of content battling for our attention.

Interaction Is an Enhancement – That’s a ton of potential issues that can affect whether a user gets your JavaScript-based experience. I’m not bringing them up to scare you off using JavaScript; I just want to make sure you realize how many factors can affect whether users get it.

Design, White Lies & Ethics – Unless you’re a fan of dark or shady patterns, you probably struggle occasionally with integrity in your design practice: balancing stakeholder wishes against user needs, for example, or guiding users to hero paths while also granting them freedom to explore.

Why Does Programming Suck? – I’m a software developer and since the very beginning I’ve always had mixed feelings about programming. On one hand, you can accomplish so much with it. On the other, it’s a completely frustrating tool to use

Ethnography = Better Design – But let’s talk ethnography. Its definitely a buzzword in design right now, and in need of context. If you were paying attention in class (and I’m sure you were!), then you’ll remember that ethnography is a research method.

– § –

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.51-2015)”
  1. Thanks so much for including our post. :) This is a great round up! We’re honored to be in such good company.

    • Hi Elizabeth (WebDevStudios),

      You’re welcome, keep up the good writing job and I’ll post about in a new Tweet Parade! And of course, .. happy New Year!
      Cheers & Ciao!