.. Your Daily Design Dosis

Tweet Parade (no.31 Jul/Aug ’14)

| Comments Off on Tweet Parade (no.31 Jul/Aug ’14)

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

Replicating preprocessor color functions with plain old CSS – I was ruminating on Sass’ lighten and darken functions today morning and wondered whether there was a way to do this via native CSS.

HowTo: “Self-Drawing” SVG animation – There are a couple of options to give users a great experience on your website. The most comon would be text and images/illustrations. Work always and doesn’t really need to be upgraded. But how about some more interaction?

8 Tips to Help You Get the Best out of Sass – When used effectively, Sass helps to build scalable and DRY CSS. When used incorrectly however, Sass can actually increase file size and add unnecessary or duplicate code. Below is a series of hints and tips to help you get the best out of Sass…

BEM modifiers: multiple classes vs @extend – [TL;DR] multiple classes is ok, but restrict yourself to a single modifier class and a single state class or state data attribute per element

Full-width pinned layouts with flexbox – Learn how to use flexbox to pin two things to opposite ends of the viewport with a heading centered in between. Using media queries and flexbox’s re-ordering capabilities, we can make this layout pattern even more responsive.

Controlling CSS3 Animation with steps() Function – In this article, we will once again dive into CSS animation. This time, we are going to discuss a CSS animation function, steps(), that enables us to control the animation’s movement — don’t freak out, it’s not as puzzling as it sounds.

How To Make Tilt Scrolling That Doesn’t Suck – This is the biggest design challenge when implementing tilt scrolling. Tilting is relative to some “zero” point — tilt forward from that angle to scroll up, and tilt back to scroll down.

Quick Tip: Sticky Navigation, Without the Awkward Jump – Sometimes, however, when a navigation bar is made sticky, there’s no allowance made for the fact that it’s removed from the document flow, causing an awkward jump as the page content shunts upwards

Load CSS or JS Files Simply & Asynchronously – Ever wonder about the simplest, fastest way to load a CSS file or a JavaScript file asynchronously? Over the years we’ve been using and improving a couple of basic functions, which we call loadCSS and loadJS, that do just that.

Vertical align anything with just 3 lines of CSS – With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.

Animating SVG text On A Path – In this post we reviewed an introduction to both the <textPath> and <animate> elements which hopefully gets you started using these advanced SVG features with little frustration.

The First CSS Variable: currentColor – Using currentColor in your styleheets is an excellent way to reinforce best DRY CSS practices, reinforce design cohesiveness, and prepare yourself for migration into pre-processors.

How to Use CSS3 Blending Mode [CSS3 Tips] – Blending Modes is a collection of modes that enables an object to blend with other objects, and thus producing contrastive output of the mix. If done correctly, Blending Modes could output a very enticing result, like this.

Modules, a Future Approach to JavaScript Libraries – But the web has evolved, APIs are improving, standards are being implemented, the web is a very fast moving scene and I’m not sure giant libraries have a place in the future for the browser. It’s becoming a module-oriented environment.

5 things you won’t believe are only built with CSS – I’ve been on a journey for the past year or so, forcing myself to create components with pure CSS. The following techniques are essentially solutions to mimic JavaScript click events, but for this article we’re pure CSS!

The Simple Intro to SVG Animation – This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery.

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

The Principles of Performance by Design – First, we must understand and acknowledge that performance is our responsibility when we create websites. We need to treat it as a critical matter alongside design, development, and marketing.

A UX Idea: I know where you are aiming! – This is how I decided to create a dedicated query plugin, jquery.aim. It simply calculates where the mouse cursor is going, find the correct element according to a calculation and assigns hover/click classes or calls events before user reaches the target element.

Is Mobile Bringing About the Death of the PC? Not Exactly… – While there is no doubt that the growth in mobile has been dramatic, for the most part it is not coming at the expense of desktop computer usage.

Consider People with Disabilities in Your Projects – I strongly believe in the use of usability in startups and creating a more democratized and inclusive web. However, this is not the case in for most applications, where they designate most of their resources in flashing animations that don’t add anything to the application itself.

Is your Responsive Design Mobile Website Delivering Acceptable Load Times? – To ignore the load speed of your responsive design mobile website is a ‘criminal offence’ and you’ll be punished for it by seeing your business come apart right in front of your eyes.

Icon Usability – A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

Responsive Email Case Study – The following is a recap of the project with some tips you can employ when updating your emails for mobile devices. Tips for hiding, stacking, adjusting and swapping elements within marketing emails.

ROI Of Usability – We all know that investing in usability is essential for creating a simple and intuitive experience for the customer. But some may not consider this enough to justify the costs associated with usability design.

Redesign Your Website For Better UX – Businesses have a fine line to walk in order to grow their user base and keep existing users happy. Here’s a guide to redesigning your website and sticking the UX landing:

Responsive Web Made Easier with Chrome DevTools Device Mode – The Device Mode comes with presets of device information including screen width, height, and device pixel ratio from popular devices, like Nexus 5 and Samsung Galaxy series, and makes responsively designed web development easy for us.

How we make RWD sites load fast as heck – There has been a lot of discussion about optimizing responsive layouts for performance lately, and I think that’s great. Speed broadens access and makes users happy, much like responsive design.

RWD Bloat Part II – The following is step-by-step how I made my site faster over the course of a few days. For the purposes of this test, I’m hyper-focused on my Speed Index numbers for my Home and Article templates

4 ways to create richer web experiences – Because I’d like to talk about where the Web is headed in this article, many of the features I’ll cover may have limited support, so it is important to use resources like caniuse.com

Hot Navigation Design Patterns for Mobile – But there are some basic considerations you need to remember before diving into menus, action bars, pop-ups, buttons, arrows, links, and so forth.

How I test type and layout – Both are two very different facets of the same overall system and subsequently require different test conditions. In essence, I test typography on devices and I test layout in the browser.

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

7 Ecommerce Design Trends for Summer 2014 – Web design is ever evolving and trend can rise and fall in a matter of months especially when conversion optimisation comes into play. The following trends have all been around for a little while but are being adapted into an increasing number of websites

Adding Vectors and SVG Images into Website Layouts – Most designers are comfortable with bitmap pixel-based graphics because these have all-encompassing support. But responsive layouts and retina screens have changed the web design process

Common practices do not necessarily mean best practices – This is a post about “CSS recommendations” that I consider bad practices (I am less concerned by their methods than I am about their adoption.)

The Perception That Design Is How Something Looks – Ask any designer and they’ll tell you design is more than how something looks. For many non-designers though, how a thing looks is design. Nothing else, just the look.

What’s Replacing The Home Page Slider (And Why It Should) – The evidence is there to show that, while you can make it work, it’s just not a design that should be embraced anymore. Not with the success of the hero layout.

7 Psychological Traps that Hold Web Designers Back – Let’s talk about self-confidence and psychological misconceptions that may hold web designers and web professionals back from getting ahead in their career

Website Security Basics – The security, however, should be so crucial to you and your clients because without security, all that you’ve worked for and built can be destroyed, stolen, or (worst yet) changed.

Why There Is Emphasis On The Importance Of Good Website Design – The world of web design is highly competitive. You have to make sure your website stands out. It is literally a “jungle” out there. You need a good website design to have an effective web marketing.

Is My Website Ready for Some Serious Hacks? – Hackers employ these methods to destroy or manipulate the website they are about to hack. We are introducing these to you so that you can apply your security measures to prevent and fight such shenanigans.

5 essential elements of a successful 404 error page – There’s nothing wrong with being humorous if that’s what the page requires, but fun and functionality are not mutually exclusive, and a good designer will always ensure that their user find the way to the information they were looking for.

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

How To Create a Web Icon in Adobe Illustrator – Since the most popular e-book reader out there is made by Amazon, we will use the Kindle as a visual representation for device portability and create a vector based icon from it.

How To Create an Origami Style Logomark in Illustrator – We’ll use Adobe Illustrator to tackle this design for its advanced shape editing abilities and make particular use of Smart Guides to perfectly align our vector paths.

Free Advanced Photoshop Tutorials – Photoshop allows them the space and tools to create or at least work in a creative way. Here are 20 free Photoshop tutorials. Checking them out may encourage someone to become an expert in this domain.

2014 Logo Trends – In studying these large collections, trends are noted. The intention of this report is to share with you what we see, not to make suggestions for what you should do

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

Promoting Your Business on LinkedIn – This guide takes a look at the inner workings of the LinkedIn platform to see if it is suitable for your business before guiding you through the best practices for using it as a marketing resource.

The Ultimate Guide to Building a Fast Blog and Why it Matters – In this post, I’ve covered everything you should know about how to build a fast loading blog and website: why it matters, what are the tools to test it, and what practices you should follow to building a fast blog!

6 Ways to Get Your Tweets Noticed – About 500 million tweets are sent every day. That’s roughly 5,800 tweets posted each second. Competing with that is a challenge. In this article you’ll discover six ways to improve your tweets and get noticed.

10 rules for designing emails your customers will want to read – Of course, designing for email also entails responsive email design since almost half of all email opens today occur on a mobile device. Here are the can’t-miss components of successful email design.

How to Maximize Your Clickthrough Rate in Emails – In this tutorial, we’ll look at the steps you can take to maximize the clicks on your emails so your email marketing performs better than average.

WordPress

Custom post type standards – The only reason for any type of standards for post type names is so that it helps foster healthy competition between various plugins trying to fill the same space. This is so users can more easily switch between plugins to find the one they like the best.

More Tips for Best Practices in WordPress Development – Today, we are going to go a bit deeper and write some more code and learn some techniques to improve performance and security of our plugins.

Web Design On A Budget: What Are The Must-Haves For My Site? – A custom website can get pricey and it is understandable that you may have a budget you need to stay within, so knowing the must-haves will help you make the most of your website with the budget with which you have to work.

How to Limit Dashboard Access in WordPress – Only users you trust should have access to the admin area of your WordPress site. If you are running a multi-author blog, then you may want to give access to editors and contributors but not to subscribers.

Understanding and Working with Relationships Between Data in WordPress – WordPress uses three kinds of data relationship – one-to-one, one-to-many and many-to-many. I’ll look at each of these and what they mean for your WordPress site.

How to Simplify the WP-Admin to Get It Client-Friendly – In this post, let’s just focus on the technical side of things – what we can do with the standard WordPress interface to make it more client-friendly.

8 Questions to Ask when Hiring a WordPress Developer / Agency – Here are questions to help you cut the mustard and see if the person/agency is the right choice. They will help you vet whether they are skilled WordPress professionals or … not.

How to Make Sure You’re Not Using a Shady WordPress Theme – Encrypted code is just one piece of the puzzle; there are other distasteful WordPress theme development practices going on.

How to Hide ACF Menu from Clients – When delivering a website to a client, it is a good idea to hide the Advanced Custom Fields menu item. This simple piece of code will prevent your client from changing / deleting fields

How to Find and Install WordPress Plugins from GitHub – By default, WordPress does not show updates for plugins installed from GitHub. Since it’s always good to keep your plugins updated, we need to make sure you get updates.

Search Engine Optimalization, Conversions, Analytics, etc.

Is Tumblr Really a Valid Marketing Tool? – Is it worth getting involved with one more social platform when you already have a blog that demands your attention like a very loud and very spoiled child?

Using Modern SEO to Build Brand Authority – Building a stronger brand presence online and improving a site’s search visibility both require two major processes: the things you implement on the site and the things you do outside of the site.

Tutorials

Fullscreen Form Interface – The idea is to extend the minimal form concept and only show one question or form field at a time in fullscreen. The user can enter data in a distraction-free way and it allows to add some fancy animations for the fields.

No JS Mini Demos – I wanted to share two small CSS only form demos that don’t require any JavaScript to function that will hopefully inspire you to see how far you can push the limits of a no JS solution.

Responsive, Fluid-Width, Variable-Item Navigation with CSS – Thinking ahead, it would have been impractical to change the CSS every time a menu item was added or removed. A resolution had to be found, ideally without using JavaScript.

Build A Blog With Jekyll And GitHub Pages – Jekyll isn’t for every project. The biggest disadvantage of a static website generator is that incorporating dynamic server-side functionality becomes difficult.

Pure CSS Off-screen Navigation Menu – While there are plenty of jQuery plugins that will create this effect for you, this article will show you how to make a simple version of the off-canvas menu and sliding effect using only CSS.

Freelance, Business and Workflow Related Stuff

Most Common Mistakes Freelancers Make – In my experience as a freelancer for more than a year now, I have committed rudimentary mistakes too. Though I am not ashamed of having committed them, it is sometimes regretful to think that these mistakes could have been avoided if I knew exactly what to do when I was starting.

Collaboration Gone Wrong: Key Tips in Addressing and Preventing Conflicts – Collaboration is a great way for freelance web designers to accomplish great things with less effort and time wasted. It has opened avenues for sharing ideas, mixing and matching creative juices and most of all, increasing earnings.

Killer Tips in Acquiring Freelance Clients – In freelancing, getting clients is one of the most pertinent things to be tended. Clients tend to pull projects together thus can create one or more opportunities to earn.

Selling The Value Of The Web To Small-Town Clients – Selling your services as a freelancer or a small shop is tough enough as it is. One of the most important things I’ve learned is how to sell the value of the web.

What To Do With Spare Ideas – Often, designers simply jot down those excess ideas in a notebook and file them away somewhere, but that’s boring and unhelpful. The truth is, there are far better ways to deal with your spare ideas. Here are some suggestions on what to do with them.

Productivity Quest: Ultra-Schedule – For years I prided myself in my flexibility—I woke up without an alarm, took off work mid-day occasionally to treat-[my]-self to mani-pedis, worked until 3am if the spirit moved me.

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

Do Less = Do More. the Art of Being Creative + Productive – “Busy” isn’t success. It’s a lack of priority. I’ve been paying attention to those who have command of their time…systems that bring sanity and purpose to a hectic travel and work schedule.

Why do we think developers are special? – Why do you think we treat developers like their needs are special and different from others? How much of this is really true?

The Most Dangerous Word In Software Development – Usage of the word “just” points to a lot of assumptions being made. A few months ago, Brad Frost shared some thoughts on how the word applies to knowledge.

You Don’t Need To Learn Each And Every New Thing – Following your interests when choosing what to learn is a good way to differentiate yourself and your business from others. Odds are you’ll have a unique combination of interests, resulting in a unique set of skills and knowledge.

– § –

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.