Web Design Rap!

Web Design 1 Comment »

Sub pixel fun with browsers

Web Design No Comments »

John Resig has been tinkering with the sub pixel problems in CSS and how browsers deal with bit of pixels:

Something that jumped at me, recently, was a rendering dilemma that browsers have to encounter, and gracefully handle, on a day-by-day basis with little, to no, standardization.

Take the following page for example. You have 4 floated divs, each with a width of 25%, contained within a parent div of width 50px. Here’s the question: How wide are each of the divs?

The problem lies in the fact that each div should be, approximately, 12.5px wide and since technology isn’t at a level where we can start rendering at the sub-pixel level we tend to have to round off the number. The problem then becomes: Which way do you round the number? Up, down, or a mixture of the two? I think the results will surprise you, as they did me.

Subpixel

When I went to the example in FF3b2 on Mac, it actually looked more like IE.

[via Ajaxian]

Roxer: Simple web page creation and editing

Web Design No Comments »

Jeremiah Grossman is known for his amazing Web security talks. Now though, along with Lex Arquette, he has come out with a Dojo powered project (using 1.0.2) Roxer which aims to be the easiest way to make a web page:

Targeted mostly for novices, where with Roxer anyone can build just about any Web page they want using a Web browser (no plug-ins) and without a single line of code. Think Visio, MS Word, or OmniGraffle, but extremely simple and completely on Web-based.

There are a lot of cool features in Roxer, including cross-tab copy/paste, which were extremely difficult to implement. It’s only due to a background in JavaScript hacking were we successful. Other Web 2.0 / Ajax’ish stuff like Drag & Drop, Rich Text Editing, and Edit-in-Place were zip zap after that.

 

Video thumbnail. Click to play
Click To Play

 

[via Ajaxian]

YouTube Goes More Mobile

Web Design No Comments »

YouTube has launched a new mobile oriented site that brings video to more handsets, as well a mobile app.

m.youtube.com offers mobile optimized content to 3G or WiFi enabled handsets that support RTSP streaming. The mobile page supports logins and channel subscriptions, and is available in country specific form as well.

YouTube has also released a beta version of the YouTube for Mobile downloadable application. The app supports the Sony Ericsson k800, w880 and the Nokia e65, n95, n73, 6110 navigator and 6120 classic, providing the same YouTube browsing functionality currently available on the iPhone.

To obtain the app, users on compatible phones should visit m.youtube.com, where they’ll be asked if they want to install it.

More details on the YouTube blog here.


[via TechCrunch]

Elliot Jay Stocks - Destroy the Web 2.0 Look

web2.0, Web Design No Comments »

Interesting Slideshow

Nice Web Type

Web Design No Comments »

"One place for web typography, leveraging our collective knowledge for the betterment of typographic style and practice." #
[via SimpleBits]

Elastic IKEA

Web Design No Comments »

Patrick has just tipped me off that IKEA impresses us with an elastic (em-based) layout. Try resizing text if you're not sure what that means. Nicely done! Now if I could just figure out where this extra hex nut goes… Update: Naz Hamid tells us (via Twitter) that HUGE was behind the redesign. #
[via SimpleBits]

How IE Mangles The Design Of JavaScript Libraries

Web Design No Comments »

People like to moan about IE, and often don’t have anything to back it up. “IE sucks” doesn’t count.

Alex Russell, on the other hand, has written about how IE mangles the design of JavaScript libraries such as Dojo. His list both shows us the methods to the madness, informs us on the issues, and hopefully wakes up the powers that be to make sure that this items are fixed in IE 8 :)

Array’s Can’t Be Usefully Subclassed (test case)

Arrays without a working length property are nearly useless, and JScript mangles the design of toolkits as a result.

I think it’s safe to say that both Dojo and jQuery would subclass Array directly to save code, were it a reasonable thing to do.

Where Art Thou Getters/Setters?

Instead of providing the natural property-oriented behavior, it forces class authors to write getSomeProperty/setSomeProperty method pairs on their classes should they want to do anything when values are gotten or set. The resulting code feels a lot more like Java than JavaScript, which is usually a sign that something is horribly wrong in a browser.

I have some hope that we could see getters and setters for JScript in the near future. It won’t matter much, though, unless the JScript team ships their new engine to all IE versions when they release IE 8. Not bloody likely.

Performance

Kudos are in order to the JScript team for fixing their long-b0rken GC heuristic and pushing it out to everyone…but it’s the tip of the iceberg.

Performance is one of those areas where differences in implementations can tightly circumscribe what’s possible despite exacting spec conformance. On this front, JScript’s raw VM-level execution time leaves a lot to be desired, but the true travesties really show up when you hit the DOM for computed style information or try to do anything reasonably complicated that involves string operations.

Across the board, from DOM performance to raw JScript execution speed, IE is a dog, and the odds are good that whatever toolkit you’re using spends a lot of time working around that reality.

Doctype Switching

Instead of giving devs fine-grained layout system control, IE makes it all-or-nothing. The global flag approach backs toolkit developers into doing script-based layout calculations or “just throw it in another div” solutions where we’d really rather not. Both are slow and both may be required since it’s completely impractical to dictate to users which doctype they’ll be using. While any app may be able to be disciplined enough to not care, toolkit developers must work everywhere. Hilarity ensues.

I fear this is going to get even worse with IE8 as the IE team looks to implement some of HTML 5 and hopefully many of CSS 2.1’s clarifications. The sooner they abandon the global switch, the better…but I’ll wager it’s pain they just don’t feel. Building a browser is a very different pursuit from building portable apps to run inside it.

HTC’s Can’t Be Inlined (Even With Hacks)

Modern browsers have built-in widget systems. On IE, it’s HTCs + Viewlink and on Firefox it’s XBL. Even a cursory reading through the docks for both is enough to illuminate the gigantic overlap. Alas, no one is yelling at them to standardize and the result is a terrible mess in which both sub-optimal formats limp along with nearly zero Open Web usage.

So why do I single out IE for whipping here when XBL is just as lame and similarly b0rken with regards to single-file embedding? Well, on Mozilla, you have a lot more “outs”. I strongly suspect that you can use “data:” urls to generate and evaluate component definitions for FF, which would enable compiling down from a single (more sane) format in the running page environment. IE prevents any such useful code-loading approaches.

[via Ajaxian]

Complete UI 2007 for Dreamweaver

Ajax, Web Design No Comments »

Awhile back we discussed Dreamweaver as a potential Ajax IDE.

Here's the press release:

Nitobi"s Complete UI is a powerful set of components that will give Dreamweaver users the ability to present data in an engaging format in a fraction of the time," states Michael Lekse, Vice President of Sales and Services at WebAssist. "Dreamweaver professionals looking to enhance their user interface functionality should turn to Nitobi with confidence."

The easy drag and drop feature for Dreamweaver reflects Nitobi"s philosophy of fast, easy web application development–a key selling point of Complete UI. Complete UI components are designed to be easy to implement and to help create web applications with intuitive and graceful user interfaces. The Complete UI suite includes:

  • Grid — A cross-browser spreadsheet with Excel "copy/paste", LiveScrolling, and more.
  • ComboBox — A drop-down menu with autocomplete functionality, similar to Google Suggest.
  • Calendar — A high-performance calendar picker that can be used with Nitobi Grid or in standalone web applications.
  • Callout — A rich, skinnable tool-tip that prompts users with real-time feedback and helpful instructions as they navigate through an application.
  • Fisheye — A tool bar menu featuring fisheye magnification, similar to Apple OS X tool bar.
  • Spotlight — A tool for creating stylish guided tours of websites and applications.
  • Tabstrip — Folder tabs for navigating to different sections of a web application via Ajax or iFrame requests.
  • Tree — A hierarchical data view, similar to the folder view in Windows Explorer.
  • Ajax Toolkit — A library of fully-documented tools used in Nitobi components that can be re-used in your own applications, or to build your own components.

In addition to Dreamweaver support, Complete UI includes enhancements to Nitobi Grid, including expanding spreadsheet-style rows and even better performance.

What better way to check this out than a set of screencasts?

What do you think of Dreamweaver now?

[via Ajaxian]

WORDPRESS GOD: 300+ Tools for Running Your WordPress Blog

Web Design No Comments »

As one of the leading open source blogging platforms, WordPress has inspired hundreds (if not thousands) of plugins and tools to customize your blog. In this article, we’ve compiled a list of more than 300 of our favorites.

This information is compiled from previous Mashable articles. If you enjoy this post, also see ONLINE MEDIA GOD and ONLINE PRODUCTIVITY GOD.

[via del.icio.us/webdesign]

Entries RSS Comments RSS Login