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
Front end standards - A shared understanding of front-end development best practice. It’s to help us deliver high quality content that works better, reaches more people – not only in today’s browsers &devices, but in tomorrows.
CSS3 Form Styling Cheat Sheet - I hate styling forms. I never remember them. So here are the styles I use the most. *Be mindful of browser compatibility
CSS Positioning: A Comprehensive Look - One aspect of CSS layouts that will likely be around for some time yet is CSS positioning. In this post, I’ll cover CSS positioning in detail and I hope you’ll come away from this with some more options in your CSS layouts.
10 Easy Image Hover Effects You Can Copy and Paste - Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal
So Long, CSS Sprites: Use CSS3 Filters To Create Icon Rollover Effects - For everything else – in which a link requires a hover effect but is not text, nor something that can be encoded as a font – the traditional solution has been CSS sprites
Getting Started With Sass: Installation And The Basics - Before we can compose Sass we need to install it. Sass is built upon Ruby. If you are working on aMac, chances are, you already have Ruby installed. If you may to install Ruby in Windows, use thisRuby Installer.
Use Box Model For Easier Widths - There is a CSS property call box-sizing which makes this work a lot easier. Using the box-sizing property with the value border-box will include the padding and the border in the width of the element.
Responsive background images with fixed or fluid aspect ratios - What’s the easiest way to scale background images in responsive layouts? We use an old technique and enhance it to fluidly change the aspect ratio of background images.
Adaptive Vs. Responsive Layouts And Optimal Form Field Labels - A responsive layout is in theory always better than an adaptive layout, but in some cases an adaptive layout is a more pragmatic solution.
Why Ems? - I’ve long sized text only in px. Even when it was patently uncool to do so – the days in which smart people cared about the fact that text set in px couldn’t be resized in IE 6-8. I’ve switched over to using ems now. I haven’t moved every single project over yet, but my mind has switched. Why?
CSS Preprocessors Compared: Sass Vs. LESS - To decide, we will compare the two in seven factors: the one that performs better gets one point; in the event of a tie, both will be awarded one point.
Stop Designing Mobile Websites - In my opinion, it’s time to stop designing mobile websites. Dramatic, I know… but my thoughts are not unfounded. Despite the popularity of mobile, we can no longer say “mobile browsing is on the rise.”
Understanding The Viewport Meta Tag - The viewport meta tag tells the browser how to behave when it renders the webpage, you can tell it how big the viewport will be.
Optimizing Typography in Responsive Web Design - In this article, we will be discussing typography vis a vis responsive web design. Our focus will be on typography strictly in relation to responsive web design only.
CSS Transitions - There are two ways to create animations with pure CSS: CSS animations and CSS transitions. CSS transitions provide a simple method for animation one or multiple properties from one value to another.
Mastering SVG use for a retina web, fallbacks with PNG script - Consider your options for SVG use, and then realise the full power of them; logos, icons, navigations, patterns, repeating backgrounds, all fully scalable to any size.
Should You Use Inline-Blocks As A Substitute For Floats? - They aren’t exactly the same of course, but the inline on the outside and block on the inside characteristics are sometimes all we really want and either a float or an inline-block might be appropriate.
Learning Principles for Improving Your CSS - This article will cover some basic principles and tips on how to learn and become better at CSS, based on personal experience.
Responsive Web Design is So More than Just a Few Breakpoints - Layouts became completely broken at widths that weren’t defined breakpoints. In a world where devices are changing at a rapid pace, we need to make sure that our designs don’t break at any widths.
Responsive Image Techniques & Resources - When creating images for responsive layouts you don’t need to spend a whole lot of time coding. There are just a couple of techniques which, if followed properly, will allow you to scale your website very quickly.
Code smells in CSS - I’m going to share just a few things (there will, no doubt, be things that I have missed) that I look out for in CSS that will give you and idea as to its quality, its maintainability and its integrity…
Use Tomorrow’s Web Standards Today With CSS ‘@Supports’ - Modernizr is great when you need it, but did you know that soon the browser itself will be able to give you the same information?
CSS :target - The
:target pseudo selector provides styling capabilities for an element whose ID matches the window location’s hash. Let’s have a quick look at how the CSS target pseudo selector works!
15+ Comprehensive Responsive Web Design Tutorials - In this post I would like to share 18 useful responsive design tutorials to help you get started with responsive designing including fluid grids, fluid images and media queries.
How to get started with Sass - This article will walk you through the basics, and help you over the prep work required to get Sass set up, so you can use it in your own projects.
Responsive Column Layouts - Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. It doesn’t require any first or last class and the number of columns can be adjusted base on the viewport.
Fluid Grids in Responsive Web Design Tutorial - It’s your decision to choose between a fixed or fluid grid to design the layout. Throughout this tutorial we are going to focus on fluid grids and their importance in responsive design.
The ultimate “target retina screens” media query - In terms of CSS, to specifically target this group of devices, unfortunately there’s no easy way to say “apply this set of rules to all devices where physical pixels are not equal to CSS pixels”.
Gamma Gallery: A Responsive Image Gallery Experiment- Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.
25 Useful CSS3 Menu Tutorials - It is must for a web designer and a web developer to stay updated with latest techniques used. You can try these tutorials to code professional looking navigation menus, ..
Baraja: A Plugin for Spreading Items in a Card-Like Fashion - With this jQuery plugin items can be spread in a card-like fashion and displayed in an unusual way. Several parameters allow many different spreading results, allowing a unique pattern.
Creative CSS Loading Animations - In this tutorial we’ll show you how to make some creative css-only loading animations also known as activity indicators.
How to Create a Responsive Image Slider in jQuery and CSS3- Today we will code a responsive image slider from the Impressionist UI. We will code it using the FlexSlider plugin for the functionality and style it using CSS3.
Sass Tutorial: Building An Online VCard With Sass & Compass - Today we are going to continue our discussion on Sass and this will be the final part of our Sass series. This time, rather than a theoretical approach, this is going to be a bit more practical.
Responsive CSS Timeline with 3D Effect - A tutorial about how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.
Adaptive Thumbnail Pile Effect with Automatic Grouping - An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.
Simple Effects for Drop-Down Lists - Today we want to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin.
Single-Page Ajax Portfolio Update Panel with jQuery - In this tutorial I want to explain how we can build a simple portfolio update panel using jQuery. This will make it easier to embed a similar page widget into any portfolio layout.
CSS3 Image Gallery with Dynamic Caption Text - For this tutorial I want to show how we can build a standards-compliant HTML5/CSS3 image gallery with fading captions. We will be using CSS3 transitions to create the animated effects.
Flawless clickable drop-down navigation - In this tutorial I’ll show you how to create a superb clickable drop-down navigation, using jQuery and of course complete with CSS fallbacks.
Animated 3D Flipping Menu with CSS - CSS animations aren’t just for basic fades or sliding elements anymore — CSS animations are capable of much more. Today’s we’ll create a simple but awesome 3D flipping menu!
Calendario: A Flexible Calendar Plugin- Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness.
Tools (web applications, bookmarklets, frameworks etc.)
Cedvel - An application for designing grid systems. Cedvel aims to ease the grid design process and help you explore more alternatives.
Unroll.me - A free and easy way to end unwanted subscriptions and rollup the rest into an organized overview made just for you. Simply select the emails that are overloading your inbox, and we’ll automatically unsubscribe you all at once.
Viewport Resizer - Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.
Easel - A in-browser web design application targeted at small teams. Designing in the browser is the only way to ensure pixel perfect execution. Use modern tools like web fonts and CSS3 but without the interruption of shifting back and forth between your text editor and your browser.
Smart App Banners provide a unified method of promoting apps when viewed in mobile Safari. Presented as a fairly unobtrusive banner at the top of webpages they show details of the app, it’s icon, ratings and price information.
Remote Preview - Preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit Enter, and new URL gets automatically loaded on each device. Works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.
Dashing - A Sinatra based framework that lets you build beautiful dashboards.
34Grid - A Responsive Grid System based on an “equally distributed columns” layout. In contrast to other great grid systems, 34Grid provides equally distributed columns for each row and also column complements for inequal distributions.
Emmet - A toolkit that can help improve your HTML & CSS workflow by taking your snippets to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation.
Duri.me- A super simple dataURI tool, among other reasons it is primarily to save HTTP requests. A Data URI is a Uniform Resource Identifier scheme that provides a way to include data (in Duri.me’s case images) in-line in websites as if they were an external resource.
Eyedrop.me - Lets you create color swatches from your favorite websites. Eyedrop.me is a lightweight, beautifully designed iPhone app for picking, editing, and saving color swatches while on the go.
Ratchet - Prototype mobile apps with simple HTML, CSS and JS components. Ratchet was developed to support iOS 5+ for iPhone.
Method Draw - The purpose of Method Draw is to improve the usability and user experience of SVG Edit. It removes some features such as layers and line-caps/corners in exchange for a more simple and pleasant experience.
Ai->Canvas - The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps (for Windows and Mac).
Ivory - A simple, flexible and fully responsive grid based framework. It takes you all the way from 1200px down to 320px.
Viewport resizer - A browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.
Font Custom - Generate custom icon webfonts from the comfort of the command line. Output multiple font formats and a bulletproof stylesheet with one command. Works on modern browsers, quirky mobile flavors, and even your old friend IE8.
jq-tiles - A jQuery image gallery plugin that comes with many differenttile-based CSS3 effects. The tile effects can be customized in various ways: number of tiles in x/y axis, fading for them, their speed and more.
Carousel -A jQuery plugin takes simple HTML and CSS-only carousels and progressively enhances them with features such as page lists, scrolling, class-toggling, timers, timer offsets as well as touch and keyboard events.
Liffect - A web-based generator that provides lots of different effects for list elements. It makes use of CSS animations and requires jQuery for applying the delay in effects.
Crumble allows you to quickly and easily build feature tours for your website or app using small bubbles. The tour itself is defined as a standard ordered list in your html, making it accessible.
Garlic.js - Allows you to automatically persist your forms’ text field values locally, until the form is submitted. This way, your users don’t lose any precious data if they accidentally close their tab or browser.
Sly - A jQuery plugin for one-directional scrolling simulation with item based navigation support.
jGravity - Adds gravity to either all or specified elements within a page. Using the plugin is as easy as
$('body').jGravity() which will use default settings to apply the gravity effect, which I think you will find quite similar to how Google presented ‘Google Gravity’ in an earlier Google easter egg.
jHERE - Maps are cool, but map APIs are complicated. jHERE solves this problem by offering a simple but powerful map API in the form of a jQuery (or Zepto.JS) plugin.
SocialCount - A small jQuery plugin for progressively enhanced, lazy loaded, mobile friendly social networking widgets. The problems with social networking widgets are they’re heavy and slow to load especially on high-latency mobile connections.
Responsive Img - A solution to all which combines a jQuery plugin with a PHP image pre-processor. The plugin enables the page to change the
src attributes of the images in parallel to the container width and the PHP file auto-creates the new/resized images.
pickadate.js - A lightweight jQuery dateinput picker
jQuery Transit - Super-smooth CSS3 transformations and transitions for jQuery
JQVMap - A jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.
pentizr.js - A simple jQuery plugin which uses the unofficial CodePen API to show pens on a personal website. pentizr uses the unofficial CodePen API to fetch the data and creates some nice output for you.
Filtrify - An Advanced tag filtering with HTML5 and jQuery. Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.
Pods - A framework for WordPress that allows you to create, extend, manage, and deploy customized content types and fields. Pods allows you to add context to content. Forget managing all of your content through simple posts and categories
WordPress Bootstrap theme can be used as-is or as a starting point for theme development. It has been built on top of the Bones theme framework and based on v2.1.1 of Twitter’s Bootstrap.
The Complete Guide To Custom Post Types - A custom post type is nothing more than a regular post with a different
post_type value in the database. The post type of regular posts is
post, pages use
page, attachments use
attachment and so on.
How to Display Metaboxes According to the Current Post Format - Today I’d like to show you how to go further with custom metaboxes and specifically how to use them according to post formats.
Understanding and Applying WordPress Shortcodes - Known as shortcodes, this feature actually allows developers to bundle entire pieces of XHTML or PHP code into a small variable that can be placed throughout the installation’s posts, page content, and even its template files with a little trickery.
WordPress Custom Post Types Debate – Functions.php or Plugins? - In this article, our founder Syed Balkhi will debate whether WordPress Custom Post Types belong in functions.php file or in plugins.
Common WordPress Development Mistakes and How to Fix Them- I’m going to go through some of the most common development mistakes and how you can easily fix them, and going forward make your code better!
Debugging Tips for WordPress - There comes a time for every developer when things break and it’s time to set to debugging. Mario takes a look at different techniques you can use for plugins, themes, and servers.
Building a Downloads Gallery WordPress Plugin - In this tutorial, we will create a Downloads Gallery plugin for your WordPress website. We will be keeping it plain and simple and shall focus more on WordPress core instead of PHP logics.
Understanding and using WordPress Shortcodes - In this article we are going to see what all support does WordPress provide to create a shortcode and how to use WordPress shortcode api’s and create your own shortcodes.
WordPress SSL setup tips & tricks - This posts documents my mistakes and issues with my WordPress SSL setup. With all these tips, there’s really no reason anymore why you couldn’t run any page where a user submits private data on SSL
jQuery Lazy Load Images on Scroll without Plugin - This jQuery tip reduces a lot of external requests while loading the page, ultimately helps your wordpress blog load faster. While using this trick, you should also use Cache Technique for simplifying the page loading.
Customising and Simplifying the WordPress Admin for Your Clients - When you’re building a website for your client, sometimes there are parts of the WordPress admin that you don’t need them to be able to access.
What’s New in WordPress 3.5: The Developer’s Perspective - The final version of WordPress 3.5 is coming closer – the first release candidate has already been presented to the public. It means that we should have our hands dirty with testing.
Registering Custom Post Types- Registering Custom Post Types is a breeze, really. You just need to set all the variables that are going to govern how your custom post type should function, and put that code in either a plugin, or your theme.
Understanding and Using Featured Images in WordPress - WordPress also lets you add a special kind of the image to the post called as a featured image. This featured image is not a part of the content but can be used in the various places in the theme to display the post.
How to Find a Backdoor in a Hacked WordPress Site and Fix It - Time and time again, we have helped users fix their hacked WordPress sites. Most of the time when they reach out to us, they have already cleaned up the site, and the hacker was able to get back in.
.. and don’t forget these!
Socialico - A package of 74 social media icons, combined within a single wieght font and designed by Jelio Dimitrov a.k.a. Arsek. Every single icon matches a particular key on your keyboard
Batch - A lovingly designed and crafted suite of 300 icons for web and user interface design. Each icon is a single Photoshop shape layer, meaning they can be scaled up—and down—without loss of quality.
Step-by-Step SEO: How to Setup Google+ Authorship - In order to help more website owners take advantage of this technique, I’ll first cover what Google+ authorship is and how it can improve your online business results, ..
Top 5 Tips for Recovering From a Low-Quality Backlink Profile - So if you happen to be suffering from a backlink profile rife with low-quality entries, here are just a few tips to help you recover and get back in Google’s good graces.
Don’t Build a Startup, Build a Business - The world of startups has attained such mystique that people are scrambling to get involved. The word alone can sell a book, even if that book is about something only tangentially related.
15+ More New and Superfresh Fonts - Good typography, appropriate and readable fonts are the main ingredients for effective communication. These relatively new fonts that have been published in the last couple of weeks, and are designed to be well suited for web as well for print.
Latest posts by Jan Rajtoral (see all)
- Tweet Heat – The hottest Tweets of the Month [Mar. 2013] – April 10, 2013
- Tweet Heat – The hottest Tweets of the Month [Feb. 2013] – March 4, 2013
- Tweet Heat – The hottest Tweets of the Month [Jan. 2013] – February 4, 2013
- Tweet Heat – The hottest Tweets of the Month [Dec 2012] – January 3, 2013
- Tweet Heat – The hottest Tweets of the Month [Nov 2012] – December 4, 2012