.. Your Daily Design Dosis

Tweet Parade (no.05 Jan/Feb 2014)

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

Automate all the things! An introduction to Grunt – Grunt is a JavaScript task runner which helps you automate repetitive tasks. In this blog post I will walk you through setting up a starter project for static websites with Grunt automation built in.

How To Use Custom Properties For Cascading Variables – Yes, variables are coming. Not quite yet, but they’re coming. Firefox nightly is currently the only browser to offer support, but variables are on the way.

Why is Progressive Enhancement so unpopular? – When did the industry stop caring about this stuff, and why? We spend hours in test labs working on the best user experience we can deliver, and then don’t care if we deliver nothing.

CSS Regions Matter – Whether or not CSS Regions can be used to create multi-column or responsive layouts, the fact remains that, unlike Flexbox, Multi-Columns, and Grids, CSS Regions are not a layout feature.

What’s with putting the CSS in the head? – Placing your CSS within the head of your HTML page does increase the performance of your web page. I feel it is only a matter of time before this approach becomes a common practice.

Using HTML’s kbd, samp and pre elements – I was recently taking a look at the W3C‘s HTML5 specification when I noticed some elements I hadn’t come across before that are used to markup keyboard input and program output: kbd, samp and pre

Why Native CSS Variables Will Be A Good Addition – Javascript never sees preprocessed variables. It only sees the resulting processed output. I think being able to read and directly manipulate variables opens up interesting use cases. This alone makes it worthwhile to add variables to css.

How to use the @supports rule in your CSS – Although the cascading nature of CSS lets us provide fallbacks for many CSS features just by writing multiple declarations, sometimes we need more granular control over what is applied

Learning SASS: A Beginner’s Guide to SASS – Thanks to the CSS pre – processor, it’s now possible to write concise CSS codes without repeating each of them again and again. For this tutorial I will talk about SASS first and then on a separate tutorial, I’ll talk about LESS

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

Pragmatic UX Techniques For Smarter Websites – Should you not start it unless you are fully dedicated, or should you embrace it in the process as soon as possible? Are all designers also user experience designers, or is it a separate expertise?

Super simple off-canvas navigation – As I’ve found documentation for this technique to be a little bit on the lax side online, I thought I’d share how I accomplished it. The code used is almost entirely CSS, using only 3 lines of jQuery.

Best Responsive Web Design Tutorials – Check out these useful responsive web design tutorials and follow the step-wise procedure of getting acquainted with responsive web designing. Obviously, you need to learn one thing at a time else it can prove to be a failure.

Is Responsive Design Still King in Today’s Mobile Age? – Many designers, SEO experts, and even Google recommend a responsive design, rather than just an app or a separate mobile version of a website.

The 10 principles of interaction design – In that time and experience I have come to know that there are a few key things that make good interaction designs and designers. Here are 10 key rules that make good interaction designs and designers

When Design Best Practices Become Performance Worst Practices – Chances are, you’ve accidentally made one of three common design mistakes, and these mistakes have affected how your pages load, which ultimately hurts page views, bounce rate, conversions, and pretty much every business metric you care about.

Optimising Front End Performance for Mobile Devices – The ideas in this article are basic but will get you on the right track when it comes to sniffing out causes of poor performance.

Boxes That Fill Height (Or More) (and Don’t Squish) – let’s just try and focus on one thing that flexbox solves very nicely: the ability to have an arbitrary set of boxes fill up all the available height of a parent box. And not only that, but expand beyond that if needed (not squish them to fit).

Make Your Mobile Site Lightweight & Beautiful: UX Approach To Eye-Candy – in a bid to provide users with exceptional experience, you often need to find a proper balance between visual presentation and mobile context.

Debunking the UX myth. Over again – What are really the differences between a UI and a UX designer or how to forget vanity titles and use logic instead.

Responsive Design is Still the Future of Web Design – One the benefits of committing to learning responsive design now is the bleeding edge adopters have already found several pitfalls of the practice, and can advise around them

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

Simple Yet Important Cross-Browser Styling Tips Everyone Should Know – If you’ve been developing websites for a long time you might agree with me that IE8 and the Jurassic lower versions of IE are the one of the web designer’s and developer’s nightmare.

Best jQuery Plugins of the Week – Javascript frameworks, jQuery plugins you may call them are proving to be successful in achieving the target for which these are continuously being rolled out.

What is Flat Design (and how do I do it)? – Today’s article features not only a breakdown of the flat trend, but we’ll also run through two mini-tutorials to get you off on the right (flat?) foot in Photoshop.

Must Have UI Design Tools and Resources For Web Developers – Today, we will be sharing with you a great collection of some essential UI Design Tools & Resources and these will prove to be really beneficial for all designers.

Adobe Illustrator Workflow For SVG Production – In this article, I’ll look at setting up and working with Illustrator with the goal of producing useful, editable and highly compressed SVG graphics.

Reversing course, Google rejects Adobe Web publishing tech – The CSS Regions would have helped ease magazine-like layouts on the Web. But Google’s priority now is on performance, not features — especially mobile browser performance.

URL Rewriting for Beginners – URL rewriting can be one of the best and quickest ways to improve the usability and search friendliness of your site. It can also be the source of near-unending misery and suffering.

Hand Coding A Personal Website – Instead, we’ll be exploring the nuts and bolts that hold your website together – the things that are most often taken for granted when relying on a CMS.

Why you must create a compelling call to action – There is a current trend for product homepage designs to be very long, requiring users to scroll a good deal. This is absolutely fine, but make sure the page’s call to action is pretty prominently placed.

40 Tiny Web-Based Apps & Tools for Web Designers – In this post we have collected a varied assortment of tiny web-based apps and tools that have been built with the purpose of solving a specific solution and act as precious time-savers for web designers.

Time-Saving Tools and Resources for Freelance Designers – A collection of our favorite different tools and resources that any freelance designer will find extremely helpful.

Create the perfect website redesign – Redesigns often suffer from poor planning and preparation, and lack clear project goals. For instance, Hubspot reveals 37 per cent of those surveyed didn’t measure any metrics for their last website redesign.

10 Great New Freebies From January 2014 – This post is a roundup of latest free web design resources released during the month of January. This collection includes ui kits, backgrounds, fonts, icons, themes, and mockups.

10 Essential Tips For Designing Your Small Business Website – Online business is very trendy these days and is a perfect tool for targeting maximum number of prospective customers. The main goal of each business is to improve their sales and engage more customers.

10 Drastic Ways to Avoid Website Obesity – Several of the suggestions are controversial and won’t be for everyone but, at the very least, I hope these make you more aware of page weight issues…

Adaptive Backgrounds for jQuery Colors Your Website Automagically – Adaptive Backgrounds by Brian Gonzalez analyzes the colors of the images in your website, determines which ones are dominant and colors the background of the element containing the image accordingly

Latest Apps and Tools of the Week [25th January-31th January] – we are here with the list of latest best Apps, tools and online portals that promise to ease the tasks of designers and developers to handle various projects.

Avoiding ecommerce deployment disaster: 10 areas to watch – Replatforming and deploying major updates are some of the most stressful moments for an ecommerce team.

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

What’s really wrong with Squarespace Logo – Within hours of the service launching, social media was aflame with designers decrying the slow erosion of design standards and accusing Squarespace of deliberately undermining their industry.

40 Recently Released Free Fonts – For today’s post we have collected 40 recently (last 4-5 months) released fonts that will hopefully make your search that little bit easier (free to use in both your personal and commercial projects).

Guide to the Golden Ratio – The Golden Ratio is a simple theory that can help make your designs pleasing on the eye. There’s a common mathematical ratio found in nature that can be used to create pleasing, natural looking compositions in your design work.

Why Mouse Users Should Ditch Photoshop and Draw in Illustrator – Vector programs save their files as a set of rules. We can say a line is saved as start point, end point and its width. When you move one of the points, the line is rendered once again without any loss.

How to Create A Perfect Logo in 11 Steps – We see many logo redesigns and modifications lately but only a few are nailing it. Is there a special formula to create the perfect and effective logo for a brand?

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

16 Rules to Make Your Email Rock – The beauty of email marketing? You can test like crazy so you find that all-important sweet spot where you maximize conversion. And sending email is inexpensive when compared to most other forms of marketing.

Change your focus and design “Content First” – By adopting a content first design process your projects will become much more efficient with fewer design iterations, more accurate design mockups, less time wasted while waiting for assets and from the client’s point of view, ..

WordPress

The Perfect WordPress Inline SVG Workflow – First, let’s drop the desired SVG into an images folder just inside the root of our theme. Now, rename the SVG to inline-[filename].svg.php. So, if its original name was logo.svg, name it inline-logo.svg.php.

Rethinking the WordPress Editor – Over the past couple of weeks there have been a couple of feature tweaks and improvements in the mix for WordPress’s content creation experience.

The Beginner’s Guide to WordPress SEO by Yoast: Final Tweaking – In this tutorial, you will learn the final steps to configuring the WordPress SEO plugin with the ultimate goal of making it as rock-solid as possible for your blog.

Speed Up Your WordPress – How to Save Images Optimized for Web – Are you saving images wrong? Most beginners don’t know how to save images properly which can have a huge impact on website speed. In this article, we will show you how to properly save images optimized for web.

How To Deregister & Dequeue Style Sheets – WordPress includes 2 functions which you can use in your child themes functions.php file to deregister and dequeue style sheets for themes and plugins.

Essential WordPress Tips and Tricks – There are tons of documented WordPress solutions out there and they are free technical support to me. Again, another round of WordPress coding tips and tricks that I have been using in my projects recently.

Goodbye WordPress: 2014 Will Be the Year of the Flat-File CMS – Ditching WordPress for simpler CMS solutions like Ghost, Kirby, Statamic and Jekyll. WordPress is a great CMS but for a lot of sites it can be complete overkill.

Using query vars in shortcodes – My signup form was created using Gravity Forms, so my idea was to add a query var to the confirmation, which was set to redirect to a page (the client area) after submitting the form.

The Case for Using WordPress Post Formats to Encourage More Blogging – Post Formats are a highly useful, yet under utilized feature. But we’re not taking advantage of them when they could make our blogging lives so much more fun, engaging and motivating.

Search Engine Optimalization, Conversions, Analytics, etc.

How Typography Affects Conversions – In this article, we are going to take an in-depth look at the world of typography and its ability to affect conversions. Of course, a great way to test the effectiveness of typography is to A/B test!

How We Increased Landing Page Conversion by 16%: Lessons Learned from Redesigning the Buffer Home Page – It was about connecting with users in order to get a better understanding of their needs and their desires, and knowing what features are best suited to make their lives easier.

What is conversion rate optimisation (CRO) and why do you need it? – Whatever the ultimate point of your website is, a conversion is the successful completion of that action. The ‘conversion rate’ is the percentage of traffic to your website that is completing that specific action.

3 Steps to Kick-Start Conversions on Your Landing Pages – The trick is to keep things simple, use the right tools and, most important of all, systematically analyze your landing pages instead of doing twenty different things at the same time.

How to Reduce Website Bounce Rate and Make Your First 10 Seconds Count – Bottom line is you need to improve your website’s user experience to capture visitors’ attention. Your goal is to create a connection that will buy you more time to connect with your audience and convince them of your message.

Tutorials

10 Awesome Parallax Scrolling Tutorials with Code – Parallax is just a like a template which, if added to your content makes it look beautiful and at the same time interesting enough so that the person takes the time out to visit your place again.

Scattered Polaroids Gallery – A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides.

Freelance, Business and Workflow Related Stuff

The Home Office – As an experienced work-at-homer though, I can attest that those romantic notions shrivel and die in a pit of unproductive despair as social media claws at your business dreams and 9 to 5 slowly becomes noon to midnight.

4+ Effective Time Management Systems to Help You Become More Productive – As freelancers we have a lot to do. Not only do we have work to do for our clients, we also have administrative tasks to perform for our freelance businesses.

Why Designers Should Get Paid for Proposals – It’s not hard to spend several work days working on a proposal to try and win a client’s business, only to find that they were just comparison-shopping around and had no real interest in hiring your firm.

5 research mistakes and why you must avoid them – To ensure that you’ll bring valuable insights to the table at this critical stage and throughout the course of the work, make sure to avoid the following pitfalls.

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

“Just” – I don’t envy those just entering the field of web development. So think twice before suggesting someone “just” [insert any task here]. You just might make them feel like an idiot.

Ten lessons from a maker – Goliath’s have more meetings, more committees, and more red tape. More ideas being killed by research, more to lose by taking risks, and more outdated business models that they are stuck in.

You Might Not Need jQuery – jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you’re developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency.

– § –

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.