.. Your Daily Design Dosis

Tweet Parade (no.22-2015)

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

CSS hacks you may not know – This is a collection of short CSS snippets I thought might be useful for beginners. If you’re experienced with CSS you’ll have seen most of these tips and tricks before, but who knows maybe you can find one or two you haven’t seen before.

A re-introduction to JavaScript (JS tutorial) – Why a re-introduction? Because JavaScript is notorious for being the world’s most misunderstood programming language. While it is often derided as a toy, beneath its deceptive simplicity lie some powerful language features.

Extending Styles – In general, when faced with these decisions it’s important to not just think about solving the immediate problem at hand. You should also consider how your choices will limit your options in the future.

SVG Basics: Rectangles and Squares – After circles, rectangles are probably the easiest element to draw in SVG, requiring just one more attribute to complete them. The basic syntax for rectangles requires an x position, y position, width and height.

Color Filters Can Turn Your Gray Skies Blue – You can apply Photoshop-like filters or blended layers right in the browser. Which means you can use a single image file and present it in multiple ways as the user interacts with it.

Mastering CSS: BEM and ITCSS – What if the application grows bigger than we had originally expected, at the beginning of the project? Is our code maintainable? What things should we consider in order to write more maintainable and scalable CSS code?

Using Ems In Media Queries For Proportional Layouts – Using ems instead of pixels for MQs means we can keep the site proportional – a change in the base font size means a change in the media query size as well. This helps prevent text jams and unsightly layouts, and allows for a better flow of content.

How To Apply SVG Linear Gradients To A Fill Or Stroke – SVG provides for both linear and radial gradients. I’ll cover linear gradients today. You define a linear gradient with the <linearGradient> element.

Tips for Writing Modular CSS – Properly organizing your CSS, breaking it into smaller chunks, and naming classes in a generic way are a few places to start. Let’s review some of my top tips for writing modular CSS.

The Art Of The SVG Filter And Why It Is Awesome – In this article we’ve seen how SVG filters help us to create playful, decorative web typography. Soon, browser support will be good enough for us to use these effects on every HTML element as easily as we use CSS today.

How CSS Specificity Works – Learning about CSS specificity will give you a deeper understanding of how CSS property values are resolved when two or more style rules match the same set of HTML elements.

Creating Static Pages in Ruby on Rails – Have you ever wanted to create static pages in a Rails application? These are pages which don’t necessarily contain any dynamic info or pull from the database, and don’t require an entire controller.

Everything There Is To Know About Flexbox – You will find that Flexbox is a useful and adaptable tool that will revolutionize web development and make life easier for developers as well as being a pleasure to use.

SVG Basics: Polygons – If you want a closed SVG shape that is more than a basic circle, ellipse or rectangle, you’ll need to create a polygon. It’s very useful to understand the basics of SVG polygons, as doing so allows you to “tweak” and alter shapes in code without relying on graphical editors.

Getting Acquainted with Initial – I like to think of initial as a hard reset. It’s easy for styles to get convoluted as CSS grows, and using initial is a way to clear things out so an element can go back to its natural state of being.

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

Hero Image Custom Metrics – he average website contains over 2 MB of downloaded content. Of that, 1.3 MB (65%) is images. Many websites use images as a major design element in the page – these are called hero images.

5 Tools for Testing Your WordPress Site’s Performance and Speed – In this post I explore five tools for testing your WordPress site’s performance and speed, so that you can make the necessary changes today.

Designing an Effective Contact Form – Great contact forms inspire people to reach out and play an active role in a company’s online presence. But what makes a contact form really effective? What are the key features of the best contact forms?

Web vs. native: let’s concede defeat – I feel it’s time to revisit the web vs. native debate, and concede defeat — or, at least, concede that the web cannot, and should not, compete with native when it comes to complex, app-like structures.

7 Mobile UX Mistakes You’re Probably Making Right Now – Improving the mobile experience is always a learning process full of trial and error, so this list will get you on the right track by helping you steer clear of common pitfalls.

UX, the foundation of the modern brand – UX is famously difficult to quantify at the best of times. From our own data, we’re finally able to prove just how important UX is in that relationship – a little something to show your boss perhaps.

Benton Modern: Case Study On Responsive Web Typography – As designers, we can achieve much more with type, and with just a little more thought and creativity. Let’s look at ways we can push typographic design on the web further, beyond the status quo of today.

Design user research explained for everyone with animated gifs – There is no one formula for user research, and we don’t always need to start from the users. As long as you feel you have built empathy with the users, any design decision that feels right is probably a good decision.

How to Use Media Queries in Responsive Web Design – Responsive design comes with some problems of its own. The issue of slow-to-load sites is now well documented. Let’s walk through some of the tricks designers are using to better load content and images on different devices.

Why your responsive website needs the power of performance – Placing an emphasis on performance budgeting and understanding the importance of speed and responsiveness across all devices and browsers, is the key to building a successful website today.

Why you don’t need to test with your target audience – The common misbelief is that it’s important to test with people from your target audience to get useful results. The reality is that you can test your site or app with almost anyone if you’re only writing engaging task scenarios for your participants.

Forget “mobile first”, it’s the age of mobile-only shopping – Investing in mobile is no longer a debate, and neither is whether or not companies should take a ‘mobile-first’ approach. That’s because we’ve just entered a new age: mobile-only.

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

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.

Essential steps to secure your website – Unfortunately, open source platforms are a huge target for hackers due to their popularity, and since they’re managed by a mostly volunteer-based community, updates and security patches can be slow to fix, leaving your website vulnerable.

Web design is not just web design anymore – In the meantime, designers have learned to code and nowadays, being a good web designer means to have the ability to combine your design skills with things like usability and accessibility knowledge in order to deliver the best user experience.

Designing For Explicit Choice – We’ve seen that defaults are powerful because they provide a way for users to passively decide, thereby easing the difficulty and effort associated with decision-making. But we also know that, for a variety of reasons, providing a default option is not always appropriate.

An Introduction to Vagrant – Having the ability to develop on a local server that mirrors your live server gives you a more stable development environment and the confidence to push your projects live without the worry of it breaking immediately.

18 Insider Web Design Tricks to Simplify Your Process & Workflow – This article is a collection of some of these well-guarded secrets as shared by the industry’s top gurus – quite the collection for a young web designer trying to speed up workflows and improve design.

How to Code A Live Dynamic Twitter Feed in HTML Email – After many brainstorming sessions, we decided to use the common approach of dynamic content, but with a twist. We used a unique implementation to create a live Twitter feed in an email. Yes, a Twitter feed in an email.

Exploring the Design Trends of Small Business Websites – Small business websites tend to share the same goals as other large corporate websites. The major differences are in design and content. Small businesses are less complicated and typically focus a great deal on the little things.

3 key lessons for websites that work – What we need, in order to avert this disaster, is something I like to call “Design Frugality”. It sounds fancy, but it’s actually very simple. Just the way websites ought to be…

Readability Tools That Will Help Improve Your Site’s Content – When your content is readable, it’s easier to consume.If usability and UX is important, then readability should be a top priority. User-friendly content might even improve your search rankings.

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

8 Free Stipple Shading Brushes for Adobe Illustrator – One popular shading method I’ve noticed is particularly prominent in apparel design and illustrations with a retro vibe is the use of stippling, where fine vector textures are added to build up tones and shade in areas of darkness.

Designing Icons for Detailed Product Features – Granted icon design is a tough profession and if you lack the skills yourself it may be quicker to look for free alternatives. But there’s no doubt that feature icons can radically improve a website by offering visual clarity and drawing attention from visitors.

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

6 pro secrets for portfolio headlines that convert – There are lots of award sites that hold those trendy portfolio sites up on pedestals. Unfortunately, those sites are missing the most important requirement a portfolio site should meet: Does it bring you clients?

Your Ultimate Blog Checklist – Once you know what to blog about, if you use this checklist before launching a blog post it will help you optimise your content for readers, search engines and shareability.

Medium is not a publishing tool – That’s why I say Medium is not a publishing tool. It’s a network. A network of ideas that build off each other. And people. And GIFs (yeah, we have those, too — not our specialty, though, to be clear).

WordPress

How to Create a Custom Author List Widget in WordPress – While there are a bunch of simple author widgets around, I didn’t really find any of them to be flexible enough for my own needs. If you need a simple list, a lot of them will do.

2015 WordPress Business Revenue Statistics – Personal note to all my fellow business owners: don’t compare yourself and feel bad because you aren’t making what some of these businesses are. There is a lot of back story to these that you don’t know about, none of these people were overnight successes.

Common WordPress Mistakes to Avoid in 2015 (Part 5) – Now that I look back at the mistakes, I don’t regret making them. Because I learnt from them. Today we’ll be talking about some of the finer aspects of a well maintained WordPress site.

The Complete Guide to Mastering Image Optimization for WordPress – In this article we’ll go deep on the subject, covering every aspect of what you need to know to ensure your site is punching above its weight when it comes to serving up graphic content.

How to Build a Membership Site on WordPress – In this guide, we’re going to cover all the ins and outs of membership sites and how to build them on WordPress. We’re going to proceed through the whole process step-by-step, right from a blank WordPress site to a fully functional membership site.

How to Rebuild Your WordPress Website Like a Pro – There comes a time in the lifecycle of every website when a rebuild is unavoidable. The reasons vary; perhaps the original code is not very good, perhaps a complete visual overhaul is needed, or perhaps a ton of new features are being added.

A Beginner’s Guide To WordPress Website Maintenance – Regular WordPress website maintenance will keep your site running clean for years to come. No more than possibly just an hour per month and you can ensure that your site is healthy and running the latest updates.

How to Reset Your WordPress Website – If you have a WordPress installation for testing purposes, or just want to set up your blog again from scratch, you may be wondering how you can reset your website to its original settings.

How to Add Conditional Logic to Menus in WordPress – Do you want to show different navigation menu items for different pages in WordPress? Perhaps showing a different menu to logged in users, or hiding a menu item on particular pages?

How To Use Autoloading And A Plugin Container In WordPress Plugins – In this article we will explore an alternative way of developing WordPress plugins, using the lessons learned from the greater PHP community, the world outside WordPress.

Search Engine Optimalization, Conversions, Analytics, etc.

15 Ways to Optimize Your Blog Posts for SEO and Reader Response – There are many things to consider when writing content but the tips below will give you a good start to getting the maximum response from your post.

6 SEO Tips That Helped Us Double Our Blog Traffic – Writing for SEO is something many writers dread, because it’s a term associated with bad writing tactics like keyword stuffing. Instead, writing for SEO truly starts with researching.

Tutorials

Single page applications, Angular.js and accessibility – This in-depth tutorial outlines some best practices and accessibility challenges common to SPAs (and specifically Angular apps) so you can build an SPA that works for everyone.

Blueprint: Product Comparison Layout & Effect – This Blueprint is a responsive product grid layout with comparison functionality. The comparison view shows flexbox-powered columns or rows that appear with a slide-in effect.

Buffer’s loading animation – I love finding examples of subtle animation in websites. Recently, when I was logging into Buffer, I noticed a nice loading effect in their logo. Here’s how to recreate it using SVG and CSS.

Better Backgrounds with Blend Modes – CSS blend modes offer many more options, while still allowing backwards compatibility with browsers that don’t yet support blend modes (at this stage, Internet Explorer).

Image Tilt Effect – A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Freelance, Business and Workflow Related Stuff

How to ask for design feedback – In order to maximize the benefits you receive from feedback, however, it is important to create an environment where the person giving the criticism is comfortable doing so.

Testing Your Marketing Efforts as a Freelancer – What areas do you utilize testing, and how well do they benefit your self-promotion as a freelancer? Are there any areas where you could incorporate more ways to test the response of your target audience?

Common Freelance Mistakes Web Designers Make – In this article, I’d like to share the most common freelance mistakes web designers make (including myself), so you might avoid them and save yourself time, money and stress.

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

Instantiation – I really like Instapaper, Readability, RSS readers, or any other tools that allow people to read what they want when they want it. But think about their fundamental selling point: get to the content you want without having to wade through the cruft. That cruft was put there by us.

The Ryanair approach to progressive enhancement – Use progressive enhancement as a means to reward your users. Don’t expect them to do things for you just to use your product. If the tools you use means your users have to have a “modern” browser and load a lot of script you share your problems with them.

If you want design, you have to go all-in – Design is not just the pretty surface or shiny pixels. Design makes products work and people feel. Ultimately, design is a way of looking at the world with the customer in the center and the goal to provide value.

On writing real CSS (again) – Sass and Less are too abstracted from production CSS; this blinds us to detrimental effects of our actions during development, locks us into vendor-specific syntax and features, and ultimately puts too much distance between the code we write and the code that is delivered to our users.

Web! What is it good for? – The web will always be lagging behind some other technology. I’m okay with that. If anything, I see these other technologies as the research and development arm of the web. CD-ROMs, Flash, and now native apps show us what authors want to be able to do on the web.

Good code is design – Designers, learn to code. My guess is you’ll have a sharper eye for things like the above pictured problem. You’ll be able to contrive finer design solutions, make better decisions; anticipate on things.

Web vs. native: let’s concede defeat – I feel it’s time to revisit the web vs. native debate, and concede defeat — or, at least, concede that the web cannot, and should not, compete with native when it comes to complex, app-like structures.

– § –

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.