.. Your Daily Design Dosis

Tweet Parade (no.48-2015)

29/11/2015by Jan Rajtoral | Comments Off on Tweet Parade (no.48-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 48

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

What’s in ECMAScript 2016 (ES7)? – The most recent release of ECMAScript, ES6, is large and was standardized almost 6 years after ES5 (December 2009 vs. June 2015). There are two main problems with so much time passing between releases.

Flexbox’s Best-Kept Secret – If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied.

Seriously, Don’t Use Icon Fonts – Many users will never see those fonts. Opera Mini, which frequently rivals iOS Safari in global usage statistics with hundreds of millions of users worldwide, does not support @font-faceat all.

On Keeping Breakpoints DRY – I went on a personal quest to find the best way to use the powers of CSS preprocessors to manage breakpoints and write media queries in my projects. The outcome was include-media, a library that promises “simple, elegant and maintainable” media queries in Sass.

39 CSS Code Snippets To Make You A Better Coder – These CSS hacks’s code cause they’re all easy to implement and where is the case, they’re well documented. Besides the ones that solve common and annoying problems there are also some that solve new issues brought by the new technologies.

Animated SVG vs GIF [CAGEMATCH] – SVG can do much more than display static images. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage over all other image formats. They are one of many reasons that make SVG images better than raster images, including GIFs.

SVG without SMIL: Google Chrome Kills Support – Even when SMIL is now classified as deprecated, the support is not instantly banned from Chrome. For future projects, however, other animation options and libraries such as SVG.js or Snap.svg should be used.

Scaled/Proportional Content with CSS and JavaScript – CSS alone can’t really do this. But CSS is still the answer! transform: scale(); is what we need. It scales things perfectly proportionally. We just need to give it a number to scale it by, and that scale we can figure out with some JavaScript.

How To Adjust The Baseline Alignment Of SVG Text – Because different fonts will have different baseline information it’s possible when using multiple fonts that they won’t line up the way you want. When that happens you can adjust the three baseline properties so the glyphs are better aligned.

A bird’s eye view on API development – API, is a collection of endpoints to interact with an application. This post is all about external APIs (more specific, external web APIs). Some people like to think about APIs as a wrapper around a database, this is however mostly not the case.

Three years with CSS Grid Layout – The downside of developing behind a flag is that without something that can be used in production, getting the thoughts and experience of people who useCSS is hard.

Labeled With Love – Since I specifically referred to this approach as explicit association, you probably assumed that there’s another kind of association. Implicit association is created by wrapping a form control and its associated label text in a label element.

Drag and Drop File Uploading – This already-long article could have been even longer, but I think this will get you going with a responsible drag and drop file upload feature on your own projects.

Get started with CSS Polygons – Used primarily to wrap text and mask content, the property also offers designers a chance to create more exciting shapes in pure CSS, without the need for canvas or SVG.

Flexbox Grid Finesse – With Flexbox, for the first time, we can finally create something akin to true grid systems; grids which govern themselves, freeing us to focus on content creation and aesthetics.

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

Filtering and Sorting Best Practices on Mobile – Filtering and sorting are powerful tools to make it easier for users to find what they are looking for. Spend some extra time thinking about your possibilities — it will pay off down the line.

Must-Know Techniques for HTML5 Responsive Design – When tablets and smart phones first began to emerge, many publishers developed distinctly separate websites, or at least distinctly generated HTML code trees, to customize the experience for visitors on different devices.

How infinite scrolling breaks UX – Designers should weigh the pros and cons of infinite scrolling. After all, your client’s site visitors deserve better than suffering long page-load times due to excessive content, scroll positions that aren’t fixed, and footers that are always out of reach.

7 common mistakes made with responsive mockups – As the transitionary phase that brings form to ideas, mockups hold a lot of weight in the design process. This piece reviews the most common mockup mistakes when designing in RWD, so you can make sure your step to responsive is a step forward, not back.

7 Methods for Improving UX with Motion Design – Bring a little motion to your website incrementally to make sure you’re not overloading the page and cluttering the UX. Here are a few methods to incorporate animation on your website.

The future of responsive design standards – Communicating challenges and roadblocks is crucial. Don’t make assumptions—ask why things are expected to be a certain way. And be ready to explain your own decisions and ideas.

3 Ingredients for a Successful UX Strategy – There are several canvases out there, such as the UX strategy blueprint, that can assist with this type of work. However, at its simplest, a UX strategy can be boiled down to three key considerations.

Standardization is crushing UX – But if the goal is overall growth and success, then you can’t lose sight of priorities. In the world of product development and UX design, innovation is integral, context is critical, and the user, not the content, is king.

Rolling Out Responsive – Can you redesign the entire site at once or do you need to stage the rollout over time? Are you going to retrofit the existing desktop site or start from scratch? Will you release a beta version of the site or do a “big reveal”?

Finding the Right Color Palettes for Data Visualizations – Finding the right color palette for data visualizations is still quite challenging. Rather than diving in head first and creating our own color palette, we started by conducting some research on existing color palettes around the web.

The Ultimate Guide to Using Snippets in Email Design – With the help of snippets, you can build emails more easily—and more quickly—than ever before. Spend less time building and troubleshooting emails, and more time creating better email experiences for your subscribers.

How to Use Color in Web Design – Color can do a lot of things for a design if you let it; color can guide a user’s eye, help guide a user through a flow as well as make a grand statement. Color is full of personality and can be fun to work with.

21 Factors to Consider Before a Redesign – Redesigning a website can be a very involved process, and it is important to properly plan and consider the necessary factors that will make or break the redesign. Here is a quick look at 21 factors that you should be contemplated.

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

Designing better app icons – An article for everyone, newcomers and pros alike, about the magic of app icons and how we can make them better. I hope the tips I’ve outlined above will make you more confident in taking on the challenge. Now go forth and make a fantastic app icon!

Use Basic Shapes to Create Awesome Icons – Icons are not redrawn pictures, they carry a specific message, so your job is help transfer this message and make the meaning of the icon bright and clear. You can’t just shrink an image and call it a day.

Better Icon Design in 6 Easy Steps – In this article I have distilled my design guidelines into Six Easy Steps to Better Icon Design. The steps follow the basics of sound icon design and should be seen as a guide, not a dogmatic rule book.

9 Ways to Minimize File Size in Adobe Illustrator – Editing, zooming of the screen and just saving the file may take several minutes. In addition large file sizes are often the reason of application crashes resulting in the loss of all or part of the work.

Adobe Illustrator Workspace for icon design – What I didn’t understand before is how much time I was actually wasting making my way through the piles of useless panels. It might look like just a half a second, but trust me – it matters!

Blogger’s Guide to Creating Better Content – Regardless of what topics you blog about and what your blogging goals are, content creation is a huge part of being successful. There’s no way to get around the need for quality articles.

WordPress

6 Cool New Features Coming Up in WordPress 4.4 – With every new release, we comb over the features to ensure the plugins and themes here at WPMU DEV make the most of the latest features. Let’s take a tour of what’s new in WordPress 4.4!

How to Add Thumbnails to WordPress Categories & Tags – Sometimes a WordPress site will look a lot nicer if we were able to display an image beside categories or tags. For example, we may add an image about CSS in the “CSS” category or the HTML5 logo in the “HTML” category

Dance to Calypso – Today we’re announcing something brand new, a new approach to WordPress, and open sourcing the code behind it. Written purely in JavaScript, leveraging libraries like Node and React. 100% API-powered. Those APIs are open, and now available to every developer in the world.

The Story Behind the New WordPress.com – Our existing codebase and workflows had served us well, but ten years of legacy was beginning to seriously hinder us from building the modern, fast, and mobile-friendly experiences that our users expect.

Search Engine Optimalization, Conversions, Analytics, etc.

UX Factors That Affect Your Website’s SEO Rankings – The answer lies in certain SEO ranking factors and practices that contribute to the overall user experience. By targeting these, we can better understand the how’s and why’s of the user experience in a way that allows us to take actionable steps when needed.

Tutorials

Shazam-Like Morphing Button Effect – Today we’d like to show you how to create a fun little morphing button effect. In this tutorial we’ll create a Shazam-like UI where we initially have a simple button that, when clicked, morphs into a listening button.

Horizontal Timeline in CSS and jQuery – Building a horizontal timeline was a bit tricky. We decided to separate timeline and events, with the first one working like a slider, while the second one occupying the full width and showing a single event at a time.

CSS Product Magnification – This week I was working on an e-commerce website when I thought to myself, I wonder if I could swap out the bog standard JavaScript product magnification and do it with just CSS.

Design is a conversation – It’s often said design is a dialogue between designer and user. We talk to users about what they want and need. We discuss projects with our colleagues to examine problems and uncover solutions.

A New Responsive Font Format for the Web – I think there’s huge potential for a new variable font format to become a key part of the designer’s tool belt. It would greatly improve the reading experience of general users of the web, too.

Prototyping isn’t about hitting home runs – Good prototypes help you express your ideas. Great prototypes help you share, test and iterate your ideas to make them as good as possible before you lock them in.

The Versatile Designer – By siloing design into varying disciplines, we’re doing our industry a disservice by often creating disjointed experiences. Let’s go back to being called “designers,” working on what you feel passionate about and building great experiences.

What’s an API good for, anyway? – Last week, Instagram unceremoniously locked down their API, ending the ability to build a third party client. This shouldn’t have come as surprise to anyone: the API has become a platform “Hail Mary” for free developer labor.

The new Google Material icons could use some work – It’s an important thing for Google to get these right. People use them in their designs, these icons spread into Material interfaces. They should be of the highest quality — and for the most part they are great.

User experience is not a department – Notable companies are building massive UX teams, but I’m 95% sure it’s because people don’t know what the heck User Experience really is. User Experience Design puts customers at the top of the frontal lobe.

– § –

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.