This is a guest post by Jan Rajtoral (AKA Gonzo the Great), founder of gonzodesign, a Dutch design studio specialized in graphic and (responsive) web design. He also writes for the gonzoblog.nl, where above anything else, his passion for writing, technology, communication and design drives him to contribute.
- § -
In this article we’re going to take a look what has been published this last month on the Blogosphere. We hand-picked a selection with the best Resources, Tutorials, Scripts/Snippet and WordPress related Articles for you. All these design-related links have been mentioned on Twitter in the last month, and collected in this single article. So, I hope you’ll enjoy this roundup cause we think that having resources and staying up-to-date is important in your personal growth and development.
HTML, CSS, PhP, Coding & Resources
RWD Resources ~ The Ultimate Responsive Web Design Beginners Resource List. This post is a compilation of resources we found useful when developing and designing responsive websites.
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.
GoodUI.org – A Good User Interface has high conversion rates and is easy to use. In other words, it’s nice to both the business side as well as the people using it. Here is a running list of practical ideas to try out.
Best Practices for Speeding Up Your Web Site – The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories.
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.
frontend-dev-bookmarks – A huge list of frontend development resources I collected over time. Pull requests are welcome. Website coming soon.
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.
Usability Checklist - Catch common usability problems before user testing.
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.
What is a Box Model? - Every element on a page is in fact a box, whether or not it has a set width or height. I think that this is nothing shocking to you but it is something to keep in mind in order to understand what the box model is.
CSS Regions: New working draft - On May 28th 2013, we published a new W3C working draft for CSS Regions, one of the features proposed by the Adobe Web Platform team. Here are the most important changes you should be aware of.
UI Principles for Great Interaction Design – Today we are going over some different aspects than the ones you are used to: we will jump into user interface and principles for designing great interaction on your website.
Choosing A Responsive Image Solution – This article leads you through the basics of making responsive images and arms you with the information you’ll need to pick the best responsive image solution for your situation.
New technology – fullscreen mode – There are few notifications: when the full-screen mode is successfully enabled, the document receives a ‘mozfullscreenchange’ event. When the full-screen mode is canceled, the document receives the mozfullscreenchange event (again).
CSS Custom Filters – Today, I’m going to talk about something truly awesome (and new), and that is CSS Custom Filters. These allow us to morph and warp regular HTML elements into shapes that were impossible before.
Responsive Design Patterns - Designers should take advantage of design patterns like this, because more often than not, the problem they’re dealing with has already been solved by someone else. No need to reinvent the wheel if it’s already been built, tested, and perfected.
7 Lessons for a Tablet-Optimized Web Experience - Here are seven web design best practices that explore what a truly tablet-optimized experience looks like. These tips are excerpted from Mobify’s free ebook, Tablet Web Design Best Practices.
The Importance of Mobile Optimised Content – Say goodbye to nostalgic introductions and long winded descriptions, mobile users want the key facts at their fingertips the instant they load your site. Here are four aspects you might want to adjust to capture your mobile audience
Animated Books with CSS 3D Transforms - In this playground we’ll show you some creative, animated books with CSS 3D transforms and transitions. We’ll show you two types of book designs: hardcover and paperback.
Getting Creative With the Google Maps API – The Google maps API, on the other hand, gives you the freedom to create completely customized maps, which can do all sorts of cool things.
Justified and Vertically Centered Header Elements – A little journey into positioning header elements to be centered vertically and justified with the help of pseudo-elements. I just want to show you some simple CSS tricks that will do it right, in my opinion.
On Scroll Header Effects – The demo for the effects serves as inspiration only and we’ve used a technique that involves changing the state classes of the header which would of course be customized depending on which effect would like to be used.
How to create a simple parallax effect - It’s an appealing effect, and can be applied to as many layers as you like. In this article I’m going to introduce the basic principles by showing you how to build a simple two layer parallax effect.
Horizontal Portfolio Layout with CSS3 Animations & jQuery - In this tutorial today we’re going to create a horizontal portfolio layout with cool hover effects, using CSS3 animations and transitions, and some jQuery to replicate the image pan effect on hover.
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.
Tools (web applications, bookmarklets, frameworks etc.)
UIKit – A lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable.
localtunnel – The easiest way to share localhost web servers to the rest of the world. The localtunnel server is provided as a free public service. However, you can also deploy your own localtunnel server on dotCloud or your own server.
Out of Words! - The responsive typography framework. The structure & layout are indented for being used inside Words app. This can be interesting to anyone who wants to see how newspaper layouts in HTML/CSS can look like.
embedresponsively – A great tool that helps you build responsive embed codes for embedding rich third-party media into responsive web pages.
Instabug – Instant bug reporting tool for mobile apps. Save your time. Get the most out of your users. Hear from them and build better apps!
Proty – A tool that allows you to make quick, interactive wireframes that can be fully customized for designers. It lets you show your clients how thingrashman ~
CSS Trashman – The trashman examines your site’s live DOM and reverse engineers a new, more elegant definition. Wipe your old CSS clean and download replacement styles for a harmonious new beginning.
Stylify Me – A tool that helps designers quickly gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. This tool allows the designer to research sites efficiently without the need to inspect each element.
Effeckt.css - Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?
Furatto – A front-end framework, that uses Bootstrap and Foundation as a base, for developing websites quickly. The framework makes use of the popular flat UI trend and built with responsive layouts in mind.
Mailparser – Mailparser.io is powerful yet flexible data extraction tool. It’s easy to extract data from e-commerce notifications, web form emails or newsletters. Transform your emails into structured data and helps you automate your daily email business.
Tiff – A type diff tool that visually contrasts the differences between two fonts. Currently supports fonts from the Google Web Fonts library and any system fonts.
Cardinal – A small, “mobile first” CSS framework with some useful default styles, scalable typography, reusable modules, and a simple responsive grid system.
responsiveweb – Spending hours manually designing your pages for the responsive web? Layout your pages in minutes for beautifully responsive pages on desktops, tablets and smartphones.
animate.css – A bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Fontastic – Create Your Icon Fonts. Keep the standard settings, or change the character and CSS mapping to make it easier to code. Download a packaged folder including all the fonts, the HTML & CSS code, and a reference page.
NoteShred – Stop sending sensitive information in plain text. Encrypted email is a pain. Send an online, encrypted, password protected note instead and be notified after it’s been read and shred. 100% free. No registration required.
Freader – A small yet powerful RSS Feed Reader working with Node.js and Angular. Freader provides you with a simple page with all your feeds and the last item in them.
FROONT – Runs in your browser and allows you to see what you’re designing in the same way users will. Present comps online on all devices. Instead of giving static images to your developer, provide them with fully functional HTML and CSS code.
gridism – A simple responsive CSS grid. Each .grid element is a horizontal row which can contain .unit elements of various widths. Width combinations are illustrated below.
Pure – A set of small, responsive CSS modules that you can use in every web project. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered.
CSSCSS – Analyzes your CSS files to see which rulesets have duplicate declarations. This makes your CSS lighter and easier to maintain.
SassMeister – A playground for Sass. Add some Sass and SassMeister will show you the rendered CSS. SassMeister supports both Sass and SCSS syntaxes, all output styles, and a growing number of Compass extensions and Sass libraries.
Litmus Scope – Create a clean, web-based version of any email, with desktop and mobile previews.It’s perfect for sharing, and it’s totally free.
ptb/flexgrid – A next-generation web page layout framework based on flexbox: the CSS Flexible Box Layout Module. It uses the same responsive 12 column grid and CSS class names as Bootstrap.
Flexiboxes ~ Flexbox playground and code generator, very useful!
Squishy – A jQuery plugin that automatically resizes text to exactly fit the container with no extra work on your part. This plugin only works for a single line!
dimple – An object-oriented API for business analytics. The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive.
kern.js – A super-simple bookmarklet for designers that finally puts you back in control of your website’s typography. Then just click and drag to adjust your kerning, line-height, letter placement and more to your heart’s content!
Progression.js – A jQuery plugin that gives users real time hints & progress updates as they complete forms
Fotorama – A simple, stunning, powerful jQuery gallery. Fotorama’s CDN is provided by Amazon S3, feel free to use it.
imagefill.js – The jQuery plugin for making images fill their containers (and be centered). Imagefill continuously checks to see if the size of the image container changes, then it adjusts the size of the image inside.
Aristochart.js – A highly customizable and flexible line charting library for canvas. Aristochart allows you to focus on aesthetic while it manages the data behind the scenes.
Transit – Super-smooth CSS transitions & transformations for jQuery. Transition any CSS property. They will happen much smoother than if you were to use jQuery’s default .animate().
FlipClock.js - After reviewing as many of the existing solutions as possible, it was determined a proper extendible API needed to be written to create any kind of clock or counter (and the flip effect is just cool).
Tabulous.js – A jQuery tabs module for todays web. Tabulous.js can be used with any contents you choose in the tabs and it couldn’t be more simpler to use.
MasonJS – A jQuery Plugin was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges.
Chance – A minimalist generator of random strings, numbers, etc. to help reduce some monotony particularly while writing automated tests. Chance is open source software.
CollagePlus – An image gallery plugin for jQuery. This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.
Color Swatches – A jQuery plugin for turning any div into a color swatch. It’s easy to customize with different classes, and defining swatch colors is as simple as defining a comma-separated list of hex codes.
jquery-resizable-columns – Resizable table columns for jQuery.
jquery-draggable-background – A jQuery plugin for draggable background images
Progression.js – A jQuery plugin that shows tips about an active form field and also displays the progress (how much of the form is filled). It has options for customizing the tooltip and can be implemented into any form so easily.
jQuery Builder – Lets you easily build a custom version of jQuery that just includes the modules you need. Choose which modules you’d like to include in your custom build
WP CleanFix - WP CleanFix is an all in one tool for check, repair, fix and optimize your WordPress blog.
Google Typography – A simple plugin that lets you use and customize (in real-time!) any fonts from Google Fonts on your existing WordPress site.
The Best Shopping Cart Plugins to Sell With WordPress - Adding cart functionality to your WordPress install makes it easy to build simple online stores with the familiarity of the WordPress template system. Let’s take a look at the best shopping cart plugins available.
Interacting With The WordPress Database - In this article, I want to take you to one of the “deeper” areas of the system, the $wpdb class. The $wpdb class is a simple utility for interacting with the database directly. If you’ve been around WordPress code you’ve probably seen the get_posts() function or the WP_Query class.
A Look at the WordPress HTTP API: A Brief Survey of wp_remote_get - When it comes to making remote requests within the context of web sites, web applications, and even WordPress-based projects, the model that we follow is generally the same.
10 Speedy Ideas to Accelerate Your Slow Loading WordPress Site – Fix all those bugs and the glitches to help your readers with a smooth ride throughout your blog. These 10 tips will help to speed up your WordPress blog and keep your readers active.
How to Create a Homepage With Multiple Listings Using Custom Queries – The queries will list standard posts plus one custom post type registered for this project, called ‘animal’. You can find the template file with the four queries in the code bundle.
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.
10 more Useful WordPress Hacks/Code Snippets – Handy fresh WordPress Hacks for your library. With a few lines of code you can get some cool customization and new features with all those filters, actions and hooks.
Working with Classes and IDs Generated By WordPress – A helpful feature of WordPress is the way it generates classes and IDs. Some of these are generated by the system itself, while in other cases you insert some PHP in your theme and WordPress uses that to add classes and IDs to the page markup.
Developing a WordPress Blog Post Scoring System - the creation of a new type of feature for my blog posts, a scoring system that automatically calculates your post’s score based on the number of Facebook likes, Tweets, Google +1s, and more activities, and displays it in your blog post in real time.
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.
.. and don’t forget these!
Butterick’s Practical Typography – Without typography, one could argue, messages will still be legible, but if one really wants to communicate rather than simply display a heap of alphanumeric data, some consideration would be helpful.
Unheap – A tidy repository of jQuery plugins
Forecast Font – A web-font for creating multi-layered weather icons. It was created to enable you to have more control over the look and feel of the icons, rather than only having a single colour or style.
Cikonss – Created in order to be pure CSS, responsive and cross-browser usable. By “cross-browser” I mean IE8 as well. This means that CSS2 is in use which leads to limited shapes (and icons) available.
Buttons – A CSS button library built with Sass & Compass
- § -
If you want to stay up-to-date with the latest articles and resources from the design community, you should follow Inspired Magazine on Twitter.