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.
And .. of course: Happy New Year y’all!
HTML, CSS, PhP, Coding & Resources
Create Emails for Any Device: Introducing Responsive Email Templates - With so many readers viewing emails on mobile, we knew there had to be an easier way to ensure campaigns look swank on any device.
A Look at Responsive CSS Frameworks - CSS frameworks have gone responsive, squeezing content into a spectrum of desktop and mobile browsers with varying degrees of success.
Is It Adaptive or Responsive Web Design? - There seems to be a lot of confusion in the industry among both us web folk and clients about the differences between adaptive and responsive web design. I’ve even seen someone go so far as to say they’re both the same thing. They’re not.
Stop designing for screen width, design for content - When choosing your breakpoints, you should always be making your decisions based on where the content breaks and not to device screen widths.
Pros and Cons of Using Grids in Web Design - Designers are increasingly learning that the approach that has traditionally been used in the worlds of graphic design and print publishing can deliver huge benefits when building websites.
Parallax Tools and Techniques - Using parallax to give your website some depth and added interest is great, but try to avoid too much of it or you may end up with a site that has too much going on.
Testing @font-face Support on Mobile and Tablet - A few attempts to document font-face support across desktop devices, including the article @font-face feature detection on Paul Irish’s blog, are often misleading and deprecated when it comes to the mobile world of pain.
Giving CSS Animations and Transitions Their Place - Here are a pair of methods I’ve found to be pretty helpful in keeping the potential bloat and wire-crossing under control when CSS has its hands in both presentation and behaviour.
PHP Anonymous Functions: What Are They, and Why Use Them? - In this tutorial you’ll explore anonymous functions in PHP. Anonymous functions are a PHP feature that you probably won’t use that often; however, they can be really useful in certain situations.
How To Work With Linear, Radial, And Repeating CSS Gradients - Gradients are things of progressive enhancement and not usability requirements. They should never be essential to your design working. In other words if someone using IE8 can’t see your gradient, it’s not a big deal.
PHPitfalls - The first thing you come across when starting out with PHP is probably the fact that it has an extremely bad reputation. You will hear lots of things, including “it doesn’t scale”, “it’s not a real language”, “it doesn’t have X so it ..
:hover is dead - With the proliferation of touch enabled devices, the :hover pseudoelement is dying. How many times have you tried to access a menu orsome form of navigation on a touch enabled device only to find that themega-menu is based on :hover events.
Nine Ways to Improve User Experience in Mobile Design - how to build a great mobile site, and here are nine tips from the book for optimizing your site for all those mobile site visitors.
How to design forms that convert - Any time one of these forms is abandoned we lose a potential customer, so it’s in our best interests to make sure as many people as possible complete the form.
12 Design Best Practices for Drop-Down Menus - We often focus optimization activities on landing pages, checkouts and home pages, and less on the pages that provide the “assists” in conversion.
A Harder-Working Class - In the next handful of paragraphs, we will look at how these emerging practices – such as object-oriented CSS and SMACSS – are pushing the relevance of class
Using web fonts in email - If you’ve ever flirted with using web fonts in your email designs, it may be your lucky day. With the @import CSS at-rule, support for less-traditional typefaces is looking better than ever.
Placeholders and Overflow - Unfortunately in some circumstances the INPUT element’s placeholder text doesn’t fit within the length of the element, thus displaying an ugly “cut off.” To prevent this ugly display, you can use CSS placeholder styling and
CSS Click Events - An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks.
CSS Baseline: The Good, The Bad And The Ugly - Vertical rhythm is clearly an important part of Web design, yet on the subject of baseline, our community seems divided and there is no consensus as to how it fits in — if at all — with our growing and evolving toolkit for designing online.
Calc()ulating layouts & backgrounds with CSS - It’s pretty easy — the
calc() function can be used anywhere lengths are required. This means it can be used in margin, padding, width, heights background-position, and a lot more.
How to Detect DOM Changes in CSS - Traditionally the two classical methods for detecting DOM changes are 1) using a timer, or 2) binding on the DOM mutation events. Both methods suck.
Vexing Viewports - Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal. This agreement has never been more important.
Conditional loading of resources with mediaqueries - Here is a quick idea about making mediaqueries not only apply styles according to certain criteria being met, but also loading the resources needed on demand.
The Worst UI Pattern in Existence - Infinite scroll + footer. Scroll through page content to the footer. As you start reading the footer links, the site injects new content into the page and the footer gets pushed down below the fold.
What’s the Difference Between Fixed, Fluid, Adaptive, and Responsive Web Design? - As a web designer, it’s important to embrace that your website is going to look different in various browsers and on different devices.
The Pros & Cons of Responsive Web Design - However, now with Responsive Web Design, a page is constructed in a way that it automatically adapts to the device’s screen size. Although, there are many advantages to Responsive web design, there are few disadvantages as well.
Writing Semantic Microformats & Microdata in HTML Markup - I want to dedicate this article as an introduction to microformats and microdata. Google does recommend using these formats in your HTML code if you want to increase SEO rankings.
Dive into Flexbox - Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail.
CSS Masks – How To Use Masking In CSS Now - Today I want to talk about another WebKit-only feature and show you how you might be able to use it across all of the browsers: This is about…
How To Deal With Vendor Prefixes - If you write CSS you almost surely need to be using vendor prefixes on some parts of the code you write in order to ensure the best browser support. So how do we author CSS so that we always are using the correct prefixes all the time?
Introducing the HTML5 Datalist Element - But what if we want the user to be free to enter what they please whilst at the same being given some suggestions? This is where
datalist comes in.
Choose the right PHP framework - Frameworks provide a foundation where developers’ code can be neatly arranged. Documentation, common problems, solutions, tips and advice can be shared online in an open source fashion.
Getting to Know CSS3 Selectors: Other Pseudo-Classes - In this article, I’ll review the remaining pseudo-classes introduced in CSS3: the state-based, target, and negation pseudo-classes.
Creating Semantic 2-Column and 3-Column CSS Layouts - In this tutorial I want to look over a series of different CSS column layouts. We can see how to build websites using floats and direct positioning. There are new standards being written so frequently it can be difficult to gauge the best possible solution.
5 Use Cases for Icon Fonts - Icon fonts are great: You can CSS the crap out of them and they don’t mind, They look good on any display or resolution and There is only one HTTP request for any size set of icons. Let’s look at 5 typical uses cases for icon fonts.
Scrolling Performance - Scrolling doesn’t immediately seem like something you’d think about from a performance perspective. After all, your content is styled and all your assets are loading or loaded, so why all of a sudden might we care about what happens when you scroll?
A Responsive Off-Canvas Menu - We need to embrace the viewport and do more than stack content vertically; one very long scroll is no better UX than a zoomed out, fixed-width format.
Choose The Best Responsive Email Layout For Your Message - When thinking about email, these patterns help designers understand the way subscribers are learning to interact and the way brands are working to create sustainable investments in the new approach.
10 Easy Things All Web Developers Should Do For Web Accessibility - If you don’t know anything about ARIA or web accessibility, but you still want to make it possible for all users to use your website? We’ll explore ten easy things that all web developers should get used to doing.
Page Weight Matters - Many of us are fortunate to live in high bandwidth regions, but there are still large portions of the world that do not. By keeping your client side code small and lightweight, you can literally open your product up to new markets.
A Visual Database Gallery In Pure CSS - This effect is best suited to a portfolio of two dozen images or less. The goal is to filter the works by type to allow the visitor to view images in different categories, just as a true database would, only visually.
StackSlider: A Fun 3D Image Slider - An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for viewing.
Responsive & Touch-Friendly Audio Player - A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.
Make a Jquery and CSS3 powered Lightbox Gallery - Learn to make a fully functional lightbox using Jquery with both mouse and keyboard based controls for navigating images. The thumbnails have cool hover effects with zoom icons added by CSS3 pseudo elements to save on repetitive HTML.
Fullscreen Pageflip Layout - A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.
Coding a Minimalist Portfolio Layout with Dynamically Sorted Projects - I want to demonstrate how we can build a dynamic filtered portfolio list using jQuery. To speed up the development process we can use a jQuery plugin Quicksand to help with the sorting animations.
Creating a 3D Button in CSS3 - Today I want to show you how to use some of the awesome new features in CSS3 to create an animated, three-dimensional button. To start off, we care about creating a fun experience that works to its ..
Sticky Captions Concept - A little trick on how to make captions of thumbnails or items “sticky” in order to stay visible in the window or viewport. The main idea is to see when a hovered element overflows the viewport and show the caption in the right place by changing its position from absolute to fixed.
Create a Flexible Folded Paper Effect With CSS3 - In this tutorial we’ll learn to create a flexible (responsive) folded paper effect using CSS3 features like background gradients and box-shadows, which can give a cool-looking background to the content area of your website.
Create Polaroid Image With CSS - In this tutorial we are going to display images in a polaroid style using just CSS. The links will need a title attribute as we will use this as the text for the image caption.
Create an Animated Share Menu With CSS - Today, we’re going to build a simple sharing menu that integrates an icon font as well as some animations. The final product is inspired by Disqus, but has a unique twist of its own.
How To Code a Vertical Accordion Nav Menu with jQuery - In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click.
Slider Pagination Concept - An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.
CSS Card Tricks - Know any good card tricks? Hopefully, after today, you will! We’re going to build some simple and attractive playing cards with pure CSS, then we’ll learn how to target and animate each card for some added fun.
Wishing You A Responsive and Retina-Friendly Xmas! - An experiment with different responsive (and retina-friendly) background-images and various media-queries. Show a different background-image in every defined media-query.
Tools (web applications, bookmarklets, frameworks etc.)
GoSquared - Use real-time analytics to understand what’s happening on your site. GoSquared provides analytics behind your site’s traffic the moment a visitor lands on your homepage. Not a second later.
MQFramework – A responsive CSS framework based on a 12 column grid, has been structured to suit different needs, be it from a new project to fitting into an existing project with very little changes to the code.
Rounded Rectangle Radius Resizer - This tool will allow you to edit the radius of a rounded rectangle after you’ve drawn it.
Proto.io - A new UI prototyping tool specifically tailored for mobile applications. The web based environment allows you to start off by creating a project for popular devices like iPhone, iPad, Android phones or tablets, as well as any device with a screen interface.
Extensionizr - A good start to create a Chrome extension and it is also open source. The tool has various options to choose like: the extension type, background page, content scripts, permissions to Chrome modules and more..
xander.io - 90/10 is simple and better than A/B. 90% of page requests go towards your best variant. 10% of your page requests go towards finding the next best variant.
Copybar.io - A simple but revolutionary feature. For any website, on any platform, you can edit your content directly on the page. You do not need to login to a backend. You do not need to toggle between your editor and your page.
Site44 - Site44 turns Dropbox folders into websites. Edit your HTML locally, and your website will always be up-to-date. Creating a new website with our free plan takes less than a minute
GAS - A wrapper around the Google Analytics Tracking API from Google. It tries to add new functionality while keeping the same API. GAS is not an official Google library and GAS developers are not affiliated with Google.
wysihtml5 - An open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
Lorempixels - Placeholder Images for every case. Webdesign or Print. It’s simple and absolutely free! Just put the custom url in your code to get your FPO / dummy image.
Framote - Give us an initial URL and we’ll generate you a Framote.com short link which will embed yours. You’ll be able to change the embedded URL anytime.
Centurion - A CSS framework, built using SASS and CSS3 media queries, for creating (mostly prototype) layouts that behave good on all devices. It includes a 960px grid (that scales down to 320px), can handle image scaling and has a navigation with desktop and mobile versions.
HTML5 Bones - A template that goes back to basics and provides you with the bare minimum required to get going withHTML5. Inline comments explain how and when to use some of the most common HTML5 elements.
FooTable - A jQuery plugin that aims to make HTML tables on smaller devices look awesome - No matter how many columns of data you may have in them. FooTable transforms your HTML tables into expandable responsive tables.
extender - A library that helps in making APIs chainable. It does this by creating a function that accepts different values and returns an object with functions based on the type.
Vegas - An exciting jQuery plugin for creating fullscreen backgrounds for web pages. The plugin’s capability is not limited to displaying a single image but can also rotate a list of images automatically.
FooTable - A jQuery plugin that aims to make HTML tables on smaller devices look awesome - No matter how many columns of data you may have in them. FooTable transforms your HTML tables into expandable responsive tables.
version.is - An API for getting the latest version of Open Source projects
Tweed - jQuery plugin for dysplaying a simple feed of recent tweets. Type of query that determines what kind of API request will be made. Three types of queries are supported
Aware.js - A simple jQuery plugin that allows a site to customize and personalize the display of content based on a reader’s behavior without requiring login, authentication, or any server-side processing.
jQuery.Shapeshift - Inspired heavily by the jQuery Masonry plugin, Shapeshift by Scott Elwood is a jQuery plugin that will dynamically arrange a collection of elements into a grid in their parent container (like on Pinterest).
Glider - A one-template-file WordPress theme that uses jQuery’s .load() function to ping WordPress for single posts, then inline-loads the post in question – this results in the ability to read all the posts without any (apparent) page loads.
Customizing the WordPress Menu with Custom Classes - The standard menu in WordPress, while powerful and easy to add onto almost any theme, leaves a bit to be desired when it comes to styling.
Add Custom Post Types to Tags and Categories in WordPress - Out of the box, WordPress does not automatically take your newly created custom post types and add them to the archive pages for existing taxonomies ‘categories’ or ‘tags.’
How to Create a Custom Options Page in WordPress - One thing that seems to define technology is that users like both ease of use and the ability to customize the appearance of everything they use. Custom preferences pages within the WordPress are the best way to combine these interests.
Conditional Variables and Database Queries within WordPress - The development team behind the world’s most popular content management solution has included a way to alter templates “on the fly” using database queries and conditional variables.
Discover WordPress Conditional Tags - They are simply great because thanks to these tags it’s very easy to create conditional statements. You can for example display content only for some users, or load scripts only if a page is using ..
How to Create WordPress Photo Galleries with the New 3.5 Media Manager - The biggest change in the recently released 3.5 version of WordPress was undoubtedly the way media is handled. Not only did the Media Library change, but the way galleries are created also changed.
The Ultimate Guide to WordPress Permalinks - One important consideration when building and setting up a new WordPress site is definitely your URL structure, better known in WordPress as the permalink structure.
Inserting Widgets With Shortcodes - The shortcode ability of WordPress is extremely underrated. It enables the end user to create intricate elements with a few keystrokes while also modularizing editing tasks.
Practical Tips for Improving Your Code - So rather than focus on how to build something or review any particular code, let’s review a few practical tips for writing quality WordPress code.
Optimize WordPress in Five Minutes Tips and Tricks - I have to say that it is not an easy task to maintain a clean WordPress website especially if multiple authors are producing content.
10 Things I Hate About WordPress (And How to Fix Them)- it’s about providing solutions to some common problems. One cool thing about WordPress is that if you don’t like something, you can always contribute your idea for a fix because it’s open source.
How to Integrate Google Maps Into WordPress Shortcodes - Well, it`s not that hard and requires minimum PHP knowledge. To prove you, I`m going to create a shortcode which allows us to integrate Google Maps into any post/page.
Add a SlideShare Presentation to Your WordPress Site - Slideshare is a popular online presentation viewing service. Members can upload presentations in multiple formats, host them in the cloud and deliver them through Slideshare’s viewer.
How to Change the Default Media Upload Location in WordPress 3.5 - Important but less talked about change is the disappearance of the option to change the upload directory path from Settings.
A Comprehensive Guide to Formatting Your WordPress Posts and Pages - Belly on up to the WordPress formatting bar, and let’s take a look at seven ways to polish up your posts and pages.
Understanding and Using Hooks and Filters in WordPress - The success of WordPress majorly depends on the flexible and easily extendible architecture of WordPress. This lets the plugins and themes add functionality to WordPress without changing the core WordPress files.
How to Add Rotating Testimonials in WordPress - In this article, we will show you how you can create a rotating testimonials area in WordPress where testimonials fade in and out automatically. You can use this technique for other uses as well such as quotes, etc.
Backing Up WordPress? Don’t Make These 9 Mistakes - A good backup plan is your insurance policy on your WordPress site! Here I’ve compiled a list of the most common WordPress backup mistakes, and added a few tips on how to avoid them.
Pros and Cons of using WordPress Template Frameworks - In this article, we are going to understand what does it mean by WordPress template Framework and why did it come into existence. Later we will discuss about the Pros and Cons of WordPress Template Framework.
.. and don’t forget these!
One Div - An inspiring set and showcase of icons that are created with a single
<div> element and with the help of creative CSS3 rules. There are 55+ icons, new ones are added from time-to-time and it is possible to click the source codes with a click or download them.
pixeltalks - Video presentations from the best Web conferences in the world: creativity, web design, typography, UX Design, etc.
Colour Accessibility - Colour is very relative — not just in the way that it appears differently across different devices due to screen quality and colour management, but it can also be seen differently by different people — something we really need to be more mindful of when designing.
Review of the Best Font Managers for Your Own Usage - There are a huge number of font management apps, and I’ve tried a lot of them. So, let’s start talking about their pros and cons.
10 Free Online Books for Web designers - Today we have collected 10 free online books to add to your collection. From classics that you know to new presentations transformed in pdf files, we have 11 files for you.
Four Custom Icon Font Generators Compared - Icon fonts are all the rage right now. They make it so dang easy to embed vector graphics into a page that designers everywhere are turning to them as the primary way to handle icons.
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.
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