Visit this link »

Visit this link »

TinyPNG will make your web page load faster. I used it few times and was pleased with results.

Visit this link »

Visit this link »

Visit this link »

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media)... Read more→]]> In this post you will find useful frameworks and plugins which will help you to build responsive websites faster.

jQuery Plugins

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Response JS

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

Fittext.js

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Templates & Frameworks

320 and Up

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design. ‘320 and Up’ is a device agnostic, one web boilerplate.

Amazium

Responsive framework based on 960 grid system.

Foundation

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Inuit.css

Inuit.css framework is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

The Constellation WordPress Theme

The Constellation theme is the perfect starting point for any WordPress project. It gives you the flexibility to provide bespoke styles for different devices, totally up-to-date HTML5 code which is fantastic for SEO, a flexible grid system on top of all the other goodness bundled in to the HTML5 boiler plate.

Reverie

Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Simple Grid

SG is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window.

The 1140 grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

The Goldilocks Approach

CSS and HTML boilerplate Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

Gridpak – The Responsive Grid Generator

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

BluCSS

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials. With BluCSS, you can be up and running in less than a minute. One feature that stands out in this framework is responsive image functionality. Just apply any “blu_” class to an image, same as any other element, and the image will automatically be resized according to the browser width.

If you like this post and would like to be kept up to date with fresh design news and resources, you can follow us on Twitter, Tumblr or by subscribing to our RSS feed.

Important! If you have... Read more→]]>

This is the second post from the series of posts about useful tools and services for web designers and developers. I planned it to be a monthly series but from now I will share a collection of tools and links once a week.

If you like this post and would like to be kept up to date with fresh design news and resources, you can follow us on Twitter, Tumblr or by subscribing to our RSS feed.

Important! If you have an app or other useful resource you’d like to share, tweet it to @mazeofminds or drop us an e-mail.

Bufferapp

A lovely tool for twitter, just recently discovered. Buffer app helps you build a tweet queue and spreads out your updates over time.

Tiny Fluid Grid

This tool helps you build fluid grid based web layouts. Tiny Fluid Grid ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.

The Semantic Grid System

With The Semantic Grid System you can set column and gutter widths, choose the number of columns, and switch between pixels and percentages. And all without any none semantic “.grid_x” classes in your markup.

Golden Grid System

Golden Grid is a folding grid system for responsive web design. Created by Joni Korpi.

The Heads-Up Grid

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML, CSS, JavaScript.

Photoswipe

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. This gallery provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

jQuery Mobile Pagination Plugin

The Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link together documents via ordinary HTML anchors. The linked pages will pre-fetch, and in browsers that support touch events, you’ll be able to drag between the linked pages, while desktop users can navigate with mouse or keyboard.

TransformJS 1.0 Beta

TransformJS is a free JavaScript library to help you use 2D and 3D transforms as regular CSS properties.
TransformJS is supported in all major browsers: Safari, Chrome, Firefox, Opera, and IE. However, since all browsers don’t share the same featureset, TransformJS will make its best attempt at using the best feature available.

Batman.js

With Batman.js you can build web apps beautifully and quickly. It is a full-stack microframework extracted from real use and designed to maximize developer and designer happiness. Worth to check it out.

Evolution of The Web

Lovely interactive infographic about evolution of web created by Vizzuality, Hyperakt and Google Chrome team.

Mobilizer

This is a simple desktop app for previewing mobile websites, design mockups, and local HTML on Mac or PC.

Patternizer

As the name suggests it’s a tool for making patterns. With Patternizer, it’s easy to make cool patterns in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity.

ProCSSor

ProCSSor is a powerful and free CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.

Android 2.3.4 GUI PSD (High-Density)

Fully vectorized Android GUI PSD. The template is based on the most popular screen size (normal) and pixel-density (high) using the default Android skin as the baseline.

In this post you will find the new amazing tool from Adobe and also a few more tools to help you improve your web design workflow.

Important! If you have an app or other useful resource you’d like to share, tweet it to @mazeofminds or drop as... Read more→]]>

Web design industry is always changing. To help you keep up to date with new tools and services I decided to start a new series of posts called “Useful Tools for Web Designers”.

In this post you will find the new amazing tool from Adobe and also a few more tools to help you improve your web design workflow.

Important! If you have an app or other useful resource you’d like to share, tweet it to @mazeofminds or drop as an e-mail.

Adobe Edge

If you have been following Adobe Labs news lately, maybe you already know that Adobe is working on a new tool for web designers and developers, called “Edge”.

Adobe Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS. Edge has the WebKit rendering engine, in my opinion it’s a good choice. Speaking about the user interface, it has a timeline allowing scrubbing and jumping to any point in an animation, properties panels to adjust objects, and a panel to show the actual animation. It reminds me Flash interface. So if you have used Flash before it will be easy for you to catch up. For now you can download and try it for free from Adobe Labs web page. Unfortunately, bad news for Windows XP users – there is no XP support, maybe later but I doubt it.

Expressive Web

As you know HTML5 and CSS3 brings loads of news features and functionality to the modern web. This site from Adobe is a resource and showcase of some of the newest, and most expressive features being added to the web today.

Fractal

If you are an email designer and you are tired of trawling through check lists, this tool is for you.  See exactly which lines of code are not supported in over 24 email clients.

Font Fonter

FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web Fonts.

Flickr Bomb

If you are tired of dull and gray placeholder images  in you web prototypes then FlickrBomb is for you. It’s a new tool from web design agency Zurb. FlickrBomb will place relevant images from Flickr into your web prototypes. It’s very easy to use, easy to implement, and it makes it easy to change the images pulled from Flickr.

Gridless

Gridless is an awesome HTML5 and CSS3 boilerplate that has everything including CSS normalization, beautiful typography, a well-organized folder structure, IE bugfixes and other useful tricks. It can be very helpful if you are making mobile first responsive, cross-browser websites.

1. modulargrid.org

Modular Grid tool lets you create your grid online or you can use it directly in Adobe Photoshop via plugin. If you create you grid online... Read more→]]>

For couple of years the grid system like 960.gs or Blueprint framework became popular tools for many web designers. But not all web projects can be done with these tools. For some projects you have to make the grid yourself. In this post I included few my favorite online grid making tools.

1. modulargrid.org

Modular Grid tool lets you create your grid online or you can use it directly in Adobe Photoshop via plugin. If you create you grid online this tool offers you a few handy options like export png, Photoshop patterns and transparency mask. Highly recommended, my personal favorite.

2. netprotozo.com/grid/

Second best. It has png export and examples of CSS code. No extensions for graphic programs.

3. gridr.atomeye.com

This one has a few very useful options like “show column widths” or “drag gable boxes”. Unfortunately no exports of png, Photoshop patterns and no CSS code.

4. www.29digital.net/grid/

Very similar to previous one (“Gridr buildrrr” ), just no extra options, only grid calculator.

5. www.spry-soft.com/grids/

Simple grid calculator with CSS code.