.. it’s Weekend, 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.
This evening I’m leaving for a well deserved holiday of 2 weeks! In the meanwhile there will be no new Tweet Parades here on the gonzoblog!
Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.
Creating Interactive Graphs With SVG, Part 1 – In a series of two posts we take a look at building interactive graphs with SVG, CSS and Javascript. We take a real-world example from one of our projects and show you our approach.
CSS Shapes the future of the web - Once they are widely supported, CSS Shapes have the potential to herald a new era of web design, one in which designs aren’t restricted to the rectangular box model.
Does Flexbox Have a Performance Problem? – So I did a head-to-head comparison of old v new syntax, as I know the FT team used the old flexbox without dropping in the future-forward syntax. When using flexbox, always author for the new stuff
CSS3 Transitions 101: What are Transitions? - Transitions are the most-used type of CSS3 animation. Despite widespread adoption and a relatively simple syntax, there are several gotchas and options of which even the most knowledgeable developers are blissfully unaware!
Lifting the lid on PHP 5.5 - There’s been a new version of PHP released: PHP 5.5. This articles gives you a quick overview of the new features, why you might care, and what this means for those of us using older versions of PHP.
Flexbox / Flexible Box Layout CSS Reference – Flexible boxes, also called flex containers, are created by setting the display property on a container element. Properties are listed here in a specific order with the working draft syntaxes first and the current candidate recommendation standard syntax last.
Looking Into the Future of Sass - Sass is a CSS preprocessor. I’ll assume you are pretty comfortable with Sass basics. Some of you may even be hardcore Sass hackers! Okay, what if we took a blog post to look forward into the future of Sass?
Get cracking with Backbone - JavaScript frameworks have always lagged behind a little. Backbone changed that, and as you’ll see in this introduction, it uses the MVC pattern to separate JavaScript code and help us create structured applications.
Native equivalents of jQuery functions – Obviously native methods are faster because jQuery has to deal with older browsers and host of other things. I completely agree. That’s why this post is not meant at all to be anti-jQuery.
What’s the Status of the ::selection Pseudo-element? – Unfortunately, while ::selection is being used by so many developers, many may not realize that it’s actually not part of any specification.
How to Quickly Get Started with Git – A basic understanding of version control has become a necessity for everyone working with code, no matter if you’re a software developer, a web designer, or even a graphics designer who has to work with developers in a team.
Adding custom next/previous post buttons to WordPress using Font Awesome - This snippet will show you how to create a custom navigation function and we’ll be using Font Awesome to add some icons.
Creating Reusable Markup with The HTML Template Element - The <template> element allows developers to create client-side templates made up of chunks of reusable DOM. The key thing about HTML templates is that they are inert.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Testing and developing for the mobile web - Your mobile web development strategy depends on being able to perform tests for a variety of devices and browsers. Here are emulators and simulators that can help.
Step-by-Step UX Improvement – I’ve been playing the role of UX fairy on my current project at work this week — I go around the app, sprinkling little bits of small improvements. I thought it might be useful to document some my decisions and reasoning.
Why We’re All UX Designers Now - Call it user experience, it’s the direction of leadership–and as empathic companies like Apple, Tumblr, and Toyota evidence, it’s a dapper way to dominate a market.
Simple Responsive Images With CSS Background Images – In fact, there’s an easy, straightforward way to deliver responsive images that’s supported by all of today’s Web browsers: CSS background images.
Retina Display Ready with Media Query - So, in today’s post, we will look into how to deliver specific image that are optimized for high-resolution screens.
Progresponsive - Take the footer-anchor pattern, for example. I really, really like this pattern. It doesn’t require any JavaScript whatsoever; just a simple hyperlink from the top of the page that links to the fragment identifier of the navigation at the bottom of the page.
Optimizing Responsive Design Websites for Performance - However, the one area where responsive fails is speed. Without optimization, a responsive site will deliver all HTTP requests for a full desktop site, even when they are hidden.
How to design a responsive HTML email – Making responsive HTML emails isn’t the easiest thing in the world. But it can be done. Here are some helpful tips. Responsive email design is still a compromise.
On Mobile, Data URIs are 6x Slower than Source Linking (New Research) – As a web developer, you’re likely well aware that a key rule to high performance web design is to make fewer HTTP requests — especially on smartphones, where high latencies are the norm.
A Simple Look Into Adaptive and Responsive Web Design - In a short comparison, an adaptive web design is made to deliver content accommodating to the type of browser enabled. While a responsive web design is designated to fit the original web page’s contents into the specified container.
Progressive Viewports - Implementing off-canvas navigation requires a fair amount of effort in the realms of front-end performance and “viewport management” but the general principles are simple.
How to Benchmark Website Usability - How usable is a website? While most usability activities involve finding and fixing problems on websites (often called formative evaluations), it’s good practice to know how usable a website is.
You are not your users! - The world is littered with examples of design that are not human-centered. Doors with two pull handles and computer programs that have windows with a variety of checkboxes, dropdowns and radio buttons.
Our Favorite Responsive and Mobile Email Resources – There are tons of great articles and resources from other sources. Here’s a roundup of the best mobile email content, both from our blog and around the interwebs.
Cross Browser Retina/High Resolution Media Queries - Retina/high resolution media queries work great across a wide range of different devices and different browsers, though if you really wanted to make your site look great on the widest range of retina/high resolution displays and browsers
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Create Your Own Landing Page: The Ultimate Guide For Beginners – What’s more exciting is that you do not need to be a coding guru or an über cool designer. It’s just that simple – You and this ultimate guide.
7 Critical Web Redesign Considerations You Can’t Overlook - Unfortunately, most designers and creative teams will use this opportunity to focus entirely on the visual design of the site, and overlook SEO, content, and functionality.
The Importance of Designing for Readability - Readability should be one of the top concerns when it comes to any design project. If text can’t be read, then why are you designing in the first place? Good design delivers content in a way that is understandable; readability is a big part of comprehension.
Weekly Fresh Resources for Designers and Developers [July 22nd,2013] - Most of the tools, jQuery plugins, free fonts, free icons and free PSD files etc. are mostly latest releases or the ones you might not have seen yet.
Introducing Wireframes to Your Design Proces - Wireframing is essentially a visual guide to a website which helps you to look at layout without thinking about the aesthetics of the project.
4 tools for automatic CSS testing - Introduce some automated CSS testing into your workflow for more time making and less time checking. All aspects of web development can benefit from automated testing and the sheer number of testing frameworks available for JavaScript alone is enough to show how important it is.
Using Style Guides as Your First Step in Web Design - A great way to implement this efficient approach and agile state of mind is to create a website style guide as your first step in a web project. By doing this first, you create a valuable tool for use throughout your design process.
@font-face: advantages and usage - This rule helps designers to use a much bigger selection of fonts instead of only being able to use web safe fonts that users have preinstalled on their computers.
Bootstraps and Web Kits: Enemy or Efficient? – Using bootstraps is a choice and sometimes a suitable, but generating your entire site using one is probably not in your interest. Take every project and treat it independently, and decide in that scenario whether a bootstrap would be useful.
Fundamentals of Effective Landing Page Design – In this tutorial, I cover the basics of what makes a good landing page design. It’s a bit like we’re running a relay together. By showing you what works well in general terms, I’m running the first leg.
5 Elements of Website Redesign Success – Our focus today is to prevent these problems from occurring in the first place. The main way to avoid a redesign disaster from happening is through careful planning and not implementing the new design prematurely.
18 Powerful jQuery Responsive Metro Style Navigation Menus - If you are looking a metro style navigation menus for your WordPress sites, this article suitable for you! You can use these menus for your custom web projects, WordPress theme development projects and similar projects.
Website Deployment: Let Us Count The Ways! - Deployment is moving a website from a local environment to live servers. What seems like a simple thing can actually be quite complex. There are absolutely loads of ways to go about it.
6 Portfolio Design Mistakes That Drive Me Nuts - Your public portfolio is one of the most important things you’ll ever design. It presents you to the world and, if you’re a freelancer, tends to play a major role in whether or not people choose to hire you.
Changing Trends of Web Design and Development for Mobile Devices - It is not that analysing likely trends is difficult, but that we never know when something fresh and new is going to appear on the horizon.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Useful Tips for Building a Brand Identity with a Business Card - Business cards are a means of presentation taken for granted these days. If having no social media makes you non-existent, how can you exist in the real world without real branding?
A Brand is Not Just a Logo – It’s Your Most Important Asset – A brand is a company’s most important asset. A company can’t “own” its facts. If the company’s facts are superior to the competition, any good competitor will duplicate them, or worse, improve upon them, as soon as possible.
Five tips for a successful rebrand – A rebranding exercise is an exciting project for any company. So I offer the following as the five strategic actions that, in my view, come together in assuring a successful rebrand.
40 brilliant InDesign tutorials – Here we’ve rounded up 35 great InDesign tutorials which walk you through a variety of design projects. You’re sure to find something here to stretch your skills, covering live captions, brochure design, animated layouts, and more!
10 Adobe Illustrator Tips, Tricks & Tools You May Not Know About - I have hopefully complied some tools and some tricks that maybe even die hard Illustrator users don’t know about or use regularly.
Building a brand with design - There are many ways to approach branding and rebranding:. And I believe the best way to build a brand is with design. Let’s break down this line of thinking.
The Most Significant Rules of Designing a Perfect Logo – I say there’s a better process than to wait for inspiration to strike. If creative juices aren’t flowing as freely as they were supposed to, here are a few tips and tricks I’ve learned along the way.
How to Create Infographics in Adobe Illustrator - Take the Bar Graph Tool and create a marquee selection on the black area of the current document. As a result, the Graph Data window opens, where all categories and data should be entered.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
The 7 factors to help a company build a social business strategy – Managing an online presence is easy for an individual, but what if you have a company that wants to expand the scope of those efforts and bring it to the enterprise?
Email Marketing: What to Test and How to Test - Following generic “best practices” or fixed “rules” is not a path to success, because what works for one audience won’t necessarily work for yours. Testing is your biggest ally.
WordPress
Comment Systems and Options for WordPress Users - In this article we’ll take a look at the different commenting options that are available to bloggers who are using self-hosted WordPress to power their blogs.
WordPress Theme Features You Don’t Necessarily Need - It has to be functional and packed with all the features you need to build a successful website. That’s why reviewing a list of theme features is important to determine whether a WP theme suits your needs or not.
Developing a WordPress Blog Post Scoring System - In this tutorial I will be showing you how to create such a system for your WordPress blog, using API call, and a simple plugin to track post view count.
Techniques for improving page speed – Marketers need to ask providers or their technical team about page download speeds and optimisations used such as content distribution networks (CDNs), caching and code minimisation.
The High Price of Free WordPress Plugins - Basically, this post is a “if I knew then what I know now” about WordPress, then I would’ve shortcut a lot of mistakes, missteps, and learning certain lessons the hard way.
Search Engine Optimalization, Conversions, Analytics, etc.
Best Ways to Exclude Internal Traffic in Google Analytics – I hope this is helpful and provides guidance when you’re selecting the best option available. What other methods do you use to exclude visitors from inflating your data?
Heart to Heart About Link Building - With best practices for link building continuously changing, it can be difficult to keep track of which work well and which should be removed from our repertoire.
To Build Better Links, Stop Focusing On The Bad Ones – Cleaning up the bad links is fine and even necessary at times, but making the most of good ones can be just as critical, if not more so. Thinking about what you’re doing right and doing that more often is also critical.
Robots.txt file basics - When a web crawler finds a website, it first reads a file named robots.txt which is positioned at the root of a domain. In this file, you can set how and if the web crawler can visit a website.
The Definitive Guide to Google’s New Mobile SEO Rules - In this definitive guide to Google’s new mobile SEO rules, I’ll highlight the key ways you can optimize your website to take advantage of these recent changes.
Localising content for better SEO - Several recent Google updates have focused on providing web developers with the opportunity to provide ‘localised’ versions of the same website in different territories.
30 best new SEO tools - Let’s take a look at what are new, useful or downright awesome tools in inbound marketing, focusing on some of the key stages of the SEO process: research, technical, link building and content marketing outreach.
Tutorials
Create Password Strength Indicator With jQuery – In this tutorial we are going to create a small JQuery snippet that will check the user password and let them know how secure it is.
Automatically generating a table of contents with a smooth scroll effect - This week we’ll be writing a jQuery plugin that will automatically search for your headings and create a table of contents based on them for your blog post.
Display Images with Shape Masking and Nifty Zoom Effect - Today we are going to show you how to mask images with shapes plus some nifty zoom animation effects with just HTML & CSS. I have seen this kind of styling and effect in many portfolio websites and let me show you how it’s made.
Create a Simple jQuery Image Lightbox Gallery – For this tutorial I want to focus on using the lightbox effect with a plugin called jQuery lightBox. This is very easy to setup and get customized on your own website.
Designing an image gallery - Isotope has to be the best JavaScript plugin I ever worked with. Developed by David Desandro, you can think of it as Masonry 2.0. It makes complicated box-based layouts fully customizable and above all easy.
Building A Step-By-Step Guide Using Intro.js - There are numerous plugins for creating your own guided website tour. I want to focus this tutorial onto an open source jQuery plugin called Intro.js
Freelance, Business and Workflow Related Stuff
Client Relationships and the Multi-Device Web – You, web professional, spend your days immersed in the new paradigms of the multi-device web. Yet even for you, the constant change and adjustments that come with living on the internet can feel overwhelming. So how do you think your clients feel?
Top Tips on How Stop Struggling to Get Paid for Freelance Designers – Effective invoicing begins before you ever send the client your first invoice. Here are seven steps to help you develop an effective invoicing process.
10 startup mistakes and how to avoid them - All the research points to happy teams making more money, so organisations are switching on to this. Startups are next.
F*cking Brilliant, a great Read or just magnificent Tips!
Checklists for Creative Work – There are many reasons why expectations and outcomes can become misaligned: poor client/agency communication, unable to reach consensus on key decisions, blown timelines, losing sight of the objective, spending too much time focusing on the wrong things, etc.
What’s wrong with being creative? - Creativity is the act of being creative, which is a bit basic, but provides some context. It also essentially says that it is the act of going beyond the accepted boundaries and rules to create something new and meaningful.
The Impact of Simple Design - Simple design isn’t the act of removing design elements until something ‘looks’ pretty. It definitely isn’t dumbing down a product until the complex elements no longer clutter the interface.
You’re Good. Get Better - Young designers and those new to the game; I’m going to let you in on a secret. Maybe a few secrets. The sort of things that you find out by yourself through long and painful processes, and endless, horrible clients.
Great Products Focus On A Motif - What can designers, or any team member for that matter, do to increase the overall quality and success rate of the products we craft and to elevate our team’s batting average?
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