IDEAS

We’ve been talking in the office about producing environments as part of the user experience. People explore websites to reach their goal just like we explored worlds in video games to reach the end boss. We’re realizing that people don’t want to be online doing work, they want to be online having fun.

So lets start by making work fun.

Check out Jparallax, a clever parallax effects in Jquery.

“Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content.

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 smart javascript techniques for showing and hiding content using different JS libraries.”

Whole post here

“We all have them – little coding tricks and snippets of knowledge that we’ve picked up over years of experimentation and evolution of our processes, that are now part of our regular routine and save us time, gnashing of teeth and allow us to work quickly and efficiently. Here’s some of mine – perhaps you know a few of these already – I’d be interested in hearing yours in the comments.”

Read whole article here

Great article about web fonts, found a new respect for them I’ll summarize here:

The first 6 bits of fonts on this list are considered “web-safe” – they’re supported by all major browsers on any platform. The fonts in the following 2 bits come pre-installed on most but not all systems. The fonts in the last 8 bits are mainly used for decorative purposes, and implemented on the Web as sIFR or saved as images.

1. Helvetica, Helvetica Neue, Arial
2. Verdana
3. Georgia
4. Trebuchet MS
5. Century Gothic
6. Lucida Sans Unicode, Lucida Grande
7. Palatino
8. Garamond, Baskerville, Caslon
9. Univers Condensed, Linotype Univers
10. Myriad Pro
11. Rockwell
12. Warnock Pro
13. FF DIN
14. Gotham
15. Frutiger
16. Dax Regular

Read whole article here

Here’s some tools we use in house for development:

ScreenGrab: https://addons.mozilla.org/en-US/firefox/addon/1146
Screengrab saves entire webpages as images.
It will save what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images.
The following little keywords are at the request of those who can’t remember the name ScreenGrab! and want searches to work. It takes screen shots, screenshots – that is, shots, of web pages.

MeasureIt: https://addons.mozilla.org/en-US/firefox/addon/539
Draw out a ruler to get the pixel width and height of any elements on a webpage.

Inline Code Finder for Firebug: https://addons.mozilla.org/en-US/firefox/addon/9641
Inline Code Finder is an add-on to Firebug, to be able to find HTML elements with any of the below issues:
* Inline JavaScript events
* Inline style
* javascript: links
Detailed description can be found at http://www.robertnyman.com/inline-code-finder/

YSlow: https://addons.mozilla.org/en-US/firefox/addon/5369
YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites.

Pixel Perfect: https://addons.mozilla.org/en-US/firefox/addon/7943
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
* Requires Firebug

ColorZilla 2.0: https://addons.mozilla.org/en-US/firefox/addon/271
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

IE Tab: https://addons.mozilla.org/en-US/firefox/addon/1419
This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.

PageDiff 1.3.0: https://addons.mozilla.org/en-US/firefox/addon/4274
Pagediff is a simple page compare application. It helps web developers and designers to see HTML-code(text) differences between web pages.
It doesn’t take original page source. It takes browser generated DOM compliant view source. It omits Doctype declaration and HTML tags.
After installation, to use this, one has to
1. Right click on a page & select ‘Start DIFF’ (this action saves the current page to memory),
2. Go to the page which one wants to compare (with the saved one) and
3. Right click on the page & select ‘Show DIFF’.

Html Validator: https://addons.mozilla.org/en-US/firefox/addon/249
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution).
The details of the errors are seen when looking the HTML source of the page.
The extension is based on Tidy and OpenSP (SGML Parser). Both algorithms were originally developed by the Web Consortium W3C. And now extended and improved by a lot of persons. Both algorithms are embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.
Each algorithm has advantages and inconvenients. The program will give you the choice at startup. But mostly,
- The SGML parser is the same program than the one running behind validator.w3.org.
- Tidy has accessibility check for the 3 levels defined in WAI

Console²: https://addons.mozilla.org/en-US/firefox/addon/1815
As of Firefox 1.5, the JavaScript Console is used not only for JavaScript errors, but for CSS errors as well. This extension takes this into account by providing a simple possibility to display errors by type.
Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a customizable toolbar and some more accessibility improvements.

Us developers always have problems making websites look consistent in multiple browsers. This article will help you out in your quest.

http://www.sohtanaka.com/web-design/css-fixes-tools-hacks-cross-browser-solutions/