.. Your Daily Design Dosis

Tweet Parade (no.44 Oct 2014)

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

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 Anti-hero of CSS Layout – “display:table” – The topic of table usage in layouts is a sensitive one. Almost every web developer knew that a table-based layout is atrocious and the number of reasons against it are well-documented. There are two ways you can use table in layout – HTML Table and CSS Table.

Make full screen sections with 1 line of CSS – Can we make it happen with pure CSS, that is also supported from a big range of modern browsers? What if we can make it only with 1 line of CSS: .section { height: 100vh; } Yes, viewport height, 1vh = 1% of browser’s height.

Building single page apps using web components – So how does one build a single page application (SPA) using web components? On the Polymer team we get this question a lot. Our answer (as always) is…“use components!” However, it’s never immediately obvious how to tackle an existing problem with new technologies.

Triggering JavaScript Actions With CSS Media Queries – Changing the value for a CSS breakpoint inevitably means hunting down and changing the equivalent value in your scripts to keep them in sync. Ideally, responsive actions in JavaScript should be initiated by changes in CSS.

6 Coding Playgrounds For Web Developers – These are web applications that allow real-time editing and previews of client-side codes: HTML, CSS, and JavaScript. The best part of these coding playgrounds is that most of them are free and you can easily share a “playground” with someone either for teaching purposes or for debugging.

Here Is The Easiest Way To Create Equal Height Sidebars – The tricky part lies in that you want both your sidebar and main page element to have content with varying lengths, but at the same time they should have equal heights. With flex box, this is very easy.

Shape Blobbing in CSS – The blur obvious makes the element blurry, the contrast fights against the blur, preferring stark changes in color. If you contrast enough, you’re left with a (fairly) sharp looking shape again.

How to Implement Cross-Browser SVG Sprites – In this tutorial I’m going to demonstrate a basic implementation of some SVG icons, how to provide a fallback, and how to turn them into an SVG sprite.

Dealing With Constants In Sass – Sass, like JavaScript, does not have a native way to implement constants. So a constant is basically an immutable variable. However since a variable is editable by its very own nature, we needed a new name to describe a variable that is not… you know, variable.

Optimizing SVG for the Web – We’ll take a look at a command line tool that can help us clean that up a bit called SVGO. It’s a Node based, open-source (free) project hosted on GitHub that helps cleanse verbose SVG files and output a well optimized one.

The Specificity Graph – It is a very simple model for diagrammatically assessing the overall health of your codebase in terms of specificity—a way of looking at an entire project’s CSS and highlighting any potentially troublesome areas of higher-than-ideal specificity.

How to Use “animateTransform” for Inline SVG Animation – The techniques you’ll be learning will allow you to create sophisticated icon and image animations without a single GIF, JPEG or PNG, with zero JavaScript, and without the faintest whisper of Flash.

CSS only fancy pattern based rules – I wanted something more flexible and easier than that slicing and tweaking. The trick I’m going to show you can be used to build some good’ol leading dots for history school books nostalgics.

Add a single SVG Chart to your Page – It was clear to use SVG here but as I use variable data I wanted to do this via JavaScript. There are tons of chart libraries but I was curious to find a small solution that works fine for just one or two charts on a site.

Here Is The Easiest Way To Create Equal Height Sidebars – In this quick tutorial, I will show you how to use flexbox to create something basic that has been surprisingly tricky to do until now – a sidebar that has equal height to your main content.

Using Object-Oriented CSS with Sass – I’m sure you’ve heard about Sass’ @extend directive and of course you know how it works. So, thanks to placeholder selectors we can extend in Sass, creating semantic classes in CSS, solving our problem for HTML.

Getting Started With Inline SVG – This is a highly theoretical tutorial, but it’s main purpose was to get you thoroughly understanding the inner workings of SVG at a very fundamental level. By wrapping your head around some of the basics, you can progress and do some really awesome stuff.

For and against ‘let’ – In this post I’m going to examine the case for (and perhaps against?) one of the new features coming in JavaScript ES6: the let keyword. let enables a new form of scoping not previously accessible generally to JS developers: block scoping.

Reducing JavaScript Bloat With Shoestring – After talking so much about the importance of reducing JavaScript bloat, I figured I should take the time to explain a little about how I’m doing that myself. Shoestring has played a large role in that.

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

Form Usability: The Pitfalls of Inline Accordion and Tab Designs – During our e-commerce research studies, particularly on checkout usability, we’ve found that tab-style and inline accordion form layouts can inadvertently confuse users, or even flat out violate their expectations.

Designing for Large Screen Smartphones – As smartphones continue to get larger but our hands don’t, what kinds of design solutions can ensure mobile interactions remain comfortable, quick, and easy on our thumbs? Here’s a few options to consider…

Guidelines for Building Touch-Supported Website Layouts – As more people are latching onto touchscreens web designers need to craft new solutions for mobile Internet browsing. In this post I want to cover a few guidelines for helpful touch-based web design trends.

Merging Responsive Page Elements with JavaScript – Responsive design is not about removing and shrinking web page components as the browser narrows: it’s about making the most of the space available in the viewport. Sometimes that means merging components, rather than taking them away.

Coding for Performance: Data alignment and structures – This article collects the general knowledge and Best-Known-Methods (BKMs) for aligning of data within structures in order to achieve optimal performance.

Rethinking the Mobile Navigation – I have always found it a little bit awkward to navigate mobile websites one-handed. The problem stems from the ergonomics of trying to reach the furthest corner of the phone using only one hand which is an awkward maneuver that I am sure many of us have attempted.

12 Essential Responsive Design Tools – I’ve sorted through some of the tools available and put together this list to help through the phases of the responsive design and development process.

The Three Laws of Interaction Design – A user’s perception of an interface is inextricably connected to its form, content, and behavior. Just as industrial and graphic designers focus on form, interaction designers hold behavior as the foremost element to consider.

Webdesign in Common, Web Typography, Tools, etc.

8 Web Re-design Faults That Can Ruin Your Site’s Ranking – To redesign an effective site that ranks well on search engines, you need to avoid making some web design mistakes. Here is the list of web design mistakes that should be avoided to preserve the SEO credits of an existing website while redesigning your website

What web designers can learn from Google’s Material Design – This new visual language is fascinating because it systematically addresses a lot of issues we, as designers, face on a daily basis. At the same time, it’s both surprising and refreshing to see a giant such as Google publicly announce its new design direction.

Drafting Tips for Creative Wireframe Sketches – In this article I want to provide a few tips to help designers get more focused on wireframing. I like to think of myself as a draftsman in the early stages. Wireframing is about structuring the interface by visually planning or mapping out the big concepts.

20 things that could be slowing your website down – Unfortunately, the list of things that can cause users to flee a website is long, and in many instances, any one of them can be enough to turn a new customer into a lost opportunity. Here are 20 of the worst items on that list.

Do You Have a Design Checklist? – You may need several types of checklists in your toolkit: project design (print or digital), planning, execution, and printing and delivery. These lists can have overlap or not and can serve as starting points for you to create a checklist tailored to your design work.

7 Essential Techniques to Speed Up Your Websites – To fully optimize a website, you need to start from choosing a good web hosting, getting the right web server installed, HTTP caching, web server configuration, front-end optimization and lastly you can use CDN to speed up your website by storing your website content across a few geographically dispersed servers.

Tips, Tricks, and Considerations for Designing an E-Commerce Website – A business owner who’s considering a venture into the e-commerce world should not take that step lightly. If properly pursued, however, it can be one of the smartest financial decisions you ever make.

A Quick Look at the Ghost Button – After reviewing ghost buttons, it’s origins, pros and cons, and some examples, it seems that ghost buttons used in the correct way can be good for design and for sales (effective CTA).

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

How to Create a School-Themed Vector Pack in Adobe Illustrator – We have a new tutorial that will teach you how to create a nice minimalistic school-themed vector pack in Adobe Illustrator.

Best Illustrator Tutorials of October 2014 – Halloween is just around the crowd and we have today prepared the compilation that comprises of not one instead few best Halloween inspired Illustrator tutorials to leave the viewers stunned.

20 Beautiful Free Fonts from Recent Months – In today’s roundup we take a closer look at some of the most beautiful freely available fonts that have been released over the last few months.

The Designer’s Guide to Building a Brand Story – A strong brand story helps you convey the type of value that you are adding for your customers. In essence, a brand is nothing more than the story that users recall when they think of you.

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

34 Tips and Tactics to Rapidly Grow Your Social Networks – Let’s look at four. Facebook, Twitter, Linkedin and Instagram. There are many more but let’s focus on some of the majors! Here are the key tips and tactics to grow your social networks without begging for permission.

How to create the perfect call to action for your email marketing campaigns – It may be that the call to action (CTA) button you are using in your campaigns is letting you down. In this post, we’ll show you the 3 different pieces that need to come together to create the perfect CTA button for your email campaigns.

Professional & Responsive HTML Newsletter Templates for Your Business – Being ready and well prepared for mobile devices so that your email looks and renders well, irrespective of the screen size of the device in question, will help you gain an added advantage and also boost the success rate of your email newsletter campaigns.

Increase your click-through rate using these 3 principles of conversion-centered design – There’s a lot that goes into an effective email campaign, and it can be hard to know what you really need to do to make your emails convert.

WordPress

Customizing the WordPress Comment Form – Engagement is extremely important for any website, such a direct line of communication should be fostered with care. In this article we’ll take a look at some of the options we have for bending the comment form to our will.

How to Customize the WordPress Post Editor – All it takes is a simple stylesheet to create a personalized editing experience. Editor styles are commonly added to make sure the style of the theme on the front-end is mirrored in the style of the editor in the backend.

Creating Custom Page Templates in WordPress – Page templates in WordPress are a great way to add structural variations or highly customized functionality to your website. They are easy to create so newcomers can get started, but they offer enough potential to keep even seasoned professionals busy.

Add Custom Meta To Taxonomies – In this tutorial we are going to learn how we can add additional data to your taxonomies. WordPress comes with the ability to add meta data onto both the posts and user objects. These are stored in separate tables such as the wp_postmeta and wp_usermeta tables.

Simple Methods for Speeding Up WordPress – The downside of most shared hosting is that a WordPress site with a good bit of content and traffic can slow down significantly. The good news is that there are some things that we can do to boost the speed of our snail-like sites.

How to Generate RSS Feeds for Custom Post Types – WordPress is very intuitive in the area of RSS, and it also can be queried to generate RSS feeds for Custom Post Types, although it does not provide them automatically as it does for Posts and Comments.

Adding Scripts and Styles to WordPress the Right Way With Enqueueing – It is important to note however, that the way you add these scripts to WordPress is just as important as the content of these files. Instead of plopping them into the header or footer file we need to use WordPress’ enqueue functionality.

Taking Control of the CSS/JS that WordPress Plugins Load – Now we have these two single-purpose resources being loaded on the page. When you look into web performance and how to make websites faster, some of the first advice you hear is to concatenate resources.

Search Engine Optimalization, Conversions, Analytics, etc.

14 of The Best Paid Search and SEO Tools – It can be difficult to decide which search tools to use when it comes to your company or client’s paid and organic search campaigns. I have found a great selection of tools; some which are recommended often, with good reason, and others that shouldn’t be discounted.

How to Track The Impact of Your Website Redesign – Today, I’d like to share how I go about measuring the impact of a website redesign using Google Analytics to see just how advantageous redesigning your website can be.

Updating our technical Webmaster Guidelines – For optimal rendering and indexing, our new guideline specifies that you should allow Googlebot access to the JavaScript, CSS, and image files that your pages use.

Why Google Isn’t Indexing Your Site – This is the most essential SEO feature of all time. Google must index your site in order for your site get any organic traffic from Google. If your site isn’t indexed, you are lost. No one will find your content organically, because it’s not part of Google’s search index.

Keyword Strategy and your Brand – Your brand is one of your most important keywords, but it shouldn’t be your only keyword, nor should you have lots of keywords but no brand. There should be a keyword strategy behind the keywords you pick.

Tutorials

How to make a ghost button in CSS3 – These buttons are referred to as ghost buttons because they have just an outline and let whatever is behind them show through. They’re incredibly popular with startups, because they have a minimal simplicity that fits that style of site.

Animate SVG icons with CSS and Snap – After having optimized the svg code, we tried to push it one step further by animating the icon using CSS and Snap.svg, which is a javascript SVG library created by the Adobe team.

Some More Subtle Hover Effect Ideas – A second set of styles was added to the collection of subtle hover effect ideas. The old set was updated and we’ve added some fresh effects with various transitions.

Building Full Screen CSS3 Menus with Tons of Creative Demos – This article will cover how to build these complex and responsive menus using almost nothing but CSS3 techniques. The only JavaScript involved is used for toggling a class on the body element.

Resizing and Cropping Images with Canvas – In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications.

Creating A Simple Shopping Cart with React.js and Flux – In a typical e-commerce website, the product detail page has several moving parts that rely on one another and React really helps simplify and organize the co-dependency between them.

Background Reveal Scroll In Pure CSS – However, the effect is often accomplished by loading a heavy JavaScript framework and a plugin; which, as I’ll show here, are entirely unnecessary in modern browsers.

Freelance, Business and Workflow Related Stuff

You Are Not A Machine. You Are Not Alone – Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. {Geek} Mental Help Week starts today and we would like to help raise awareness with a couple of articles exploring these issues.

Why your clients don’t care about their users, and how you can make them – By helping clients understand the power of users and focus on their needs, it is possible to turn clients into user advocates. But be careful what you wish for; before you know it they will be complaining about your beautiful design because it is not intuitive enough!

4 Effective Ways to Iterate Design Work – Iterating design work is an important part of the process to produce better work. How many times has the first thing you designed been the best option? A few, but far from the majority.

How to start getting web design clients if you’re stuck in print – I think it’s awesome how many designers are still print-only. I love paper and ink. The way it feels in your hands, the smell, the way it looks under different lights. Digital doesn’t come close to the sensory experience that print design delivers.

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

Will Google Fonts Ever Be Shut Down? – But all of this begs the question: why is Google in the fonts game? What do they have to gain by hosting fonts for millions of websites for free? Is Google in this for the long haul or will Google Fonts eventually end up in the dreaded Google Graveyard?

If you want design, you have to go all-in – In the tech and startup industry, design is the new magic word. An uncountable amount of articles, essays and blog posts have been written and even greater amount of keynote speeches on the importance of design have been given.

Help! My Portfolio Sucks – What if a lot of your past work reflects times when you satisfied the client, but couldn’t sell them on your best ideas? How do you build a portfolio out of choices you wouldn’t have made?

– § –

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.44 Oct 2014)”
  1. Good list of useful articles, keep up the good work!