.. Your Daily Design Dosis

Tweet Parade (no.23-2015)

06/06/2015by Jan Rajtoral | Comments Off on Tweet Parade (no.23-2015)

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

Tweet Parade 23

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Sticky Positioning with Nothing but CSS – Historically we’ve needed JavaScript to do this. However, sticky behaviour has been proposed (and drafted) as a new standard (the sticky position), allowing us to achieve the effect with pure CSS.

The Best CSS Reset Stylesheets – Resetting your CSS to baseline property values is useful for gaining control, predictability, and uniformity with regards to how browsers render your HTML elements. If you’re looking for a stylesheet to help you reset your CSS, these are your top options right now.

Parallax Done Right – It feels like every day there’s a new marketing page using the technique…and with good reason. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance.

How To Apply SVG Radial Gradients To A Fill Or Stroke – With radial gradients you set a radius and locations for the center and focus of the gradient. Once you’ve played around with the values and understand what each controls, radial gradients, are fairly easy to work with.

10 Useful JS Tools For better HTML Tables – Here we have presented 10 the most useful JavaScript tools especially designed for making HTML tables better. The presentation and accessibility of data plays a vital role when you are displaying a record of hundreds of tables.

Viewport vs Percentage Units – These units – vw, vh, vmin, and vmax – are based on the size of the browser viewport. Because their actual size changes depending on the viewport size, this makes them great units for responsive design.

The State of SVG Animation – I hope this article helped give you an overview of what’s currently possible and not possible in the world of SVG animation, hopefully making it easier for you to choose the appropriate animation technique for your next project

The 22 Rules of UX – Stories create experiences — great stories make for great experiences. Put heart into your stories and consider your audience. Pixar’s 22 rules of storytelling adapted for UX — because both are about creating great experiences.

Progressive enhancement – When creating web pages, the only part of a page that you can rely upon working is the HTML. Even that can fail, but without HTML there is no web page and everything else becomes moot.

Optimizing the Usability of Online Forms – It’s important to have a clear reason for users to complete a form. Remind your users of the value or benefit they will receive for successfully completing your form.

Modern Design Tools: Adaptive Layouts – In this article, I’d like to explore an opportunity to improve one fundamental aspect of design tools: layouts. We live in a world that is dynamic, designing and building software that lives on devices that are always changing and evolving.

How Mobile Friendly Is Your Design? 12 Tips to Follow – The websites we create can’t just look pretty. They need to serve the needs of the user and generate revenues for our clients. Here’s a shortlist of the top questions you should ask to better understand how mobile-friendly your site is.

Making websites that work well on Opera Mini – The most common question I got in the hallways was “How can I make my site work well in Opera Mini?”. The answer is simple: use the development methodology known as Progressive Enhancement.

Building Great Mobile Menus for Your Website – Developers are adapting to a mobile-centric design philosophy with a focus on creating legible sized fonts, making images responsive, adapting content to fit etc. However, menus themselves are often neglected or overlooked.

Need for Speed 2: Improving Front-End Performance – Although I made various workflow and server-side improvements, I gave front-end performance extra attention. Here’s what I did, why I did it, and the tools I used to optimize front-end performance on my site.

Performant CSS Animations – The goal of this post is to provide a basic level of understanding focusing on animation performance, explain why all animations are not created equal, and provide some other performance related resources.

Mobile Isn’t Killing the Desktop Internet – A theory sometimes bandied about the media industry says audiences are deserting desktops and “going mobile” instead. But actually, data from online measurement firms doesn’t seem to support that view, at least at the aggregate market level.

Creating Better UX Portfolios: 4 Do’s and Dont’s – A good UX portfolio is more than just a set of screenshots, putting together a portfolio might seem like a challenge. Here’s a set of guidelines that’ll help you tell your story and get the job you’re looking for.

Fresh Resource for Web Developers – June 2015 – In this compilation, we’ll be looking at a few JavaScript libraries for displaying sliders, smoother scrolling for data tables, a cool elevator effect for a scroll-to-top button, and more.

Embracing emptiness in Web design – Applying white space correctly starts with understanding it. Remember the different divisions of white space – the three main types, as well as the differentiation between micro and macro.

10 Website Conversion Mistakes and How to Avoid Them – Conversion is a process of changing or causing something to change from one form to another. Optimising website’s conversion rate can significantly increase return on investment (ROI) on your marketing efforts.

12 Actionable Ways To Improve Page Speed – Don’t make your website’s users wait for perusing your epic content. Make sure you use these 12 easy tips for creating a website that opens with ease for each visitor.

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

20 great typography tutorials in Photoshop – In this today’s post, we have a collection of 20 great typography tutorials in Photoshop. These are awesome collection of text effect tutorials that are explained with great detailing.

Create a Plastic Balls Text Effect in Adobe Illustrator – In the following steps you will learn how to create a colorful plastic balls text effect in Adobe Illustrator. Moving on, you will learn how to turn your plastic balls into simple symbols and how to use them for a colorful text effect.

My icon design workflow – Icons are often where design software is pushed, making full use of vector abilities, masking, and constructive solid geometry. It is for those reasons that icons often require different tools and techniques.

Create a cityscape in Adobe Illustrator – Today I’ll share you how I created a colorful cityscape in Adobe Illustrator. You’ll start from an Illustrator template file, where I prepared the document for you including the colors I’ve used.

The PLAY button is not optical alignment – The center point means the distance between longest edges to the center are the same.So just using a circle behind and make the edge point to the circle edge,because circle’s edge to the center is radius,all radius have same size.

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

5 Ways to Improve Your Facebook Organic Reach – With changes to Facebook’s news feed algorithm, you’re facing increased competition to get your content in front of your fans. In this article I’ll show you five ways to improve your Facebook organic reach.

6 Ways to Use Google+ to Increase Your Visibility – With a few simple tactics, you can extend your reach on Google+ and attract additional followers. In this article I’ll show you 6 ways to increase your visibility on Google+ and in Google search results

WordPress

Customizing PHP for WordPress (Part 1 of 3) – WordPress allows us to do so much in terms of building websites without knowing any code. In this article we are going to go over some important things to know when you start trying to customize PHP files and PHP code in WordPress

Style Posts by Category on Your Main Blog Page – Because WordPress gives us the body_class() and post_class() template tags, it’s possible to target a specific page on your site and then target posts in each category, and style them differently.

11 Ways to Speed Up WordPress – How to speed up WordPress surely is a hot topic these days. Fortunately, there are numerous techniques that you can employ to get the job done. So, our intent here is to list every trick we know of that can make your WordPress site a lot faster.

Creating WordPress Plugins in an Object Oriented Way – In this article I’ll show you an object oriented approach (there are many others), which I hope will serve as inspiration for cleaning up your code. It requires a solid PHP foundation a rudimentary grasp of OOP won’t hurt.

How to make WordPress images responsive – Thankfully there is a way to make WordPress do all the heavy lifting. It can generate all the image sizes from a single image upload then, via a plugin, implement the image tag and srcset attributes anywhere the author chooses to insert an image.

Search Engine Optimalization, Conversions, Analytics, etc.

5 SEO Problems Plaguing E-Commerce Websites – Search engine optimization (SEO) is challenging, but SEO for large e-commerce websites is a different kind of beast. Let’s take a look at some common SEO problems plaguing e-commerce websites and how we can fix them.

Tutorials

Create Gooey effects in a D3.js visualization – A short post about perhaps not a very useful, but nonetheless rather fun to watch effect in SVGs applied to D3.js: Gooey effects! You’ll have to attach a SVG effect to the container element.

Product Tour in CSS and jQuery – Onboarding processes are essential to let users familiarize with your site functionalities as soon as possible. Today we release a handy tour snippet powered by CSS and jQuery, characterized by a user experience that changes according to the device size.

Color Extraction Effect – Today we’d like to share a fun little color extraction experiment with you. The idea is to create a color palette from an image with a subtle effect on the image itself and some fanciness on the palette.

Freelance, Business and Workflow Related Stuff

Managing Projects with Trello – That’s a quick rundown of how we’re using Trello to organize our bigger projects. We’re continually evolving the organization, but the ideas remain the same. Hopefully this helps you get more organized!

How To Start A Freelancing Business That Won’t Fail – In this comprehensive guide I’m going to dedicate a few days of research and reflection instead of a few seconds, and attempt to give you a thorough framework for helping you build a freelancing business that won’t fail.

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

Get off my lawn – Formulate your opinions from doing, not from reading how others do. This is one of the main reasons I stopped blogging, because it seemed like all my posts had to pack a good moral lesson or else they weren’t worth the time to read.

No Good Can Come of Bad Code – all meaningless spans and divs, half of them there purely as visual hooks, and the other half there because the developers didn’t know what to cut out of the framework they used.

– § –

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

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.