HTML / CSS Web Log Entries
Do Complex User Interface Modules Necessitate Complex CSS?
Posted: December 29, 2009 at 2:15 PM by Ben Nadel
CSS, or Cascading Stylesheets, are one of the best things to have ever happened web development. They provide a very clean, elegant way to style your interfaces without having to muckup your actual markup. CSS is so intuitive, in fact, that I have applied it to completely separate domains, such as styling Excel documents in my POI library. With th... read more »
Comments (26) | Post Comment | Ask Ben | Permalink
Using jQuery To Detect CSS-Based Table Display Capabilities
Posted: December 1, 2009 at 9:50 AM by Ben Nadel
Yesterday, I started to play around with CSS-based table displays for my "Best of ColdFusion 9" contest entry. Based on some very brief testing, it appears, as expected, that Internet Explorer (IE) is the only browser that I have that doesn't support CSS-based table displays. This is something that I might ordinarily deal with via browser-sniffi... read more »
Comments (12) | Post Comment | Ask Ben | Permalink
Building A Fixed-Position Bottom Menu Bar (ala FaceBook)
Posted: October 30, 2009 at 9:10 AM by Ben Nadel
Now that I've explored two ways of creating fixed-position elements across browsers - using IE6 expressions and absolute layouts - I wanted to give a go at creating a fixed-position bottom menu bar, ala FaceBook. The menu bar isn't going to contain much of anything - just a single button and a pop-up menu; mostly, I wanted to see how easily I ... read more »
Comments (31) | Post Comment | Ask Ben | Permalink
Using CSS Fixed Position Elements Across Browsers Without Javascript
Posted: October 16, 2009 at 9:34 AM by Ben Nadel
Yesterday, I posted my first experimentation with CSS fixed-position elements and getting them to work across all browsers, including IE6. The solution I demonstrated yesterday involved using proprietary Javascript expressions in the CSS that would be used by IE6; this technique worked pretty well, but caused a jittery effect as the "fixed" posi... read more »
Comments (6) | Post Comment | Ask Ben | Permalink
Using CSS Fixed Position Elements Across Browsers
Posted: October 15, 2009 at 10:08 AM by Ben Nadel
Even after years of web development, one thing that I never really looked into was fixed-position elements. I've seen them used on websites, and I generally like what they do; but, I've simply never taken the time to look into it. So, I figured this morning would be just as good a time as any. If you are not familiar with what a fixed-position ele... read more »
Comments (28) | Post Comment | Ask Ben | Permalink
Default To The Numeric, Email, And URL Keyboards On The iPhone
Posted: September 29, 2009 at 8:58 AM by Ben Nadel
A long time ago, it used to work on the iPhone Safari browser that if your form inputs had the term "zip" or "phone" in the form field name, clicking on it would default the resultant iPhone keyboard to a numeric keyboard . While this forced us to use some really poor naming conventions, it increased the usability of our web-based iPhone applicat... read more »
Comments (42) | Post Comment | Ask Ben | Permalink
Object Oriented CSS (OOCSS) And Being Generic With Your Base CSS Classes
Posted: August 4, 2009 at 9:02 AM by Ben Nadel
I recently learned a great CSS lesson when working on a large, multi-tier educational application. One of the entities in the application is a "School." A while back, the staff members using the application decided that they wanted to be able to archive schools and furthermore, if the school was archived, they wanted it to be really obvious on the... read more »
Comments (12) | Post Comment | Ask Ben | Permalink
Object Oriented CSS (OOCSS) By Nicole Sullivan
Posted: July 8, 2009 at 9:55 AM by Ben Nadel
Last night, I watched a 49 minute presentation by Nicole Sullivan on something she calls "Object Oriented CSS" or "OOCSS." In simple terms, Object Oriented CSS is a methodology or framework (whichever you prefer) for organizing and extending your CSS in a way that is lightweight, highly performant, and easily used by developers at all skill leve... read more »
Comments (20) | Post Comment | Ask Ben | Permalink
Contextual CSS Is Good When You Know Everything About Your Content
Posted: May 27, 2009 at 2:40 PM by Ben Nadel
Cascading Style Sheets are the cat's pajamas; they've revolutionized the way that we build websites in as significant a way as I'd say server-side scripting did. In short, they are awesome. But, while the syntax for CSS is rather finite and easy to understand, recognizing the best way in which to architect your CSS is as much an art as it is a sci... read more »
Comments (12) | Post Comment | Ask Ben | Permalink
Preventing Form Caching With Javascript And jQuery
Posted: May 8, 2009 at 9:48 AM by Ben Nadel
Form caching is the browser mechanism where by you can navigate away from a form and then back to the same form (using the browser navigation buttons) and the form data that you entered remains in the form. Normally, this is a really awesome feature as the basis for re-navigating to a page is to update information that you entered previously. Howe... read more »
Comments (15) | Post Comment | Ask Ben | Permalink
The Power Of ZOOM - Fixing CSS Issues In Internet Explorer
Posted: September 18, 2008 at 9:02 AM by Ben Nadel
I think we've all experienced how frustrating it can be to do cross-browser testing with CSS-based web sites. Why is it that Internet Explorer (IE) never seems to play nicely with good, solid CSS markup?!? Anyway, I just thought I'd share one technique that I've found to be extremely helpful. When I have some CSS that just won't work in IE, I see ... read more »
Comments (26) | Post Comment | Ask Ben | Permalink
Ask Ben: Optimizing Tables For Printing
Posted: September 12, 2008 at 10:29 AM by Ben Nadel
Hey I have a report I want to print but keep the header on every page, column names. Any suggestions? HTML table elements are actually designed to allow for this very functionality. The trick is that you have to use the THEAD tag which defines the table header. By using the THEAD tag, the rows that you define within the THEAD tag will be display... read more »
Comments (25) | Post Comment | Ask Ben | Permalink
Web Form Design By Luke Wroblewski
Posted: August 22, 2008 at 9:09 AM by Ben Nadel
The other night, I finished, "Web Form Design" by Luke Wroblewski . In it, Luke Wroblewski discusses everything you'll ever need to know about designing web forms in your applications. He covers a myriad of topics including common strategies among the internet giants, label placement, dynamic forms, button placement, eye tracking, field size, fie... read more »
Comments (2) | Post Comment | Ask Ben | Permalink
A Reminder About Interfaces And The User Experience
Posted: April 15, 2008 at 8:29 AM by Ben Nadel
Let's face it, we're programmers - we think about code - wonderful, beautiful, well-tabbed code. The biggest problem that we face is in our applications is that our target users are not programmers and they don't think about code at all. The only thing that they think about is what they can see and feel, which is of course, the user experience. Ev... read more »
Comments (8) | Post Comment | Ask Ben | Permalink
Defaulting To The Numeric Keyboard On The iPhone
Posted: April 14, 2008 at 8:56 AM by Ben Nadel
As I have been using my Dig Deep Fitness iPhone fitness application over the last few months, I have noticed a few things that need to be improved; one of the biggest points of friction is the fact that 98% of the text input in the application is numeric and yet, every time I click on an input field, I am presented with the iPhone's Alpha keyboa... read more »
