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
PHP The Right Way – There’s a lot of bad information that leads new PHP users astray, propagating bad practices and bad code. PHP: The Right Way is an easy-to-read, quick reference for PHP best practices, accepted coding standards, and links to authoritative tutorials around the Web.
CSS Columns – One of the newer CSS properties at our disposal is the column set of properties; these properties allow us to create columned containers without the hassle of floats, clears, margins, and more.
The Beginners’ Guide to Benchmarking User Experience – Here are 6 steps for benchmarking your user experience designs against your client’s business objectives. The same approach works whether your clients are internal to your organisation or external.
Design Tips for a Cleaner User Interface – Minimalism is the design concept where you build interfaces using only the most important elements. These websites often come out looking very clean and intuitive for users. The style has been adopted in many different fashions ..
Design for Readability – Compared to their print counterparts, the web versions of many magazines give readers a decidedly poor reading experience. Most websites follow a lackluster design model. Will digital publications ever be able to compete with the reading experience ..
An Introduction to the CSS Flexbox Module – Currently, the CSS Flexbox specification is a working draft! The examples this tutorial covers could potentially fail to work in the future, as browsers change their flexbox implementation to match up with the specification.
The CSS Guide – This series has been created to teach you everything you need to know about CSS in order to operate in the web design world. We’d recommend doing a few sections a day, and in no time you’ll have mastered CSS! After that we have every CSS property indexed so you can keep track of support for a particular feature.
Building a Responsive, Mobile-First Navigation Menu – This tutorial will demonstrate how to develop a complex responsive navigation menu using the “Mobile-First Approach“. The aim is to present mobile users with a pseudo-native, touch-conducive and interactive interface that enables them to navigate the website with ease.
Basic Usability Ideas for Intuitive Design – In this article I want to share some ideas for basic, fundamental truths to building a usable interface. Designing a website is challenging even as a generic idea of colors, widgets, and wireframe mockups.
The case for responsive webcontent: it’s all about the users – There is a case to be made for content to not simply shift or hide, but to change altogether. For it to change based on certain contexts; based on use cases. Top tasks dictate use cases, and use cases dictate content.
A Look Into: CSS3 :First-Of-Type Structural Selector – The
:first-of-type selector will target the first child of the specified element, for example, the snippet below will target the first
h2 on the web page.
10 Latest HTML5 Tags to Get Professional Skills - In a word, HTML5 offers a number of new unique features aiming to change the way websites and users interact. Let’s revise the key tag innovations of HTML5 markup.
10 things web developers must know to become truly amazing – Developers need to be more than code-generating grunt workers. We’re expecting more of our digital life and it’s these guys who build it, so what do the best devs need to know?
Mastering CSS3 Box-Shadow – This post want’s to bring up one of the great features introduced in CSS3, the box-shadow property. Now you can stop using images for displaying box-shadows, with just a few CSS lines you can create awesome effects.
The Pain of HTML5- Not all of the things we would like to do are possible yet. That’s what this post is about; places where HTML5 currently falls short that have hurt us in the last month.
Best Practices For Efficient HTML5 Coding – HTML5 is quickly becoming the standard in terms of front-end coding, and as a web developer you definitely need to know how to code HTML5 websites. After almost two years of HTML5 coding, I have compiled this list of ..
New blending features in CSS – The first blog post only talked about blending between HTML elements. However, the CSS box model and the CSS3 background spec define a stack of content and sometimes you want to blend within this stack.
Advantages of Responsive Web Design – The first question you need to ask is the importance of having an efficiently designed website for your company. A study by Compuware has found that almost 57% of users will never recommend a company with a bad website.
10 Ultimate Usability Guidelines for Web Designers – Gather some good knowledge on usability nitty-gritty and ways to put them into practice. Continue reading and you will learn how to implement usability basics on your website without having to spend a fortune.
Mobile Meta Tags – Luckily there is a meta tag that you can use on all your pages to ensure that the devices look the way you intend them to:
viewport. With this meta tag, you can override the default viewport to set a width that makes sense for your page.
Responsive Web Design Tips – Different visitors operate different websites through different devices; for many of the websites creating a version for a different resolution and devices is next to impossible. But should this become a reason for us to lose our valuable visitors from ..
Best Tools For Cross-Browser Compatibility Check – Therefore to make sure the website runs well in all the environments, it’s important to do cross browser testing in at least Opera, Google Chrome, Internet Explorer and Firefox.
What is .htaccess? – Generally speaking, an
.htaccess file is a server document used to define directory or file permissions, URL rewrite rules, or error messages. It is most commonly associated with the display of a 404 Error message when an end user attempts to go to a URL that simply does not exist.
Swatch Book with CSS3 and jQuery – A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.
Coding a Guided Registration Form with jQuery – In this tutorial I want to demonstrate how we can build such an interface with CSS3 and jQuery. We can embed hidden form tips which only display when the user has focused on a particular field. These hints can be used to denote syntax, such as the required length of usernames or passwords.
How to grab Dribbble feed with jQuery and CSS3 – Today, we are going to look at dribbble’s API. Dribbble is a place to show off your design, it’s based on invitation basis, therefore, most designs are of high quality.
Photo Booth Strips with Lightbox – A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device friendly.
Designing an effective pricing table – Having an effective pricing table can help you a lot to increase the conversion rate for your product sales page. So, in today’s article you’ll learn how to create a nice and effective pricing table using CSS3.
Portfolio Flipping Slider Using jQuery & CSS3 – There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.
3D Flipping Circle with CSS3 and jQuery – In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.
How To Create Simple Shapes With Scalable Vector Graphics (SVG) – This week I want to consider another potential solution to some of our image issues. I want to offer a brief overview of scalable vector graphics (SVG).
Flyout Image Slider Using jQuery & CSS3 – In this post I’m going to share about how to create an experimental flyout image slider. This image slider is a stack of some images and works by flying out the selected image to the front of images stack.
Modern Block Quote Styles – Today we are going to create some fancy block quote styles. Using textures, circles, and pseudo-elements, we can put some life into quotations and testimonials.
Creating Stylish Responsive Form With CSS3 And HTML5 – In this tutorial I want to showcase many of these cool CSS3 effects. I’ve built a simple web form using some of the newer HTML5 input types. The layout is also responsive; it will adapt as the window size is reduced.
Coding A Responsive Resume In HTML5/CSS3 – In this tutorial I want to demonstrate how we can build a responsive single-page resume layout. I’ll be coding everything in HTML5/CSS3 to work properly at various screen resolutions.
Tools (web applications, bookmarklets, frameworks etc.)
Foundation 3 – Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself — and gives you new tools to quickly customize and built on top of Foundation.
Setapp.me – Share applications and tools you love. Discover new tools for your expertise. Enhance your productivity.
Validator.nu – Validator.nu has two facets: generic (complex UI) and (X)HTML5 (simple UI). Enter the URL (
data IRI to be exact) of the document you want to validate in the field labeled “Document” and submit the form. That’s all it takes in most cases.
The Semantic GRID SYSTEM – Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive? Runs on LESS, SCSS, or Stylus.
Font Awesome More 2.0 – You asked, Font Awesome delivers with 70 shiny new icons in version 2.0. This giant set of new icons was requested on the Font Awesome GitHub project and includes icon parity with Bootstrap 2.0.3.
On/Off FlipSwitch – Generate pure CSS3 On/Off flipswitches with animated transitions.
coordino – Coordino allows you to create a question and answer system for you and your users to enjoy. Selfhosted Knowledge Software
Moqups – A nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them. Stencils are objects that mimic various user interface elements.
Safe Shepherd – Data-brokers are companies which collect your family’s personal information, and sell it for people-search, background checks, and marketing. Anyone can find you. Safe Shepherd stops that by finding and removing your records.
EasyPHP - A WAMP package including the server-side scripting language PHP, the web server Apache, the SQL server MySQL, as well as development tools such as the database manager PhpMyAdmin, the debugger Xdebug and many others. Nothing to configure.
Wirefy – CSS & JS files that will help you quickly experiment with responsive wireframes. Following the philosophy of mobile first, Wirefy will respond to the proper viewport and is style agnostic so that clients don’t get hung up on colours, fonts, other design elements.
Desant – An open source and neat landing page application. It’s simple to use, customize and extend to your needs. There’s an awesome admin area too – it will give you all the information and statistics you need.
CSS Cow – Creating CSS sprites is a quite boring and time-consuming task, CSS Cow finally makes it much easier to use sprites in your web designs.
noty – a jQuery plugin that makes it easy to create alert – success – error – warning – information – confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. (Optional)
Infinite-Social-Wall – An infinite social stream based on RSS feeds with a MySQL backend.
Responsive Design Bookmarklet – a handy tool for responsive design testing.
BaseDemo – A basic template that can be used for creating demos for your development projects. It also works great for GitHub Pages. This is an example of what you could do with this template and some content types.
Proto.io – A mobile prototyping service, has created a handy generator for quickly creating on/off flipswitches. The switches are built with pure CSS3 and it is possible to customize the look completely.
Kinesis.io – Kinesis is a native framework that lets you use your existing web languages and skills to build gesture, speech and 3D depth modeling based applications using Kinect. We focus on building a simple, powerful, new interaction platform so that you can focus on ..
HorizontalNav – A jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.
wakanda – Today’s Web solutions require a patchwork of languages and technologies and a team of experts to install, configure and run them.
Introducting Wakanda. One open and complete solution for all your Web and mobile business apps.
Repo.js – A light-weight jQuery Plugin that lets you easily embed a Github repo onto your site. As a plugin or library author this is a great way to showcase the contents of a repo on a project page.
HTML5 Sortable – This plugin uses the native HTML5 drag and drop API for creating sortable lists/grids and provides a similar API + behavior when compared to jQuery UI’s sortable ( lightweight: <1kb when minified/gzipped)
Gridster – A jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better.
WordPress SEO – WordPress is one of the best, if not the best content management systems when it comes to SEO. That being said, spending time on your WordPress SEO might seem like a waste of time, it most definitely is not.
Improve WordPress Visual Editor for any theme with Editor Stylesheets – What good is a WYSIWYG editing interface if it fails to show what your marked-up content really looks like? Many themes do not make use of editor styles, even though they’ve been available since WordPress version 3.
Create A Responsive, Mobile-First WordPress Theme – WordPress is an extremely popular, flexible, easy to use and open-source blogging and CMS system. And the need is growing for more beautifully designed and coded WordPress themes that work well across all of these devices.
10 Tutorials For Developing WordPress Themes – Being able to design custom WordPress themes is almost a must for today’s web designers. The fun thing with WordPress is that there’s always something new that you can learn to make the platform work better for you and your clients.
How to Optimize the WordPress Front-End for Speed – That leaves you with optimizing the website which is 9 times out of 10 what needs to be “fixed”. Please also note that each page is unique and must be diagnosed separately. How do we diagnose the page?
How to Merge Categories in WordPress – You might be surprised to learn that it can easily be done through the WordPress dashboard. Here’s a quick step-by-step guide for merging categories without using a plugin.
Create Your Custom WordPress Dashboard Widget – Today we’ll create a custom widget which displays the latest tweets from a custom user. To do this, we use the wp_add_dashboard_widget function to register a new dashboard widget for your blog.
Not Just Backup, Your WordPress Site Needs More – Any machinery, in order to work perfectly requires proper maintenance and fine tuning, without which you’re going to end up with a rickety one. This holds true for your WordPress site too or any website for that matter.
Customizing Comments in WordPress – Functionality and Appearance – In this article we are going to see how we can change the behavior and appearance of the comments in our WordPress site.
Ten Key Ways to Secure a Typical WordPress Installation – There are a number of things that can be done to dramatically improve the security of a WordPress installation and thwart hackers’ attempts to take over a website’s content, database, and overall reliability.
Free WordPress Security E-Book Available from Code Poet: Locking Down WordPress – The book interviews the three seasoned WordPress pros, all of whom recommended updating all server code in the event of a security breach and requiring strong passwords.
Pros and Cons of Custom Functionality Plugin in WordPress – There are also some misconceptions about this file that prevents many developers from using it. Let us take a look at some of the pros and cons of custom functionality plugin for WordPress.
How to Protect Your WordPress Website from a Pharma Hack – In 2010, Pharma hack was one of the serious threat to WordPress website. Although WordPress themes like The Thesis Theme team and WordPress core developers are trying to make it more secure, ..
What You Should Know About WordPress SEO – The countless number of SEO plugins that have been developed for WordPress are a good start for most people. SEO for WordPress is however slightly different from other platforms.
.. and don’t forget these!
Where Does Advertising Fit In A Responsive World? – Ads are staying and responsive design is staying, yet the fixed nature of ads online don’t seem to lend themselves to the flexible layouts of responsive design. It seems as if something has to give.
Vendor prefixes are fucking batshit crazy - OK, I’m now officially fed up with vendor prefixes, and to a lesser extent with Firefox and Opera who’ve gone batshit crazy on us all once more. The reason? The
device-pixel-ratio media query.
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.
18 Useful Web Based Code Editors for Developers – There may be times which you are not with your computer so the below web based or let’s say browser based online editors will help you to do almost every. Today we selected most preferred online code editors by developers ..
5 Rules to Drive Traffic to Your Site Using Email Marketing – Marketing any company or institution through email can still be the most effective method, both in terms of cost and of direct market penetration, of reaching out to clients, either existing or potential.
5 Ways an Online Portfolio Can Streamline Your Job Search – Online portfolios allow you to control how clients view your work, putting you in the driver’s seat on everything from the flow of your work to what parts of your business you choose to emphasize.