.. Your Daily Design Dosis

Tweet Parade (no.8 Feb 2014)

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

How to Encode and Decode Strings with Base64 in JavaScript – Encoding and decoding a string in Base64 with JavaScript can be quite handy. It’s in no way meant to be a secure encryption method, but it is extremely useful for writing obfuscated strings.

How SVG Line Animation Works – I bet all of you have seen that little trick where an SVG path is animated to look like it’s drawing itself. It’s super cool. I have very little to add, except my brain just kinda figured it out, so I thought I would explain it one more time the way it clicked for me.

Going Fullscreen: Scale and Define Focal Points for Responsive HTML5 Video – Because video is central to the site experience, video quality was a top priority. We couldn’t risk cropping out critical subject matter, but we still needed video with a 16:9 aspect ratio to fill the screen.

Designers & Developer’s Guide To .htaccess – Among the many various tools for customizing your web server, the .htaccess config file is a tremendous asset. You can quickly reset document types, parsing engines, URL redirects, and many other crucial features.

How to use Handlebars – Handlebars helps you with that by dynamically generating your HTML. It helps you get into using the View/Controller pattern while keeping your code cleaner and more maintainable.

Unicode: A Beginner’s Primer – Using Unicode you can create icons that are resolution independent, have virtually no download time and can also be styled with CSS. In this article, I’ll run you through the basics, as well as some of the interesting things that you can do with Unicode.

Kickstart Your Project With INIT And Grunt – Whenever you start a project, you have to repeat certain tasks and set up certain structures: create new folders, choose a framework, set up your development tasks. But configuring settings once and reusing them would be simpler.

“Scroll-Jacking” in Full Screen – We abandoned traditional scrolling because allowing the bottom half of one slide to appear with the top half of another would have undermined the intended experience.

5 surprisingly painful things about client-side JS – The title of this post previously began “Why we left AngularJS: …”, but that was removed because these points are generally applicable to single-page JS app frameworks.

Stackicons: Doing More with Icon Fonts – One big advantage SVG has over icon fonts is full color. But icon fonts don’t have to be limited to just a single color. By overlapping two or more elements we can create unique “multi-color” icons with a contemporary flat look.

Supercharging your Gruntfile – In this article, we won’t focus on what numerous Grunt plugins do to your actual project code, but on the Grunt build process itself. We will give you practical ideas

The fall and rise of SVG – how SVG is more relevant than ever – So let’s take a look at why it’s become more relevant among today’s web technologies and the techniques that are making SVG easier to include as part of modern web builds.

Get Twitter and Facebook Counts with JSONP – I had thought that both Twitter and Facebook required authentication to retrieve basic post counts, but it turns out you can grab those with JSONP.  Here’s how you do it.

A collection of my 6 favorite JavaScript one-liners – In the world of JavaScript, less code == better than. It’s the only reason that code minification is so popular these days. So here is a compilation of useful and compact functions that I’ve used over the years.

Rocking and Useful jQuery Code Snippets For 2014 – Today I’m sharing some rocking jQuery code snippets from 2014. In my point of view, these code snippets are part of every web development project nowadays.

Making Accessible Links: 15 Golden Rules For Developers – Screen reading applications offer only limited ways to interpret a page. One common method is to generate a list of links (without context) to determine the content of the page.

Usability, User Experience, Responsive Web Design, Mobile, etc.

8 Ways to Add a Responsive Navigation Menu on Your Site – In this post, I’ll discuss a few excellent open source projects for building responsive navigation menus. There are many options out there, so for convenience, I narrowed it down to just 8.

A counter statement: Putting the CSS in the head – A conclusion Guy Podjarny makes is that the “HTTP overhead of a request & response is often ~1 KB, so files smaller than that should definitely be inlined” which leads him to the statement that “testing shows you should almost never inline files bigger than 4 KB”.

47 Useful Responsive Web Design Toolbox – Today, we are presenting some very handy and useful responsive web design toolboxes for your responsive websites. Hope you will like this collection and this collection proves to be the best and helpful for you.

4 tips for making gooey GUI | The Pixel Lab – Web and mobile applications are everywhere and they’re often very different. This being said, there are a few things that you can keep in mind the next time you’re tasked with designing a slick new interface.

Mobile Menu AB Tested: Hamburger Not the Best Choice? – A flat hamburger icon may not be ideal on a responsive website. Using the word MENU (and making it look like a button) could be more helpful for visitors. This does not mean that users do not understand the hamburger/sandwich

Responsive Design Frameworks: Just Because You Can, Should You?– The next time a client wants a bit more in their design but is stretched for budget, perhaps it’s a good idea to consider a responsive design framework after all.

Pragmatic UX Techniques For Smarter Websites – Let’s try to figure out which user experience techniques are useful for startups, in-house teams, big corporations and anyone who wants to improve their website, product or service.

How to use icon fonts in your mobile apps – The use of icon fonts can have an incredible impact on the quality of your native app development. Considering the scalability of icon fonts, it’s almost possible to forget about screen densities or resolutions when designing for any kind of mobile device.

The attributes of usability and how to exploit them – The importance of a strong online presence exponentially increases as time goes on. Companies need to follow their audience into the digital space and provide them with the optimal experience online.

Image sprites or data URIs? Icon fonts or SVGs? A Grunt workflow for the ‘gold’ standard – This post looks at different data on the sprite versus data URI question and how to configure a couple of automated Grunt tasks to produce SVG image sprites and fall back PNG sprites ..

Tricks with Flexbox for Better CSS Patterns – The basic idea behind flexbox is to allow the containing box of elements to resize and reorder those elements to best fit the container in an appropriate way.

Lean UX – How to Apply Lean Principles to User Experience Design – Enter the Lean UX practice, which allow us to remove waste from the UX design process while letting designers focus on what works instead of having them worrying about features and documents.

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

An Introduction to Flat Design – Look at every design blog, industry website, newsletter and other publications, and you’ll see one phrase come up again and again- flat design. But what is flat design?

Defining Awesome Web Design: Is It only About the Visuals? – Website design is 1/3rd art, 1/3rd science, and 1/3rd business — the demands for websites that work stretch into all the three components and that makes it really challenging to develop effective, result-oriented, and profitable websites.

71 Most Effective Ways To Build A Better Site – Are you looking to improve and optimize your chances of success? Do you need inspiration to get your project to the next level? Below is a list of 71 simple but effective actions that you can take today to improve your site.

2014 Will Be Year of Parallax – A heavy parallax website should be avoided. If the site does not load quickly, users will not wait around to see your content. Create the site as leanly as possible, taking special care with images and effects.

What’s new for designers, February 2014 – The February edition of what’s new for web designers includes new web apps, icons, color resources, webmaster tools, graphics programs, CSS frameworks, JavaScript resources, and some really great new fonts.

11 Fresh Useful Tools for Web Developers – The latest web developer tools which provides the various kinds of features always make theme most popular among programmers that help in large projects.

How To: Create A Successful WordPress Portfolio Website – Building a great portfolio site takes time, effort, and a lot of experimentation. You should always strive to make a lot of small tweak to your site and see how it goes, especially as you get to know your audience is.

Why I removed my sensitive files from Google – This blog post reports on a ClickJacking vulnerability in Google Drive, which has not been fixed in more than 5 months. I will discuss how this vulnerability was discovered in a semi-automated fashion, what caused the vulnerability

The secrets of successful ongoing development – Persuading management that your website needs ongoing investment is only half the battle. Now you need to make sure it generates a return. Let’s begin by really focusing on the user.

Sub-Sub-Category Links: a Vital Feature in E-Commerce Navigation – When the user is able to easily work out which navigation paths to pursue, they are obviously less like to drift astray and instead begin to feel in control of their product browsing.

20 Popular jQuery Plugins That You Can Configure Without Any Coding – I have collected some popular jQuery plugins that can be configured in less than a minute! They can be easily implemented by selecting the plugin options that you need by using Bitconfig user interface.

10 things to consider when designing a business website – The 10 steps I’ll outline here cover the key points you should be thinking about when creating working with your clients in order to really meet the needs of their business.

Design Systems: Building for the Future – Ara is a UX Engineer at Media Temple and worked on the recent redesign of mediatemple.com. Here he shares the ideas, approach, and tech behind that work.

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

Type Quest – Type Quest is designed to help educate graphic designers and web designers understand the power of OpenType in Webfonts while giving insightful information from current professionals in the industry!

10 Tips for Designing with Type on a Photo – You have to have the right photo, a good eye for typography and know what you want to accomplish to make the most of adding type to an image. If you feel like you are ready to take on the challenge, here are 10 tips for making it work.

12 Most Creative Ways to Promote Your Professional Brand—Without Social Media – You don’t have to be a marketer to master the art of getting people to know—and care—about your brand. You have more resources than you think. And while social media can do a lot to get your name out there,Blogging, Social Media, Writing, Content Strategy, Email, etc.

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

Why Use Social Media Signals and How They Impact Search Engine Ranking – I want you to understand that SEO, social media, and content marketing are all under the umbrella of Organic Marketing and as such, there is no need to separate them for any reason.

How to Steal Your Competitor’s Twitter Followers – Over the years, I’ve learned a few strategies that have helped me grow my Twitter accounts, which, in turn, has helped generate traffic and – more importantly – revenue.

Have a Blog? LinkedIn Wants Your Copy – As of now, 25,000 members will have the ability to publish content on LinkedIn, the company says. LinkedIn will be expanding that capability to all members “over the next few weeks and months to come.”

Nothing left to say? The decline and fall of blog comments – We turned to social networks for our messaging, and the same process is now being applied to blog comments; where once we posted a thoughtful response, now we tweet a short quip.


Posting Code Blocks on a WordPress Site – So you’ve installed WordPress and want to blog about code. Yay! You’re a hero and I thank on behalf of myself an coders everywhere. Here’s what you’ll need to do and think about to actually get publishing blocks of code.

What Do WordPress Professionals Want to See In 2014? – As a blogging and content management system platform, WordPress has been continuously upgraded since its inception.Below are the results of our latest roundup from leading WordPress professionals

14 Handy WordPress Hacks Every Developer Should Know – I’m always discovering new tips and tricks that make WordPress easier and fun to use. In this round up, I’ve put together a 14 handy hacks, some you may have come across before, others that may be new to you

Mastering WordPress Meta Data: Working With Loops – The standard WordPress loop is a while loop, as in “while there are items to loop, continue the loop.” Often times, when working with meta data, it’s easier to work with a foreach loop.

How Many Of These 7 UX Blunders Is Your WordPress Site Making? – Somehow it slips through the cracks, or perhaps an intransigent client forces you to commit a crime against user experience and it’s only when we start looking at why a site is not performing as well as we hoped

5 Quick Ways to Speed Up Your WordPress Site – Optimizing your site can make a big difference in site speed, encouraging them to stick around and engage with your content. This is a quick round-up of simple measures you can put in place to speed up your pages.

How To Extend A WordPress Plugin Without Losing Your Changes – The mantra of never editing core WordPress files should be observed for plugins and themes. The goal is to extend or remove functionality without having those changes disappear after an upgrade.

WordPress: How It Came To Be And Where It’s Heading – [Interview With Matt Mullenweg And Mike Little] Matt and Mike participate in interviews for this post about WordPress, including its history, community and future.

Search Engine Optimalization, Conversions, Analytics, etc.

How to instantly establish trust and authority with your website -Trust is something you have to earn, but impatient customers are ready to let you earn it easily. Here are a few ways to quickly earn their trust.

5 SEO Tips for Bloggers – So, here are 5 SEO tips for bloggers that will help you achieve a higher rank in search engines and you can enjoy some extra visitors and hopefully more subscribers too.

The Complete Beginner’s Guide to SEO – In this post, we’re going to break it down in the complete beginner’s guide to SEO: what SEO is, how it works, what factors affect search and what sorts of changes you can make today to improve your search optimization.

Originative Web Designers: Best Resolutions in 2014 for Search Engine Friendly Websites – 2013 steamed up much heated discussion between artistic web designers and dedicated search engine optimizers, but who won the debate still remains a question. The reason is pretty simple!!

Six Tips to Creating the Perfect CTA – The secret behind gaining leads and driving viewers towards your company’s offers is not such a secret anymore! Calls to action, or CTAs, have been refined throughout the years to capture readers’ attention and persuade them to click and submit.

Images Really DO Increase SEO, Here’s How -When crafting an SEO-friendly piece of content, images can often be an overlooked aspect. Sure, they will be used for their aesthetic qualities and to break up text when needed, but images have untapped potential when it comes to bringing in visitors to a website.


Make a Flippin’ 3D Countdown with CSS & JavaScript – The trick is to take one of the next cards and hide it, and take the opposite current card and flip it forward towards the user. This makes it invisible. Then, we start juggling states.

How to Create Five Simple Hover Effects for Your Navigation Links – This is a quick tutorial about creating simple hover effects that would be best suited for links within a navigation.

Building a Responsive Slider using Flexslider and Animate.css – Display a slideshow in your website is a one way to attract the visitors attention, beside that a slider is a very effective way to display your important content in the limited space.

Freelance, Business and Workflow Related Stuff

Your 60-Hour Work Week is Not a Badge of Honour – As you dig into the 60-hour work week, you realize it is a problem. Not just for the obvious reasons either, like work/life balance, burnout, how unhealthy it is, errors that come with being tired and so forth.

Let Customers Do Your Marketing & Other Cool Uses for Testimonials – Let’s look at a few different examples of how testimonials can improve your website and drive more sales. We’ll also break down the most important elements of an effective testimonial.

Should Designers Be Obligated To Explain Their Process? – After all, most people who outsource a service don’t expect to “get” what’s going on – that’s why they outsourced it! But for some reason, design is always the exception. Why?

The 4 Things No One Tells You About Entrepreneurship – The purpose of this article is not to give you the history of entrepreneurship but to share a realistic picture of being an entrepreneur that’s outside of the conversation in the popular media — the real story.

6 Powerful Reasons Why You Need to Network with Your Freelance Peers – Personally, I think that the benefits of networking with freelancing peers far outweighs the disadvantages. In this post, I’ll provide six reasons why I think you should network with other freelancers.

Marketing Your Freelance Design Business with Behance – Finding new clients can be a challenge, but one of the best ways to get your work and name out there is by using Behance, a creative community with one goal in mind – to remove the barriers between talent and opportunity.

Why you’re designing for the wrong audience (and how to fix it) – Your work has to function the way the clients want, and speak primarily to their audience. Clients pay your bills; your design peers do not. Unless you are working for a designer, the opinion of other designers doesn’t really matter.

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

Why you should move that button 3px to the left – How do we convince our engineering and product counterparts to care about design fit and finish? I’ve struggled with this issue many times. Here’s what I’ve learned.

Faking the Shot – If more designers can de-couple their egos from their work, and use the platform to participate in more challenging discourse, we can stop misrepresenting and devaluing the young profession we’re building together.

Creative Direction – Creative direction is a tricky thing to isolate and define. There’s a lot of overlap between creative direction, art direction, and design, so it’s no surprise that the words are often used interchangeably.

The Dribbble Divide – It’s that time of year again. My Twitter feed the last day or two has been alight with folks arguing over the merits of Dribbble.

Why Your HTML And CSS Mastery Are Not Enough – It’s in our best interests to learn a wider set of disciplines and appeal to different segments of the market that will still appreciate custom design.

– § –

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.