.. Your Daily Design Dosis

Tweet Parade (no.47-2015)

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

Writing CSS on Growing Teams – When you want your CSS to be reusable, how do you have several people working in git branches on different pages without writing completely separate styles? Surprise: it’s not really about how we write CSS, it’s about the process.

Tips for Creating and Exporting Better SVGs for the Web – There are some steps that designers can take or avoid—a set of “dos and don’ts”—that can help make the generated code cleaner. In this article, I want to share some of these.

Writing Quality Code – Like most specialized skills, there is neither a metric nor a clearly defined and standardized checklist we can use to measure how good our code actually is. Good code is DRY, test-driven, behavior-driven, maintainable, and consistent among many other things.

Responsive Typography in SCSS – We’ve developed a simple mixin that enables you to collate your typography styles into one central location and call on a specific look at any point. It also handles media queries, allowing you to specify different properties at different breakpoints.

Using Flexbox to Create a Responsive Comment Section – This is why in this quick tutorial we’re going to build a comment section using flexbox. We’ll take a look at some of the more interesting properties that the flexbox layout mode has to offer and show you how to take full advantage of it.

How to animate “box-shadow” with silky smooth performance – How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance.

HTML5 Tutorials, Resources, Guides & Tips for Developers – This post will serve as a guide to help you find HTML5 tutorials and resources for learning. All tutorials are completely free and range from absolute beginner to the lighter-end of advanced frontend coding.

Creating an Animated Menu Indicator with CSS Selectors – In this article, I’ll cover creative ways of using sibling selectors and pseudo elements to make a CSS-only menu indicator that would normally be achieved using JavaScript.

DOM Tips and Techniques: Parent, Child, and Siblings – In this post I’ll discuss and demonstrate a number of different DOM features that can be used to manipulate HTML, with a specific focus on parent, child, and sibling node relationships.

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

Security and usability go hand in hand: 5 tips to get the development mix right – The conflict between usability and security can often be seen throughout the workplace: normally locked doors cracked open, passwords written down, and files shared through unsanctioned online services.

Longterm User Experience – In this article I reveal possible solutions designers could resort to designing better UX in Longterm prospective. If we want to improve UX permanently, build a really strong relationship between the user and your product, then we must design UX in Longterm perspective!

Big Rig – I’m a big fan of performance testing, but for many it’s hard to get at extended data about what’s going on during important parts of their website or web app’s lifecycle. I’ve built Big Rig to try and make a dent in that problem.

Basic Patterns for Mobile Navigation – Mobile navigation must be discoverable, accessible, and take little screen space. Exposing the navigation and hiding it in a hamburger both have pros and cons, and different types of sites have different preferred solutions to the mobile-navigation quandary.

Setting a web performance budget – A solid strategy for handling performance-related issues like page load time and bandwidth, usage should be at the heart of any website design or redesign. Performance should never be sacrificed for the sake of presentation.

No UI is the New UI – If you don’t know about these apps, what make them special is that they don’t use a traditional UI as a mean of interaction. Instead, the entire app revolves around a single messaging screen.

The latest UX challenge: designing for personalization – Users want individual experiences when they interact with devices. But how do you design a system or interface that might be vastly different for each user? That’s one of today’s biggest web and mobile design challenges.

Loading Web Fonts with the Web Font Loader – Several years ago the consensus on font loading in the community was that, as a website loads, all fonts should be hidden until the correct resources have been downloaded.

Top 10 Tools to Step-up Responsive Web Design – All in the name of responsive web design. And to put them in action, we have a veritable army of tools. Here’s a list of our 10 favorites, an absolute must for any designer going ‘mobile-friendly’.

Good UX Is Good Business: How To Reap Its Benefits – Good user experience is clearly good for business. Studies show that companies that invest in UX see a lower cost of customer acquisition, lower support cost, increased customer retention and increased market share.

When the treatment is worse than the disease – In short: add-on accessibility is a sham. Whether it is something like AudioEye or even an apparently “custom” solution like UsableNet, they are terrible.

Responsive design mistakes – and how to fix them – If there’s only one thing you take away from this article, make sure it’s this: you need to think about your designs. Now, we usually wouldn’t recommend overthinking anything. But with design work, a meticulous thought process leads to great responsive designs.

How Visual Design Makes for Great UX – “…the degree of [a] system’s aesthetics affected the post-use perceptions of both aesthetics and usability, whereas the degree of actual usability had no such effect.” In other words, visual design has as much of an effect on the overall experience as actual usability.

Responsive Logo Design Tips & Tutorial – Yet looking at responsive sites there remains one element on the page that often jars. This is something that many of us have forgotten about or are forbidden to touch. It’s the logo itself.

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

The New Favicon – Even in this brave new world of vector favicons, knowing how to push pixels is still important for making your brand stand out. It may seem a little crazy to go to these lengths, but it’s our business to make products look the best they can.

Tools for the Modern Front End Developer’s Workflow – If you’ve felt a little shaky with your front end skills or just want a refresher about some of the newer techniques, this guide is for you. I’ll cover a handful of popular tools and resources that every front end developer should use or at least know about.

Your About Page is Failing You: Here’s How to Fix It – The About page is one of the most important pages of every site. For some customers, the About page can be the deciding factor that determines whether they buy from you, or from one of your competitors.

Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo – In this article, we’ll look at four popular static website generators — Jekyll, Middleman, Roots, Hugo — in far more detail. This should give you a great starting point for finding the right one for your project.

Redesigning Your Website – Never An Easy Process – There is also human evolution in terms of web usage, involvement with social media and interaction between the visitors, factors that should be taken into consideration when redesigning.

Everything designers need to know about Foundation 6 – Foundation 6 is almost ready to exit beta, and it’s better than its predecessors in nearly every conceivable way: it’s more streamlined, it’s simpler, and yet somehow more sophisticated.

6 Free Tools for Creating Your Own Icon Font – Although there are many icon font sets (such as Font Awesome and Iconic) that you can readily use in your UI designs, there are times when you might want to generate your own custom icon font.

Card Design Is Taking Over – The card design is taking over, seen everywhere from website to mobile apps and games, it everywhere. Commonly referred to as tiles, or The Stack, it is dominating design due to its ease of use and familiarity.

Why cards are dominating mobile design – Screen-size cards are everywhere, from websites to native apps and are designed to look like their physical counterparts. It’s an easy way for you to shuffle through a series of digital containers with the flick of a thumb.

Why Pre-Built Websites Could be the Next Big Thing – The pre-built website approach can be a real game-changer for any one of these three reasons, and it is about as solid and straightforward as you can get.

Top web design trends for 2016 – The web is a playground for designers to push the boundaries of what is possible, experimenting with novel user interfaces, and leveraging the power of all the possibilities in creative, exciting ways.

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

Rebranding is life – Things had changed: the teams grew as new people came in, new talents were added to the company and, with it, more complex projects appeared, which demanded design thinking. With all this internal changing, the external image of the company started feeling a bit off.

Free Adobe Illustrator CS6 Tutorials and How-Tos – The new features and changes in Illustrator are not as drastic as the changes in Photoshop, but there are still new tricks to be learned and the best way is through free online Illustrator CS6 tutorials.

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

7 Popular Blogging Tips That Don’t Always Apply – Advice is helpful, it can guide you through the ropes as you become more acquainted with the industry and more familiar with your specific blog. But there’s one problem, and it’s a big one: this advice doesn’t always apply.

11 Types of Content That Really Drive Traffic – To fully utilize content marketing, your content needs to stand out. Here are 11 types of content that have the ability to really drive traffic back to your WordPress site.

Always Up-To-Date Social Media Image Sizes – We’ve outlined the best image sizes for each social network and image types; and to ensure you’re as up-to-date as possible, we’ll revise the article as the networks change their formats.

10 Tips to Know about Content Writing – You know you have to provide top-notch content that will awaken the interest of your target audience, and you need to commit to a publication schedule to make your loyal readers happy. The only question is: how exactly do you achieve that?

Effective Time Management for Bloggers – Running a blog can require a lot of time, and most bloggers have only a limited amount of time available. Good time management can make these few hours very productive.

5 Ways to Get Noticed by A-List Bloggers – I’d like to focus on a few methods that less people are trying. These five methods will get you noticed by the blogger, and hopefully it will lead to a link or an endorsement if they like your work.


10 Unexpected Alternative Ways to Use WordPress – WordPress is no longer a CMS for creating blogs and online portfolios only. The possibilities of this platform are literally endless and we will substantiate this claim in this article.

Yoast SEO 3.0 – This release includes real time content analysis, the “upgrade” of our snippet preview to a snippet editor, an upgrade to how we handle categories and tags and an integration with Onpage.org.

30 of the Top WordPress Freebies of 2015 – This WordPress collection is a one-stop resource for all your WordPress-related needs. Themes, plugins, tutorials, guides… we have it all. So, don’t hesitate to scroll down and download, view or bookmark the resource that you find useful.

What’s new in WordPress 4.4 – Each new version of WordPress brings enhanced features and bug fixes to improve the Web’s most-used blogging platform. The upcoming release of WordPress, version 4.4, is slated for sometime in early December 2015 with some interesting changes.

Understanding CSS Grids for Modern WordPress Website Design – With responsive design now no longer optional, CSS grids are quickly becoming the go-to for creating consistent website layouts that look great on multiple devices.

How to Create Sticky Navigation for WordPress – Whether it’s a question of putting your most prominent call to action front and center or ensuring your site users always have an appropriate navigational option in front of them, sticky headers make an awful lot of sense from both a site owner and user’s point of view.

An Untechnical Guide To The WP REST API – The WordPress REST API is a hot topic in the WordPress space, particularly among developers. But for some of us less technical WordPress users, understanding exactly why this API is so revolutionary is a challenge.

Import And Export A Database Using Command Line – The following code snippets will allow you to import and export a large database using SSH commands. To get SSH access to your hosts server you will need to contact your current web hosting company.

Search Engine Optimalization, Conversions, Analytics, etc.

What Makes A Website Search Engine Friendly? – Search Engine Optimization (SEO) is an on-going process that must be a priority in order to reach the top of search engine results. Proper design is the foundation for SEO efforts, but design alone cannot deliver the maximum results.

How to Make Every Piece of Content SEO Friendly – Don’t obsess over SEO. Obsess over great content. Let’s assume for a moment that you have a technically sound website. What should you do? Just create great content. If you do, SEO basically takes care of itself.


Creating a simple glass effect with Raphaël – You may be wondering what the point is of creating virtual glass. We will be using CSS, HTML, JavaScript, jQuery, and a special JS graphics library called Raphaël to create and manipulate our image.

Blueprint: Multi-Level Menu – Today’s Blueprint is a simple menu with multiple levels. The idea is to animate each menu item once a level is changed. The animation starts with the item clicked and the delays are propagated through the neighbors.

Recreating the Google Logo Animation with SVG and GreenSock – A little while ago, Google revealed their updated branding and introduced the new identity on a page with creative animations. I tried to recreate some of these animations using SVG and GreenSock.

Some Inspiration for Pricing Tables – Today we’d like to share some inspiration for pricing tables with you. Pricing tables are an essential component on websites where digital services are offered. While there seems to be a common pattern, there are infinite styling possibilities.

Stretchy Navigation in CSS and jQuery – We decided to apply a similar idea to a stretching navigation, and create 3 different user cases where this snippet would be useful: 1) fixed navigation, 2) add content button and 3) edit content button.

Freelance, Business and Workflow Related Stuff

5 Essential Tools to Integrate with Trello for Web Developers – Trello, a collaboration tool, is considered to be one of the most popular tools among web developers to manage a workflow. If you find Trello a convenient tool for managing your web projects, I recommend these 5 tools that will help you make the most out of it.

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

The Cost of Frameworks – There are other metrics besides bootstrapping I’ve barely had chance to look into: memory usage, long-term CPU usage, and impact on frame rate to name three. Overall, I think we have more to do to properly assess the impact of code that we ship to our users and the costs we pass on to them.

Frameworks, not Blameworks – Frameworks exist that don’t prohibitively hamper the perceived performance of your site. Frameworks exist that have a fast initial (preferably server side) render. The data is clear. Choose wisely. Your users will stick around long enough to thank you for it.

Staying Busy – My strategy is to stay busy, at all times. Keep the momentum up. It’s important to understand that we’re talking about being REAL busy, not fake busy. One will lead to happiness, the other one will lead to depression. Faking it will always backfire.

Dear Adobe, Your iPad Apps are a Mess – It’s time to take iOS seriously as a pro tool and do what you do best. Don’t give us 30 apps that each do one thing. Give us one app that does 30 things. We don’t need you to be Instagram. We need you to be Adobe.

I Turned Off JavaScript in My Web Browser for a Whole Week and It Was Glorious – There’s another web out there, a better web hiding just below the surface of the one we surf from our phones and tablets and laptops every day. A web with no ads, no endlessly scrolling pages, and no annoying modal windows.

7 things I learned working at a user-centred design agency – The cxpartners approach to design is far removed from anything I’d ever experienced, so I had to adapt quickly, learning along the way that I was a young & foolish designer who had a bunch of assumptions that were wrong.

– § –

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.