.. Your Daily Design Dosis

Tweet Parade (no38 Sep 2014)

| Comments Off on Tweet Parade (no38 Sep 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.

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.

SVG Fallback in Older Browsers: Alternatives to JavaScript – In many cases we can establish simple fallbacks without JavaScript. On the downside we have to ditch standards compliance in some cases, such as giving the wrong MIME type.

Making Modal Windows Better For Everyone – Well, imagine that you had to navigate the web with a keyboard. Suppose that a modal window appeared on the screen, and you had very little context to know what it is and why it’s obscuring the content you’re trying to browse.

AngularJS: One Step at a Time – AngularJS is backed by Google and is an MVC framework that allows you to define very powerful templates directly in your HTML and includes data binding and dependency injection which makes your code not only easier to write but for others to read.

7 Sassy Reasons You Can’t Avoid CSS Preprocessors Anymore – This is just an introduction to the powers of Sass and other preprocessors, but hopefully you can already see how even the basics can save you bundles of time, as long as you use them the right way.

Smarter Sass Mixins with Null – With Sass mixins we’re able to pass a list of arguments to set the values of properties. For example, the following mixin uses four variables as arguments to define the display, padding and margin properties of an element.

jQuery For Complete Beginners – Datatypes and Selectors – So you’re new to front-end development? Feeling proficient with HTML and CSS, but JavaScript is the one thing that you’re struggling with? Whether you like it or not, JavaScript or jQuery knowledge is increasingly demanded from every front-end developer.

Refining The Way We Structure Our CSS At Trello – We’ve slowly been refining the way we structure our CSS at Trello. I can firmly say it’s pretty okay now, nearing on good. This is our whole deal with CSS, broken up into the following sections. Warning: this post assumes you make websites and know some things about CSS.

A Guide to the HTML5 ‘time’ Element – Prior to HTML5 we had no element to semantically mark up a date or time. In this article I’m going to cover HTML5’s <time> element, which helps address the need just discussed.

A Look at SVG Light Source Filters – Some of the more fantastic features of SVG filtering revolve around the light source. You can apply a lighting effect to SVG and then control the details of that through one of three filter effects: fePointLight, feDistantLight, and feSpotLight.

Random Images With Flexbox & JavaScript – Human cognition is excited by small but distinct differences in experience, making randomized web page elements a simple and effective method for increasing user engagement on a site. It’s also an effect that is achieved very easily, with just a few lines of JavaScript.

Getting Started with CSS Shapes: Wrapping content around custom paths – CSS Shapes allow web designers to wrap content around custom paths, like circles, ellipses and polygons, thus breaking free from the constraints of the rectangle. Shapes can be defined manually or they can be inferred from images.

Reusable List Styles – I’ve found the above patterns extremely helpful when styling lists. They make code more reusable and help keep stylesheets organized and tidy. The naming conventions also help when communicating with other developers and designers on a project.

Why I changed my mind about Node.js – I thought it was a ridiculous idea: using JavaScript as your server-side language! I have now been using it for the last several months, and I am quite impressed! Let me tell you what made me change my mind about Node.js.

SVG animation countdown – it did not took so long and ppl made animations in different combinations. All tough most of the graphics are do-able in CSS, the morphing possibility caught my attention so much I spend all night fiddling with it.

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

Speed Index: Measuring Page Load Time a Different Way – Speed index is a relatively new method of measuring web page performance that was originally developed for WebPagetest.org. It works by measuring how much of the above-the-fold content is visually complete over time until it is 100% complete.

Simple ways to implement infinite scrolling on your website – Infinite scrolling embodies one of the ideal attributes of any good design: people can use it without thinking about it. Of course, it’s not for everyone, or every project.

Progressive image rendering: Good or evil? – There’s been a LOT of debate about which image format delivers the better user experience: baseline images or progressive JPEGs. (For the uninitiated, baseline images are images that load from top to bottom, line by line. Progressive images load in layers, starting with a blurry image, then finishing with a high-resolution layer.)

The Perils and Perks of Designing with Parallax – The parallax trend might be on the way out now, but Google Trends predicts it has some life yet. Hopefully you’ve seen from the outline above that every trend that comes and goes can be examined for the valuable, salient details.

Responsive Email Design: Benefits, How-To, Examples + More – With the growth in the usage of mobile devices, it has become quite crucial to accommodate responsive design in your email marketing strategy. That’s because when an email newsletter, which looks look superb on desktop, fails to render properly on a mobile device, respondents either hit delete or unsubscribe.

Efficiently Simplifying Navigation, Part 3: Interaction Design – Having addressed the information architecture and the various systems of navigation in the first two articles of this series, the last step is to efficiently simplify the navigation experience — specifically, by carefully designing interaction with the navigation menu.

You Are NOT a User Experience Designer – There is a fundamental misunderstanding amongst designers when they enthusiastically tell you that they’re a User Experience designer.

A Beginner’s Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App – Building well-designed websites on mobile devices is slowly becoming easier and easier. Whatever the method (responsive, adaptive, etc.), if you know what you’re doing, crafting a good-looking site is not a problem.

Prototyping For Better Products, Stronger Teams And Happier Clients – Not being able to “show” — in an efficient way — the interactions and animations that bring our designs to life is one of the common struggles plaguing our industry. The static mockups favored in our past are no longer good enough. They simply don’t do the job.

All You Need To Know About Vertical-Align – It is not very complicated once you know the rules. If vertical-align does not behave, just ask these questions: Where is the baseline and top and bottom edge of the line box? Where is the baseline and top and bottom edge of the inline-level elements?

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

9 Do’s and Don’ts of Typography – Most people think typography is all about finding cool fonts and placing them on a colored background when in reality, there is so much about this art form that is overlooked. Here is a mini bible for typography beginners to send you off with a good start.

What’s new for designers, September 2014 – The September edition of what’s new for web designers and developers includes new web apps, CSS tools, software, email templates, inspiration resources, productivity apps, jQuery resources, pattern tools, and some really great new fonts.

Every Design Needs Three Levels of Typographic Hierarchy – One of the most important elements for people looking at anything you design is the type. It needs to be clear and readable and it should direct users through a design, from most important elements to least.

An Introduction to Icon Fonts with Font Awesome and IcoMoon – Icon fonts are all the rage nowadays, with more and more developers taking advantage of them in their designs. If you haven’t yet looked into icon fonts, this article can get you started.

Essential Visual Feedback Tools For Web Designers – The creative process takes a lot of time, and web designers know it. When you factor in feedback from clients, the process takes even longer: numerous emails, revision notes, chats and meetings — that’s what it normally takes to find out precisely what the client wants.

Web Components punch list – Considerations for web component and custom control design: If your control has the stuff below covered, excellent! If not then please implement it before shouting to the world about it being the next big thing.

CSS Audits: Taking Stock of Your Code – A CSS audit is really detective work. You start with a site’s code and dig deeper: you look at how many stylesheets are being called, how that affects site performance, and how the CSS itself is written.

jQuery For Complete Beginners – Click, Hover And ToggleClass Events – Knowing how to select an element on the page is great, but even more exciting is learning how to do something with it. This post is part of a jQuery For Complete Beginners series – check also Datatypes and Selectors.

Learn About Front End Style Guides – What does work in a very similar way to brand and identity guides is no other than front end style guides. The only difference between the two is that you are creating an identity for a website instead of one for a specific brand.

What Should Experience Designers Understand About Developers? – Though the work designers and developers do in digital product design is directly related, there is often a disconnect between the two roles. While the occasional purple unicorn can bridge the divide and work effectively in both realms, ..

How Flat Design Increases Conversion Rates – There are many arguments for and against flat design, so in this article I wanted to take a quick look at how flat design can actually affect your bottom line. When it comes to arguments, nothing speaks louder than actual dollars.

Delving into Landing Page Design Trends – Following these trends can help, along with analyzing other successful landing pages that catch your attention. Think about how catchy landing page designs make you feel and why they draw your curiosity further.

12 CSS Effects Libraries For Developers – In this showcase, you can find 12 excellent CSS3 effect libraries that you can use to make your web designs look even more eye catching and attractive. These CSS3 effect libraries let you create interactive designs without the need of Flash, Silverlight or After Effects.

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

The Complete Guide to Building Your Personal Brand – Branding on a business-level is common, but today branding is becoming just as important on a personal level. After all, you might work for a business that works with other businesses, but it’s people working with people and that’s what makes business relationships valuable.

5 Deadly Mistakes a Graphic Designer Shouldn’t Make – It’s a competitive world out there for a graphic design agency, so sometimes it might seem like you need a perfect resume to even have a shot – there’s always another designer who’s willing to do it cheaper or faster if you don’t handle yourself perfectly.

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

Increase Traffic to Your Site With These Tried and Tested Blogging Tips – High quality articles will also generate more incoming links to your website, strengthen your brand, and increase loyalty from readers, existing customers, and potential customers.

3 Ways to Use Social Media for Business – Everyone uses social media differently, and the approach you use should be based on your goals. In this article I’ll share three ways to use social media to get the results you want for your business.

14 Social Media Marketing Tools Recommended by the Pros – Do you want to know which tools today’s social media professionals recommend? In this article you’ll discover 14 tools to add to your social media marketing toolbox and why you should consider using them.

The Secret Art of the Follow-up Email – For years I’d been doing something that just came naturally to me when sending sales or pitch emails. That thing was sending a follow-up email. And I recently realized that more than 75 percent of the 2,000 deals I’ve landed over the years have come from sending follow-up emails.


How To Use SSL & HTTPS With WordPress – Setting WordPress to force the use of secure transfer protocols and deciding when to force it takes a little work, but is not that hard. It also requires making some decisions about when to require a secure transfers of information.

Creating 301 Redirects With WordPress (and How it Boosted Our Traffic!) – In this post, we’ll look at 301 redirection, some methods you can use to help keep your site content fresh for SEO best practice, and how we’ve used 301 redirection on our blog to increase traffic.

Options for SSL in WordPress – This article will show you how to implement SSL into your WordPress website but won’t go into details of how to buy and set up certificates with your web host, as this changes from provider to provider. With the ever increasing focus on web security, SSL certificates have started to become common practice when setting up websites

An Introduction to WordPress Global Variables ~ A WordPress global variable is a variable that holds information generated by the application. These global variables can be accessed during the execution of the application and during the page life cycle.

Extending WordPress Taxonomies – You can access your individual term using get_term($term_name,$taxonomy_name) and then from there you can use your slug as we have done to access additional information pulled from the WordPress options table.

How To Create WordPress Post Formats – Custom Post Formats is a feature that was first introduced back in WordPress version 3.1. Basically, post formats act as a different way of grouping posts, allowing you to define the kind of post content you are publishing.

The WordPress Developer’s Guide to Security: Security & Backup Plugins – Though WordPress Core is fairly secure to start with, you might want to consider a security plugin to ramp up effectiveness and to protect your site even more.

3 common WordPress errors, plus how you can fix them – Some of the tips contained within this article can be applied to other errors, so even if your site hasn’t fallen over, you might learn something useful for the future…

Understanding the JSON API, XML-RPC, and Remote Publishing to Your WordPress Site – One of the hallmark features of WordPress 4.1 is likely to be a new way to remotely publish to WordPress: the hallowed “JSON REST API.” But for a lot of people, I know that that sounds like a whole lot of random meaningless letters.

Figure Shortcode for WordPress – I use the featured image feature of WordPress to display the hero image on blog posts and use a figure element to encase it with an optional caption. I knocked up a quick Shortcode to see if I could get round the issue and it seems to work pretty well.

Search Engine Optimalization, Conversions, Analytics, etc.

The Big List of SEO Tips and Tricks for Using HTTPS on Your Website – It’s rare that Google reveals any of its actual ranking factors, so it came as a big surprise when representatives announced they would reward sites using HTTPS encryption with a boost in search results. HTTPS isn’t like other ranking factors. Implementing it requires complexity, risks, and costs.

How to Do Link Building for a Brand New Website – Now that your website is live, the real work has begun—the work of building links and authority. Your website is only as awesome as it is authoritative. So, how do you take your shiny new website from its new-kid-on-the-block status and give it some link love?


How we designed and coded an animated banner ad with no images – Between people’s banner blindness and the low click-through rates associated with banner advertising, we knew we had to do something a bit different to stand out.

Off-Canvas Menu Effects – Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls.

Freelance, Business and Workflow Related Stuff

How To Build A World-Class Design Portfolio – Six tips for building a portfolio that lands the job. Plus, peek inside the portfolios of designers at Facebook, Dropbox, and more.\

Ask A Freelancer: How Do I Know If I’m Good Enough to Make a Living? – Being a freelancer is in many ways like taking a leap of faith, and you won’t clear the jump if you don’t have faith in your abilities. The first time I knew I was good enough to make a living as a freelance writer was the moment I got my first paying client.

Doing away with bad design ideas, and moving on to the good ones – Too often, we will labor over work that we know, deep down, is flawed, but that we somehow hope against hope that we can fix. Sometimes we can.

Which Revenue Model Should You Use For Your Business? – What revenue model do you use for your business? If you’re a freelancer you likely sell services to clients, but there are additional revenue models you can use in addition to or instead of selling services.

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

Visual Design is Not a Thing – The process of designing a new wayfinding system for a museum requires research, prototyping, observation, and storytelling. Only at the very last does it involve the “graphic” in graphic design.

Subjective And Objective Design Choices – There’s a duality between the internal subjective and the external objective that’s at play in everything we do. Understanding this is a step toward letting each do what it does best when conditions allow.

The Boring Designer – Maybe it’s born out of seeing apps choose flash over function, or trying to understand just one too many indecipherable icons-as-buttons. Whatever the case, here’s an ode to the boring designers among us.

– § –

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.