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
Browserhacks – An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Handcrafted by Hugo Giraudel and Tim Pietrusky.
JSDB – A collection of the best javascript libraries with ratings and some GitHub stats.
Tips for using SVGs in web projects – When trying to utilise them in large web projects there are a few pitfalls I’ve come across that I haven’t found to be documented. This post therefore serves as a few pointers if you are looking to employ them in a web project.
Git Tips From the Pros – We’ll take a look at some of the advanced features and workflows that you might not already be familiar with. Hopefully, you’ll walk away with your mouth agape at the sheer possibilities that git provides!
Dig deep into CSS gradients – The idea that you can obtain many shapes using just gradients was a starting point for many CSS experiments I would later do.
Responsive Tables – A few smart folks have already put together their thoughts on responsive tables and, while I think the proposed methods are pretty good, I think there might be room for improvement.
Getting Started with Responsive Typography – Responsive type is resizable. It can be changed based on screen size or user preference. Responsive type adjusts for column width as well, so that lines of text are not too long or short. Responsive type also adjusts for differences in pixel density and screen resolution, so that letterforms do not become pixilated or blurry.
Mobile Navigation Patterns – This is an article about helping mobile site viewers find what they’re looking for more quickly and directly, removing barriers and hopefully making a better navigational experience for everyone (with a focus on e-commerce).
Photoshop Blend Modes in CSS from The Adobe WebKit Team – It’s very early days so this obviously isn’t an in-depth look but it’s fantastic to see the power of blend modes coming to CSS. It’s also fun to see what the future of CSS will look like and this is very exciting.
Using The New Twitter API V1.1 – From March 5th 2013 Twitter are removing there current API and it will be fully replaced with the new API V1.1. This means that any application that is currently using the old API will stop working on March 5th.
Using background clip for text with CSS fallback – It is no surprise to find people using non-standard properties in HTML, and it is no big deal if it fails gracefully in other browsers. Unfortunately, background-clip: text fails rather spectacularly in non-WebKit browsers.
CSS frameworks and semantics – It’s our responsibility as web developers to keep standards alive. We shouldn’t let convenience and speed get in the way of well structured, semantic HTML.
Responsive Web Design: Advantages To Gain And Challenges To Face! – Stats reveal that the mobile-based website hits were 7.12% in August 2011 and the count rose to 11.78% in August 2012. What does it mean? The future would be of Smartphones and most of the internet searches would be made through mobile phones.
Mobile Considerations in User Experience Design: “Web or Native?” – The purpose of this chapter is to empower you, as a user experience designer, to understand your medium so that you can answer these questions informedly, starting by looking at what exactly we mean by an application being “native.”
Create a Mobile User Experience – Whether you build from scratch or look for some parts to get started, consider mobile as an important part of your overall design scheme. Think about how you want users to interact with your site and what actions they will take.
Using Flexbox: Mixing Old and New for the Best Browser Support – Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support.
Exploring Device Orientation and Motion API – The Device Orientation API exposes two different types of sensor data: orientation and motion. Such APIs will let Web developers easily deliver advanced Web user experiences leveraging modern devices’ sensors.
HTML5 forms introduction and new attributes – HTML5 introduces a number of new attributes, input types, and other elements for your markup toolkit. In this article we’ll be focussing on the new attributes with a future article looking at the new input types.
HTML’s New Template Tag, standardizing client-side templating – A new <template> element which describes a standard DOM-based approach for client-side templating. Templates allow you to declare fragments of markup which are parsed as HTML, go unused at page load, but can be instantiated later on at runtime.
Web Design: Customize Checkboxes and Radio Buttons with CSS3 – With CSS3 we can customize web presentations to be almost anything we want it to be. In this post, as the title says, we are going to customize the look of checkbox and radio input.
Take Control of the Box Model with box-sizing – In this article, we’ll go over a few important things to know about the box model, like how it affects defining accurate fixed and fluid sizes, then learn how to tame it with the new box-sizing feature.
Feature Support & Polyfills – There are a handful of common practices to get websites to perform adequately in all browsers, some of which have already been covered within this guide. When incorporating CSS3 properties, fallbacks are recommend to support older browsers.
Font Hinting and the Future of Responsive Typography – Font hinting has been the source of countless headaches for type designers and users. Meanwhile, some of the most fundamental and important elements of typography still can’t be addressed with the web of today.
There Is No Mobile Internet! – We need to embrace a device-agnostic approach to communicating with connected consumers and forget the idea of a “mobile Internet”. There is only One Web to experience.
3 Types of Breakpoints In Responsive Designs – At the very least there are 2 distinct types of breakpoints, those for major changes and those for minor ones. I think there’s a 3rd group in between where the change isn’t as major as changing the entire layout, but is significantly more than a tweak.
Tutorials
How To Create a Simple Collapsing Header Effect – Making use of a simple collapsing header effect, where the page header or banner would gradually shorten and disappear upon page scroll. Let’s take a look at recreating this cool effect for use in your own website designs.
Create a 3D Book Animation with CSS – With the introduction of transforms in CSS, we can now replicate 3D objects. The 3D book I’ve created consists of two elements, the spine and the cover.
Interactive Infographic with SVG and CSS Animations – With the right techniques and modern browser support, developers can now produce some pretty impressive animations, effects and interactions using SVG. Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.
Icon Fonts in Use with a Fancy Hover Effect – In this tutorial we will play a bit with icon fonts. Besides other advantages, this technique provides an easy way to have your icons look crisp on retina displays. We’ll use a custom set of social icons generated with IcoMoon App and we will add a fancy effect on hover.
Neat Table of Contents with Jquery and CSS3 – In this article we will create a nice little Table of Contents with bit of jQuery and CSS3. Div element stays fixed on the left or right side of the page for easy navigation of the page, it can be expended and collapsed easily by a reader.
Adding Motion into Web Design with Animate.css – Lots of frontend web developers have been getting interested in dynamic interfaces using motion effects. This is all too common with many advancements within popular JavaScript libraries. But there has also been a lot of interest in CSS3 animated effects.
Create an Absolute Basic Mobile CSS Responsive Navigation Menu – In this tutorial we will go over the process in coding a very basic CSS responsive navigation menu. We will transform a basic non-list style navigation to a drop down menu using media queries in our stylesheet. There’s no need for javascript in this tutorial.
Coding a Horizontal Navigation Bar with jQuery Dropdown Menus – For this tutorial I want to build a simple jQuery-powered dropdown menu. This can work well using the animate method for generating delayed effects. Along with the typical JS codes I have also worked some CSS3 transition effects into the stylesheet.
Full Width Image Slider – This slider has a 100% width layout and it is responsive. It operates with CSS transitions and the image is wrapped with an anchor. The anchor can be replaced by a division if no linking is needed. With a max-width set to 100%, the image will size down for smaller screens.
How to Build an iOS-Style Content Slider using jQuery – Building a custom slider widget to work properly in modern browsers and smartphones is not easy. Many of the supported browsers for Android and iOS devices are advancing, too. This means we can expect support for greater ideas in the near future.
Create an accordion menu using CSS3 – However there is one problem with using the :target and that is that it makes it impossible to close the content areas again or have multiple sections open at the same time. We fix this by using hidden checkboxes, we can control the opening and closing.
Tools (web applications, bookmarklets, frameworks etc.)
Groundwork – Framework to make responsive development and rapid responsive prototyping a breeze. Groundwork has been built from the ground up with the incredibly powerful CSS preprocessor, Sass. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
5G Blacklist – Helps to reduce the number of malicious URL requests that hit your website. It’s one of many ways to improve the security of your site and protect against evil exploits, bad requests, and other nefarious garbage.
Flight – A lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications. By way of example, we’ve included a simple email client demo (browse the source code) built over the Flight framework.
MQtest.io – A simple tool to help identify which media queries your device responds to. This test isn’t about what media queries your device can or cannot see. Instead it shows you which dimensions your device will respond to when using ‘width=device-width,initial-scale=1.’
PilotSSH – A secure application for server administration. It uses a set of scripts on the server side to create a nice graphical user interface. Pilot your servers in a few touches! Restart servers, read logs, manage users and processes… With PilotSSH, everything can be done in a few touches!
Segment.io – Lets you send your analytics data to any service you want, without you having to integrate with each one individually. No more littering your app with tons of different analytics services. Instead, instrument your app once cleanly and then send your data to any analytics service you want.
Windu CMS – A simple, lightweight and fun-to-use website content management software. system was made by a company designing websites. The use of file-based database and efficient object-oriented PHP code, Windu CMS is really fast.
Slidr.css – A standalone CSS library for sliding checkboxes. No Javascript needed! Slider.cc was built on top of Twitter Bootstrap, therefor I added the default styles which are used for labels, badges, buttons and so on.
cgSceneGraph – A powerful, cross-platform and very easy-to-use animation framework written in JavaScript for the <canvas> tag in HTML5. It’s full object oriented to ease the development of your applications and games.
Roole – A language that compiles to CSS. It drew many inspirations from other CSS preprocessing languages like Sass, LESS and Stylus. The most unique feature of Roole is that it has vendor prefixing built-in, so the language stays dead simple yet being able to prefix some extremely complex rules transparently.
Squash – An exception reporting and bug analysis tool. Squash uses git blame to figure out who can fix the bug. Squash analyzes the stack trace of every exception, and determines which line in the backtrace is the source of the bug. Squash shows you where in the code the problem was, so you can quickly get to fixing it.
Conditionizr – A fast and lightweight (4KB) javascript utility that detects browser and pixel ratio, allowing you to serve conditional JavaScript and CSS files. Rebuilt from it’s jQuery predecessor, it’s now 50% faster.
hhhhold! – Feel the insanity of user-generated content in your project by putting simple hhhhold! URLs in your code.
Browser Refresh for Sublime Text 2 – After installing this plugin you can hit command + shift + r on Mac OS X or ctrl + shift + r on Windows while using your favorite browser, the last active window will come to the foreground and reload the active tab.
DevRef – The Developer’s Reference
Adobe Edge Reflow – Visually design responsive websites. Edge Reflow offers a flexible design approach, visual media query breakpoints, a customizable fluid grid web fonts integration, and much more.
Inspectlet – Watch visitors use your website. Discover where visitors are getting confused on your site and what’s getting their attention. See every mouse movement, scrolling, clicks, and typing on your site.
color.hailpixel – A different kind of color picker where you can explore hex colors in an intuitive way.
Foundation – What’s new in 4? Responsive design gets lighter, faster and more advanced, so you can code smarter. Now you can build for small devices first. Then, as devices get larger and larger, layer in more complexity. Everything is now semantic.
Parallax scrolling - It is a collection of HTML/CSS and JavaScript files to be used for web designers and developers and baked into a responsive framework.
StatusCake.com – Free Unlimited Website Monitoring. Make sure you’re the first to know about your website’s downtime. StatusCake.com has a network of monitoring centres throughout the world.
Markdown.css – Makes it easy to make your HTML markup look like plain-text markdown. All it takes is the inclusion of the markdown.css file and defining some classes in your HTML.
Bolt – A tool for Content Management, which strives to be as simple and straightforward as possible. It is quick to set up, easy to configure and uses elegant templates. Bolt is created using modern open source libraries, and is best suited to build sites in HTML5 with modern markup.
Koken – A free system designed for photographers, designers, and creative DIYs to publish independent websites of their work. We developed Koken to offer photographers, designers and artists a different kind of publishing platform.
csswizardry-grids – Simple, fluid, nestable, flexible, Sass-based, responsive grid system.
jQuery Plugins, Javascript, APIs, etc.
Nested – A jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout.
Rubberband – A jQuery plugin for adding responsive breakpoint events.Sometimes you need to know when your responsive design changes. Rubberband fires events when the browser enters and exits breakpoints matching your media-queries.
Fly In/Out Gallery – A simple gallery with a fly-in and fly-out animation between images. Using keyframe animation for IE10, Firefox, Chrome, Safari, Opera and iPad etc. and a fallback styles for earlier versions of IE.
Picker – A jQuery plugin for replacing default checkboxes and radios.Replace those boring default checkboxes and radio inputs with a custom picker. Picker will atuomatically detect the type of the input and render the proper styles.
Cinnamon.js – Allows users to find links, images, and other content by their synonyms, using the browser’s built-in Find function. Cinnamon.js works on modern browsers and IE8+.
Queen.js - A platform for running scripts on many browsers. Queen is a server which captures browsers and then is able to push scripts to them to run in a clean context (an iframe).
jQuery.BlackAndWhite -This plug-in can easily convert any colored image into a B&W greyscale image. It uses the the HTML5 canvas tag and a fallback for the old browsers
PeerJS — True peer-to-peer data in the browser. PeerJS wraps the WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer data API.
Textillate.js – An ease-to-use jQuery plugin for applying CSS3 animations to any text. Textillate.js combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text. It uses lettering.js and animate.css.
Backgrid.js – A set of components for building semantic and easily stylable data grid widgets. It offers a simple, intuitive programming interface that makes easy things easy, but hard things possible when dealing with tabular data.
Toolbar.Js - Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexability around the toolbars display and number of icons.
Crossfilter – A JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records.
Lazy Line Painter – An awesome jQuery plugin for SVG path animations. It uses the Raphaël library.
Navi.js – Navi makes it easy to dynamically display content on your sites. Instead of cluttering up your site tree with extra files, you can easily write all of your html code for multiple pages in one file.
threesixty – a jQuery plugin for creating draggable 360s.
Sidr – The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive. You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too).
Conditionizr – A fast and lightweight (3KB) javascript utility that detects browser and pixel ratio, allowing you to serve conditional JavaScript and CSS files. Rebuilt from it’s jQuery predecessor, it’s now 50% faster.
iLightBox – A fresh and revolutionary jQuery lightbox plugin that is packed with features: it comes with fullscreen, retina-ready skins, supports for swipe events, Youtube and Vimeo integration for HTML5 video, and a powerful Javascript API.
typeahead.js – Inspired by twitter.com’s autocomplete search functionality, typeahead.js is a fast and fully-featured autocomplete library. typeahead.js has a dependency on jQuery 1.9+, it must be loaded before typeahead.js.
Anima.js - CSS animations have some limits, the main is that you can’t really have full control over them. And it’s near impossible to stop transitions without dirty hacks. Anima gives you the ability to use delays and durations normally, even for pure CSS animations.
WordPress Related
Understanding and Using Widgets in WordPress – In this article we are going to see how the admin can drag drop the widgets and how can we develop a WordPress widget with options, defined to customize the behavior of the widget.
10 of the Leading WordPress E-Commerce Plugins – If you’ve been thinking about using WordPress for an e-commerce website you may be wondering which e-commerce plugin is the best fit for your needs. There are several different options available, and in this article we’ll look at 10 of those options.
Creating Vanity URLs in PHP: Rewrite Rules – In this post, I’ll show you a more advanced technique that will keep your folder structure clean: rewrite rules in Apache. Apache is the web server software most commonly used to run PHP sites.
Useful WordPress Utility Functions – In this article we are going to look at some of the utility functions that you can take advantage of if your website is built using WordPress. If you have a look at some of these functions you will understand how you can use WordPress not just for a simple blog, not just for a CMS but for an application framework.
14 CDN Providers to Make WordPress Blazing Fast – In this article, I shall be taking a look at various CDN options available for WordPress users and making some recommendations at the end. However, before going any further, let us first take a look at the advantages of using a CDN.
WordPress Meta Boxes: a Comprehensive Developer’s Guide – This tutorial will attempt to cover everything you could possibly want to know about using meta boxes in WordPress. Much of the information will apply to plugins as well, but there will be a few minor differences.
wp-config.php snippets for better Security and Performance – But what many users don’t know is that the wp-config.php file may be used to specify a wide variety of configurational settings, enabling you to improve the functionality, performance, and tighten security of your WordPress-powered site.
How To Clean Up & Optimize Your WordPress Install – Over time WordPress saves snippets of information to its database, which can become bloated with unnecessary values. In this post we’ll look at 10 ways you can give your WordPress install a spring clean to trim the fat and put everything in its place.
How to build effective 404-error pages in WordPress – One of the fundamental rules of UI is not to leave users in dead-ends without guidance. There is always a back button in the browser, but do you really want your visitor to have to use it?
How to Setup WordPress RSS to Email Subscriptions – Email isn’t going away and it’s still a really useful marketing tool. I often subscribe to newsletter via email still, as I find they are easier to prioritize in my life rather than just subscribing to the RSS of a site.
How to Optimize your WordPress site for Performance – Experts believe that slower sites get fewer visitors as compared to faster websites. Optimizing your WordPress theme for speed and maximum performance will lead to a positive change.
How To Improve And Refine Your WordPress Theme Development Process - I’ve asked some of the top theme designers and developers to share some tips and techniques to help you improve and refine your theme development and design process.
.. and don’t forget these!
BLOKK – A font for quick mock-ups and wireframing for clients who do not understand latin.
FILLR - a free dummy font that replaces actual characters with squiggly lines (heavily inspired by BLOKK, which uses blocks instead). FILLR makes dummy content immediately identifiable without distracting anyone with fake Latin.
No, I’m not going to download your bullshit app – Do I buy a separate radio to listen to different stations? No. The functionality is the same, the only thing that differs is the content. Apps ought to provide some actual functionality, not just blobs of content wrapped up in binary files.
Why should designers learn how to code? – Some people say that we should keep the boundaries of the traditional divide between developers who create the code and the designers that design the experience.
Stop Selling Ads and Do Something Useful – To remain relevant to consumers who spend hours each day focused on smaller screens trying to get stuff done, marketers will have to think like publishers and technology companies.
Please stop using Twitter Bootstrap – Twitter Bootstrap is great for developers; all of the pieces are nicely laid out for you, use a consistent design language, and piece together like Lego. No design sense needed and no creativity involved.
A question of style – I’m a big fan of design principles for many reasons, not least of which is they way they can help to quickly resolve debates and arguments. They become a kind of higher authority to appeal to, taking opinion and ego out of the equation.
Do you like, like Frameworks? – It’s no surprise then that despite the number of these easy-to-use tools and, as a result, increase in web designers that there is still only a small percentage of websites created today that are truly something to marvel at, especially when you consider the billions of websites that exist today.
Give a crap. Don’t give a fuck – How do you know if you’re doing a good job? There’s always an external way to measure quality—being prepared, attending to the details, listening to the collective wisdom about what it means to do good work. Give a crap about the little things, and you’re good.
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.