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

Archive for the ‘Other License’ Category

You received an e-mail and want to share it with others without e-mailing them (as you don’t have their e-mails or there are lots of people to share with and e-mailing would be hard).

Litmus Scope is a free service that works with the help of a bookmarklet and converts e-mails into hosted previews (supports all major web-based e-mail clients).

Litmus Scope

The service provides a unique link for the generated previews and the preview works in all major devices.

Also, it is possible to create a free account for saving these previews for a longer period and editing them.

There are several CSS and front-end frameworks for developing websites easier.

Markup Framework, a fresh one, is a collection of layouts, widgets, typographic styles and other UI components which can be used as a base for any web project.

Markup Framework

It is mostly HTML-CSS with very few JavaScript and focuses on providing the base/skeleton rather than the look/design.

The framework includes multiple style choices for typography, forms and UI widgets. Also, there are many ready-to-use layouts (with mobile-first approach), a flexible grid and CSS reset.

Prototyping any type of design (web/app/code) helps minimizing hassle in the next steps of the creation process.

WireKit, a set of free Photoshop shape layers, simplifies creating prototypes for iPhone apps.

iPhone PSD Prototype Kit - WireKit

It comes in 2 versions: solid (realistic) and stroke (sketchy) where each version includes 60+ elements.

The layers are very well organized + named and they are all consistent in size + how they look.

There are pretty standard ways to approach navigation when it comes to responsive layouts and, previously, responsive jQuery menu solutions were shared at WRD.

FlexNav is another jQuery plugin for easily handling menus in responsive layouts and it does that well for complex ones too.

FlexNav jQuery Plugin

The plugin has support for unlimited sub-menus that work similarly in both desktop and mobile layouts.

It has no-JS fallback, works with keyboard-tabs too (for accessibility) and touch-friendly.

When we need to update the styles of websites that are already online, we either perform the change locally (if we have the source with us) or FTP-edit it.

bluePen Editor is a PHP-powered CSS editor that can be installed to any static or dynamic website and makes live CSS editing possible.

bluePen CSS Editor

Once triggered (with a bookmarklet), it opens the editor widget and makes all HTML elements hoverable so that blupePen can locate the CSS rules of them (like Chrome Dev Tools).

It has features like color-picker, file manager, ruler, color comparison and more.

The editor keeps track of the changes made and auto-backups them in case you prefer to revert the styles.

There are various jQuery plugins for creating Pinterest-like dynamic grid layouts.

jQuery.Shapeshift is a strong alternative to them with an an extra touch: the items can be drag ‘n’ dropped (uses jQuery UI).

jQuery Shapeshift Plugin

The drag ‘n’ drop doesn’t effect the grid negatively as the grid auto-fills the gaps when needed.

It also works on touch devices and responsive layouts.

The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.

There are self-learners and others that find it easier to learn from another.

Although neither is better and “which one is easier/better for you” is the most important, learning the tricks -at least- from experts make so much sense.

For anyone willing to improve their web/graphic design-related skills, MightyDeals is offering a huge discount (50%) for the “Certified Adobe Training system: Train Simple“.

Train Simple Discount

Train Simple has 3000+ video tutorials on technologies like HTML5, CSS3, JavaScript or WordPress and programs in this field (Dreamweaver, Photoshop, Illustrator..).

The deal includes a year of membership for $47/year (rather than $99) and there are also mobile apps for iOS/Android to watch them on the go.

P.S. Train Simple also provides certification once a specific track is followed through their system and they are trusted by companies like Zappos, Google, Nike and much more.

TopCoat is an open source library of user interface elements that are built without any JavaScript.

The elements use clean, standards-compliant HTML-CSS and all of them are created with responsive layouts in mind.

The library provides 2 style guides, one for desktop and the other for mobile where all elements are showcased inside these guides.

UI Library - TopCoat

Using TopCoat is very straightforward, just include the CSS file, use its HTML structure and customize however wanted.

For anyone not using any front-end frameworks or looking to improve their frameworks, TopCoat is a good resource to get started quickly while developing web apps.

Moot is a fresh and free web service for instantly creating a discussion environment on any web page.

It is setup so quickly. The service provides you a unique HTML code and, once embedded into any web page, Moot appears.

Btw, Moot loads the full HTML and it is no IFRAME. This makes all types of customizations possible. You can apply CSS or even change interactions via JS.

Hosted Forums And Comments

The service provides a single feed of posts, users can follow any number of topics, view other online users or make searches quickly.

It can be a flat or threaded discussion, works in real-time (no refresh required), has an easy-to-use control panel and supports responsive layouts.

Maps are used so widely in web design and they are usually expected to be interactive when presenting data.

It can be the branches of an international company, statistics about  countries or just destinations to visualize. Like said, lots of uses.

Simplemaps is a website that provides professional, highly-customizable and interactive maps built with JavaScript and SVG (or Flash).

SVG Maps - Simplemaps

SVG has a wide browser-support and it works very well on mobile + tablet as well.

There are maps for “world/countries, continents, USA and Canada” and the usage +customization doesn’t require advanced development knowledge. It works by simply editing a text file and a detailed, step-by-step documentation exists.

Also, Simplemaps website has an online customization tool that enables the users to edit the countries, change colors, descriptions, links and more.

Considering that the maps are in vector (SVG), tiny or huge, they work great on all sizes. And, they even come with a zoom-in functionality.

SVG USA map

With some JavaScript, it is so easy to add new features to them like tooltips, selectable regions and much more.

To sum up, SVG maps are definitely the way to go for modern web maps and Simplemaps has a wide range of products on the field.

P.S. For Flash fans, the website also offers similar maps in Flash with their source code.

How to join the giveaway?

Simplemaps is giving away 3 licenses (for a map of your selection). Commenting to this post is enough.

Winners will be selected on 22 April 2013 (1 week later) with the query below and announced as an update to this post.:

SELECT * FROM wp_comments WHERE comment_post_id=3981 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all.

The winners

Here they are:

  • Roshin C (comment #1260748)
  • Jed (comment #1260726)
  • DR (comment #1260708)
Congratulations and thanks to everyone for joining.

1260708

Uptime Robot
feed-holder
FeedBurner
PHP Form Generator
PSD2HTML.com
HotScripts Marketplace