Connect With WRD
feed via e-mail
feed via e-mail

While creating a responsive layout, testing it against multiple popular resolutions is pretty important to decide/optimize the content blocks to be displayed in each.

Screenqueri.es is a free-to-use and web-based project for easily testing such layouts by defining the URL and selecting the mobile or tablet device.

Screenqueri.es

After that, the application will load the URL and help you see "what's going on in each pixel" with the pixel-guided interface. And, you are not limited to pre-defined sizes but can change the width/height by playing with the ruler provided.

Also, it is possible to change the orientation with a single click.

Moobile is an exciting and fresh project; a mobile web application framework built on MooTools.

Currently, it is focused on providing a iOS-like experience on WebKit browsers and comes with many controls like bar, button, image, list, activity indicator, slider and more.

Moobile - MooTools Mobile

It also has support for transitions like fade, slide, cubic or cover and can display native-like alerts.

Interfaces created with Moobile are fluid, they will work well both in iPhone + iPad and look good when orientation changes.

The download package includes a boilerplate for quickly starting projects, related PSD files and a simulator.

JavaScript frameworks simplify sending Ajax requests so much by wrapping all the stuff into a cross-browser function.

AjaxML, a jQuery plugin, simplifies it even more for basic Ajax requests and can also handle any complex ones.

It works by defining the "details of the requests" inside HTML attributes like <a href="say_hello.html" into="divName"> ends up in hello.html being loaded inside the #divName HTML element.

AjaxML

Attributes exists for sending parameters, request method (GET, POST), validation, history and more.

AjaxML has both pros and cons. Defining requests in HTML and not being able to view/organize them in a single JS file is a minus (this can be so hard to maintain in large projects) while the ability to send requests "not-like JavaScript but HTML" can be  huge "plus" for many (specially web designers who are not good at JavaScript)

Brankic1979, a small design/dev team mostly focused on WordPress theme development, has created an amazing set of free glyph icons.

The set includes 350 icons, comes as a single PSD file where each item can be scaled to any size without loss of quality.,

Such a huge set includes almost any item an application needs from actions to charts or documents.

This icon set is free for both personal and commercial usage.

Free PSD Glyphs Icons

If you are using Photoshop, you should already have encountered the issue of banding in gradients.

This usually happen in 8-bit but, even when working with 16-bit, this can occur if you need to apply an 8-bit filter.

No More Banding is a Photoshop action which automatically converts your document into 16-bit and applies a new layer to the top of your group/document which fixes fixing all the banding.

P.S. There is a detailed read on the technique here.

Photoshop Action to Prevent Banding

Webmaster Deals LogoThere are many professional web design goodies in the wild and there should be a way to get them for better prices right?

Webmaster Deals is a website which offers such web design resources from different sources for highly discounted prices.

Deals presented include vector images, icon sets, textures, logos, themes, stock images and more.

Webmaster Deals

Webmaster Deals is regularly adding new items to their offerings and you can get notified of them via their newsletter.

Besides the paid ones, there are also free items in the "Free Deals" section.

Webmaster Deals

Get the free Graphstock membership (available for limited time)

Graphstock LogoSubscribing to the newsletter of Webmaster Deals from this page is enough for getting a free and annual "commercial membership" for the stock images website Graphstock.com.

It is free and can be unsubscribed anytime.

Hakim El Hattab (hakim.se), a very talented developer and programmer, has created a set of very nice scrolling effects.

The effects are all CSS-only and a simple JavaScript function helps attaching/removing classes to elements.

CSS Scroll Effects

Currently, there are 10+ effects and, as expected, they are WebKit + Firefox-only but degrade nicely on incompatible browsers.

P.S. You should also check the experiments page of hakim.se to see various other exciting stuff.

Ospriet is an open source web application, built by Twitter, that enables audiences to post and vote on questions/comments for talks, presentations, events, etc.

The application works with a dedicated Twitter account and anyone can send a question/comment by simply posting a @-reply to that account.

Ospriet by Twitter

This tweet is then retweeted by Ospriet so that other users can see/favorite it and they will be presented as a list of most favorited entries in Ospriet's front-end.

It is built with Node.js, uses MongoDB for storing the data and uses Twitter's Bootstrap for the interface (which is responsive).

jPages is a client-side pagination script (a jQuery plugin) with features like keyboard + scroll navigation, auto page turn, delayed display and a customizable navigation panel.

Any number of pagination elements can be inserted into the same page and they can be positioned with ease.

jPages - jQuery Pagination Plugin

The plugin detects the number of items in a given list and auto-creates the navigation.

Callbacks exist to get the current page, total number of pages, number of items, etc. and it is possible to intervene the page number to be displayed using an API method.

P.S. There is an optional integration with the popular scripts Animate.css and Lazy Load for a more attractive and faster pagination experience

There are web-based generators for almost everything; stripes, buttons, forms, loader icons, etc.

CSS Arrow Please focuses on another niche; yes, totally CSS-based (no images) arrows.

This CSS trick is great for using in tooltips, the generator offers multiple options for customization (the position, color and border values) and auto-creates the related CSS code.

CSS Arrow Please

Uptime Robot
Loading...
Get WebResourcesDepot Weekly
A Weekly Newsletter For Web Designers And Developers
feed-holder
FeedBurner
  • PSD to HTML
  • PSD to HTML
  • file uploading, video/audio/image encoding, s3 storage and much more
    aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter