.. Your Daily Design Dosis

Tweet Parade (no.51-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.

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.

Tweet Parade 51

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.