.. Your Daily Design Dosis

Tweet Parade (no.23-2015)

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

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.

20 Helpful Free JavaScript Effects for Web Designers – These free JavaScript effects can be easily used by web designers and developers for creating menu animations, interactive drag&drop effects, image hover effects, modal windows effects and more.

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.

Understanding CSS Counters and Their Use Cases – There are certain CSS features that we probably don’t use very often. I think CSS counters fall into that category for most of us, and more than likely for two reasons.

The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths – This article explores the inspiration for the project and aspects of how different parts were built, and I’ll dive into how you can use this greatly underrated line of CSS for your own projects.

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.

A Close-up Look at the CSS mix-blend-mode Property – In this post I will focus on the capabilities of the mix-blend-mode property and how you can leverage these capabilities in your projects.

New CSS Tricks And Snippets That You Should Know – Using a snippet? As long as you know how to use it and it gets its job done, than it’s exactly what you need. The great thing about snippets is that you can use them over and over again.

7 Essential JavaScript Functions – Times have changed but there are still a few functions each developer should have in their arsenal, for performance for functional ease purposes.

10 powerful things you didn’t know about CSS3 – CSS3 is way more than the sum of its parts. Each feature might sound nice, but their combination is what does the trick in the end. CSS3 is way more than the sum of its parts.

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

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

Difference Between Static, Liquid, Adaptive and Responsive – If you’re a web designer, a web developer, or even a project stakeholder or client, it’s important to understand what these terms mean and when each type of layout should be utilized.

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.

M.dot vs. Responsive vs. Adaptive: What’s the Right Solution for your Company? – You’ve heard these mobile optimization terms being thrown around – m.dot, responsive, adaptive – but what do they are really mean? And what solution is right for your company?

4 reasons not to disable zoom in your responsive design – Does your website use a responsive design and did you ever wonder if it is a convention to disable zooming in or out? Here are four reasons that you shouldn’t make the same mistake.

5 Simple UX Principles to Guide your Product Design – I’ve assembled a list of 5 UX principles I use to guide my design process. Understanding how and why to make UX decisions goes a long way in getting said UX decisions into the final product.

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.

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

Above the fold and below the fold, myths and reality – You probably know what “above the fold” is – it’s the area of a web page that you see in your browser (without any further action) when the page first loads.

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.

How To Convince Clients It’s Time To Redesign Their Websites – Some of your clients may be in desperate need of a site redesign. After several years and several advancements in technology, a site may simply become outdated.

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.

Creating a Future-Proof Responsive Email Without Media Queries – It’s called the fluid hybrid method, sometimes referred to as the spongy method of email development. The fluid part refers to the fact that we use lots of percentages.

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.

Effective Logo Design, Part 1: Symbols, Metaphors, Intuition – Good logos are smart but not condescending. They’re accessible and simple but have enough depth to be interesting. They’re immediate and intuitive but memorable when out of sight. And they’re both timely and timeless.

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

8 Alarming Things In Facebook’s User Policy You Had No Idea You Agreed To – Are you one of Facebook’s 1.4 billion users? If so, you agreed to these alarming clauses in its user policy without even knowing it.

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.

Pre-made WordPress Layouts – A Valuable Asset for Any Web Designer – A pre-made layout also serves as a wonderful idea-generating and brainstorming tool. You may have already had a good page layout idea in mind, but with the help of one of these layouts, you find you now have an even better one.

50 Most-Wanted WordPress Tips, Tricks and Hacks – Please practice caution when attempting any of the tips in the Advanced section because you might render your site unusable if you don’t know what you are doing.

10 Security Hacks For WordPress To Stop YOU From Being Hacked – In this article I’ll take a look over some of the tips, tricks and hacks you can employ to offer yourself more protection from the seedy underbelly of the web.

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.

How to master SEO (without having to hire an expert) – Most people make SEO (search engine optimization) out to be complicated. But SEO only appears complicated because you haven’t been given the necessary information to fully understand it.

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.

Simple ScrollMagic Tutorial – triggerHook, setPin, TimelineMax – There is much more to both GreenSock and ScrollMagic, I hope that this tutorial gave you a good start and showed you how you could use these powerful tools on your own project.

How to Create Sticky Navigation with CSS or jQuery – In this tutorial we’re going to look on how we can create a sticky navigation both jQuery version and a CSS only version. [Does NOT work on mobile].

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!

Simple Tips For Avoiding Working For Lower-Quality Clients – Lower-quality clients suck. All they focus on is how little they can pay. They make unreasonable demands for the amount of work they want you to do and how fast they want it done.

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

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.