.. Your Daily Design Dosis

Tweet Parade (no.51 Dec 2014)

| Comments Off on Tweet Parade (no.51 Dec 2014)

.. 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 will be the last Tweet Parade of this year! I wish you all a merry Xmas and a very happy, successful and healthy New Year! See you again 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.

The 5 Most Popular Frontend Frameworks of 2014 Compared – In this article we’ll compare what I think are the five best frameworks available today. Each framework has its own strengths and weaknesses, and specific areas of application, allowing you to choose based on the needs of a specific project.

Ideal link underlines don’t care about letter descenders – But the use of underline for links, especially in paragraphs of text, is semantically different from this classical use. Such underline should not be an obstacle for the reader who choses not to care about the link.

Support the old, optimise for the new – The polyfill service selectively bundles browser polyfills based on the User-Agent header supplied in a request, with the intention of allowing JavaScript and CSS developers to use modern standards in legacy user agents that do not natively support the standard.

Why the :visited Pseudo-class is Strange – Modern browsers have severely restrained the CSS properties that developers can use in a style rule that uses the :visited link pseudo-class. If you’re unfamiliar with this oddball pseudo-class, you may be wondering why your site’s visited links aren’t rendering as expected.

Why You Should Avoid Sass @extend – TL;DR: Extending is invisible. Extending doesn’t necessarily help file weight, contrary to the saying. Extending doesn’t work across media queries. Extending is not flexible. Mixins have absolutely no drawback.

Fix ‘jumping scrollbar’ issue using only CSS – When centering a page with CSS like margin: 0 auto;, there’s a small gotcha: the page will ‘jump’ a little on certain browsers when navigating between short and long pages.

The Widescreen Web: Using CSS object-fit – An obvious gap in web design is the lack of the same intelligent and automatic resizing rules for images and videos. That’s the role of CSS object-fit.

An Overview of SVG Sprite Creation Techniques – There are several ways to create SVG sprites, and this article will give you an overview of three of them. While we’re at it, we’re going to take a look at some of the available tools used to automate sprite creation and fallback for us.

7 Reasons Why You Should Choose Ruby on Rails – Programmers like Rails because it helps them to abstract and simplify common repetitive tasks everyone has to deal with at one point or another. But that’s just one good reason for why you should learn Rails – here are six others to give you an idea what kind of benefits Rails can bring you.

Learn Regular Expressions in 20 Minutes – Regular expressions (or regex-es, as is the correct term for what we use in programming languages today) are specialized languages for defining pattern matching rules for text. They have their own grammar and syntax rules, which every beginner gets wrong. But you don’t have to!

Calc() Grids Are the Best Grids – I think we can all agree that fixed grids have gone the way of the dinosaur in favor of fluid grids, but there were always things that bugged me about fluid grids. We can use calc() within our CSS, so what does it do?

An Auto-Enforceable SCSS Styleguide – There’s a vital distinction between discussions of best practices and the actual codification of clear, specific, concrete conventions and standards that will constitute, for some group of developers, enforced expectations.

A Designer’s Sublime Text Setup – For some reason, Sublime Text looked the most promising. Once you install Sublime Text you get something that looks very simple in both UI and functionalities. At first, it doesn’t look that special actually.

A Complete Guide to Flexbox – The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

Reverse order of elements with CSS – If you are already using flexbox, flex-direction is probably the right choice. Though, if you want transitions or broader browser support the transform trick is a good alternative.

3 tricks for adding texture to your text with CSS and SVG – CSS has introduced properties like background-clip and mask-image which you can use to create similar effects to those you’re creating in Photoshop. On top of that, you could also use SVG to clip an image with text.

A CSS Object-Fit Gallery: Thumbnail and Full Image In One File – The majority of web image galleries must load at least two copies of every photo: a small thumbnail and a full-size version. While this approach has its advantages, it has an equal number of annoyances and drawbacks.

HTML5 APIs You Didn’t Know Existed – Despite many HTML5 features being implemented in modern browsers, many developers are unaware of some of the smaller, useful APIs available to us. This post exposes those APIs and was written to encourage you to explore the lessor known HTML5 APIs!

Thoughts About HTML5 Structural Elements – Do you use the new HTML5 structural elements like header, aside, article, and footer? If so, do you do use them because of the added semantics they carry? It makes sense to have our tags communicate more, even if no one is listening just yet.

How to Redirect a Web Page – A redirect is when a web page is visited at a certain URL, it changes to a different URL. For instance, a person visits “website.com/page-a” in their browser and they are redirected to “website.com/page-b” instead.

Better webfont loading with using localStorage and providing WOFF2 support – This time I show you an optimized version of the script and provide a solution for WOFF2 support for the newest browsers.

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

What makes a great UX designer? – I’ve recently noticed a lot of different articles being written about what a UX designer is, and in honor of improving peoples experiences, I thought I’d throw in my two cents as well.

Responsive Web Design Revisited – In this course you’ll get up to speed with the very latest in Responsive Web Design. First you’ll learn what “responsive” really means today, and how a new “content first” approach lets you cater for all types of users from the ground up.

Better Responsive Website Testing in Google Chrome – I now want to show you two simple tools; tools which can help you respond to the most common devices and speeds and stay on top of the development issues, until your site’s perfect.

How to create a front-end testing plan, and why you should – Having a plan will help you know the devices, browsers and systems your project is supposed to cover. This will help you reduce the waste of time, money and effort.

The Effect Of Luminance and Contrast Ratio On Accessibility – You know it’s important to contrast text with it’s background. Black text on a white background offers the most contrast. Light gray text on a light gray background, not so much. What exactly are you contrasting and how do you know when the contrast is enough?

Improving Design With Quick Usability Tests – To see how users behave in a natural environment, it helps to use remote usability software to record the screens and the voices of test participants. This lets you hear them thinking out loud and see every click.

Getting started with Foundation for apps – In short, the classic Foundation framework, while flexible enough to make apps with, was created as a tool for many purposes. App developers may want something that caters a bit more specifically to their needs.

Getting Started with Usability Testing for Web Design – In this guide I want to share a few ideas on usability testing and the value it can provide. Anyone who puts their mind to the task will be able to comprehend the basics and start integrating usability testing into every project.

How to design for thumbs in the Era of Huge Screens – Apple’s changes will make our lives easier as smaller screen sizes die off. But only if we learn to adapt our designs. If not, the future is going to be pretty painful for those thumbs.

Better webfont loading with using localStorage and providing WOFF2 support – This time I show you an optimized version of the script and provide a solution for WOFF2 support for the newest browsers. What do you think of this technique?

Planning A Front-end JavaScript Application – In this article, I am going to describe 16 steps that front-end developers should go through when planning a front-end web application. These steps aim to cover the entire life-cycle of a front-end application.

4 pro tips to maximise responsive accessibility – Responsive design and accessibility both embrace the idea of flexibility. But there’s more to it than that. Simply implementing responsive design techniques doesn’t automatically make your site accessible. Here are four practical tips to help boost accessibility in your responsive designs.

Creating Responsive Images with CSS – In this tutorial, you will learn the simplest technique for achieving responsive images. There are many responsive image techniques, and they vary in complexity and level of browser support.

Optimize Images for the Web – One of the best ways to create fast websites is to optimize images for the web. HTML, CSS, JavaScripts, and fonts can add up, but nothing will slow a page down like tons of unoptimized graphics. In my experience, images tend to account for the majority of a page’s total file size.

The Do’s and Don’ts of Building HTML5 Hybrid Apps – Advances in smartphone processing and memory, along with improved frameworks have helped level the playing field. However, there are guidelines one should follow when considering hybrid.

Is the ‘User’ Always Right? – We have all heard the phrase, “The customer is always right”. Coined by Harry Gordon Selfridge, the sentiment is perfectly understandable in his golden era of high-end retail. But is this still the case today?

Becoming a More Thoughtful User Experience Designer – This detail was so simple, but it made me realize that the tiniest detail, even an unnecessary one, can have a huge impact on a user. This detail came from a designer who realized that dealing with a full inbox can be stressful.

Webdesign in Common, Web Typography, Tools, etc.

How to Design for Everybody – Here’s a brief look at our approach to public digital design and what worked for us. We hope it’s useful, and look forward to sharing more with governments across the nation and globe.

The shape of materials to come – After the presentation of Material design this year, we couldn’t wait to see the new guidelines from Google. Animations became essential for screen designers, and Google gave us a preview where this trend is going to.

Five Ways to Animate Responsibly – Animation has steadily begun popping up on websites, from sleek app-like user interfaces to interactive magazine-like spreads. It’s an exciting time for web animation wonks, interaction developers, UXers, UI designers and a host of other acronyms!

When Launching a New Website: Avoid These Four Simple Website Mistakes – Having a website is essential for just about every business these days. Not only is it expected, but it helps improve your image and your accessibility for customers. Putting together a website doesn’t have to be complicated, but it isn’t just a snap and to go project either.

How information architecture affects your website design – Information architecture is the formal name given to the way that information is presented and organised for viewers or audiences. There are several common things to understand about information architecture as it relates to your web site.

5 Web Design Trends in 2015 That Matter – As 2014 draws to a close, it’s time for entrepreneurs, freelancers, and small businesses to prepare for the coming year so they can gain a head start over their competition. The same can be said of web designers who want to cut through the job market by preparing for the popular trends of 2015

The Languages And Frameworks That You Should Learn In 2015 – Node.js is the winner here, with PHP second, and JavaScript – third. There is an amazing community forming around Node.js, so it isn’t a surprise that a lot of you are excited about it. If you know JavaScript, you are already half the way to building web apps in Node.js.

Design With Typecast, Now At No Cost – Nearly two years ago, we introduced our Typecast app as a companion to our premium Fonts.com Web Fonts plans. Since then, thousands of users have used Typecast to design with type in the browser and prototype beautiful new sites.

A No-Nonsense Guide to Web Components, Part 2: Practical Use – Adopting new web technologies is rarely painless, and Web Components are especially complicated. In this post, we’ll look at the current state of browsers, polyfills, performance, accessibility, progressive enhancement, and options for practical implementations.

How to Design a Website to Maximize Conversions – I’m often asked how to design a website that will maximize conversions. Obviously several factors exist in this process, such as your product and customer base, so there’s no one right answer that will suffice for every business.

Why You Should Design for Open Source – Most designers don’t like working for nothing. We rally against spec work and make a stand for contracts and getting paid. However, I’m going to make a case for why you could also consider designing for open source.

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

Gestalt Theory in Typography & Design Principles – The mind effectively simplifies the parts by making it into a single object. Applying this theory to design creates unity within a piece. The stronger the relationship between elements on a page, the better the communication.

How to Create a To-Do List App Icon in Adobe Illustrator – In this tutorial you’ll create a fun to-do list or organizer application icon with a three‑dimensional effect, ready for desktop or market use. Combine radial gradients, blends, a sense of lighting, and the tiniest bit of perspective for a simply built, but eye catching, icon.

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

Designing an Effective (and Beautiful) Email Newsletter – It may seem small, but I’m happy that I was able to contribute to the Desk community in some way. Here’s a breakdown of the process that went into redesigning the Desk community newsletter.

Why No One Is Paying Attention To You (And How to Change It) – Everyone wants to know how to get more attention for their work, but not everyone is willing to do what it takes. The question you have to ask yourself is a simple one, and yet, it’s profound and can change everything.

100 Lessons Learned from 10 Years of Blogging – I’ve learned a lot about blogging over the last 10 years. I’ve enjoyed my journey, and I will continue to learn more as I blog over the next 10 years. I hope you can gain some insights from my experiences and grow your blog at a much quicker pace than I have been able to do.

How to Use Social Media for Branding – Setting up your company and going through the process of branding it may seem like a difficult thing to do for people from all around the world, but the truth that is once you get the hang of it, branding with the use of social media can turn out to be quite easy to handle from all the points of view.

WordPress

SMACSS-Press – I’ve found that over time, the hardest part of a project to keep tidy is the stylesheet. Functions, page-templates, and sidebars may come and go, but stylesheets seem to go on forever, warts and all! I think investing in some classery up front can go a long way in keeping things maintainable down the road.

How to Add WordPress Widgets in Accessibility Mode – What most users are unaware of is that there is a built-in accessibility mode for widgets in WordPress. In this article, we will show you how to add WordPress widgets in accessibility mode.

The Evolution of WordPress in 2014 and Beyond – 2014 looks to have been another successful year for WordPress. The popular open-source CMS continued to dominate market share, powering over 23% of websites. It also continues to be adopted by more users than any other CMS.

Catch MailChimp Updates in WordPress Using Webhooks – What you need is MailChimp webhooks. In this article, I’ll show you how to build a simple plugin to update your WordPress site with all your MailChimp list activity.

How to Build a Mobile App for Your WordPress with Reactor – This is all possible because WordPress has grown from a blog, to a CMS, and now to an application platform. New technology such as the WP API is pushing WordPress into the future by allowing it to power things like mobile apps.

The Beginner’s Guide to WordPress Taxonomies: A Custom Plugin – The plugin is going to work with the existing standard post type that ships with WordPress. This should give the most flexibility as it relates to building a plugin, demonstrating the concepts, and using it in your own installation.

Creating a Responsive Menu in WordPress for Mobile Devices – In this article you saw how we can achieve a different responsive menu for the mobile users using media queries and some WordPress API. Once such a menu is created the admin can easily update the menu from the admin section.

Search Engine Optimalization, Conversions, Analytics, etc.

SEO in 2015 (and Why You Should Care) – The SEO industry is full of self-proclaimed gurus whose lack of knowledge can be deadly. There’s the terrifying fact that even if you dabble in SEO in the most gentle and innocent way, you might actually end up in a worse state than you were to begin with.

Clean up your bad backlinks – If your website suffers from negative SEO, or you have made the mistake of buying bad backlinks via that shady SEO company in the past, cleaning up your backlink profile is quite a hassle. We tried to explain that above.

10 Most Common SEO Pitfalls – Many businesses weren’t aware of SEO best practices when they first published their website, and since then have received a great deal of misinformation regarding SEO tips and tactics. Here are the top 10 most common SEO mistakes we see, and how to correct them

Tutorials

Elastic SVG Elements – Today we’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation.

Animated Headlines – A collection of animated headlines, with interchangeable words that replace one another through CSS transitions. Among some fancy effects, the animated headline captured my attention. So I decided to put together a collection of CSS effects for headlines with rotating words!

Recreating the Firewatch Parallax Effect – As a web designer you probably cry inside when you hear the word “parallax.” It’s tainted. Dirty. An overused term that has come to mean “gratuitous scrolling effects” or worse; the complete hijacking of your browser’s scrollbar.

Freelance, Business and Workflow Related Stuff

How to deal with clients who think they can design – They think their wall of participation awards makes them a world-class athlete, their hours of American drama series House M.D. makes them a doctor – and the fact that no one ever told them otherwise makes it all true.

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

Google’s Introduction to Material design translated into ‘Material’ language – I don’t know if you’ve read Google’s Introduction to Material Design, but the language they use is anything but material. It reads like it was written by transcendentalists in the early 19th century. In short, it’s ridiculous.

IBM Design Language | Front End: Fundamentals – At its best, the front end is invisible; it gracefully gets out of the way to allows our users to do their work. Front end developers harness ever-changing media in elegant ways to build products prepared for the future.

Don’t blame the designer – “When is the design for the new site going to be done?” As managers, it’s easy for us to blame our design team for missing deadlines. But are your designers really slowing down the project? What’s really slowing down your team.

How Bad UX Makes Users Blame Themselves – Great digital products, after all, are a result of hard work, change, and understanding of both the problem and the user. This isn’t easy— if we expect it to be, then we shouldn’t be designers.

– § –

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.