Developing for a Divergent Browser Space

Once upon a time, or really, several years ago, the goal of any decent front-end web developer was to implement a pixel perfect design. Hours, and even days were spent trying to get IE to display the same content as firefox, and it took not an inconsiderable amount of skill (and a lot of images) to achieve these layouts.

Times have changed though. Clients are better informed and are much more aware of the technologies that are available out there. This means they’re excited to try the latest features of CSS3 and are much more willing to use the new tags offered by HTML5. What this also means is that they have to give up their ‘pixel perfect’ requirements and embrace the capabilities of the various browsers. Our job, as UI developers is to be aware of, and keep our clients informed as to what is possible in the various browsers.

Our goals then, instead of creating identical experiences in ever browser—mobile or not—should be to create the best experience in each, within the abilities of that browser.

http://mobilehtml5.org/

Posted in Uncategorized | Leave a comment

Shiny CSS Buttons, No Images Required

Screen shot 2013-03-15 at 4.20.46 PM

So the other day a friend of mine asked – how do I make these fancy buttons in CSS? I thought I should share the technique with the rest of you. It’s rather simple once you break it down into it’s components which are:

  • text (okay, that one’s kinda obvious)
  • icon
  • button background
  • button border
  • hover states

We’ll skip the text part, that’s some basic css styling, but you can see the example in the codepen.

The Icon

The icon is rendered via an :after psuedo element. The content of this element would be the white icon – it’s a character, not an image. Since it’s a character, I can then also define a background for the icon. I’ve made this background a circle through the use of css3′s border-radius. Note that the icon inherits it’s font colors and sizing from the button styles.

Check out this Pen!

The Background

The background is a CSS3 gradient. If I was implementing this in a real project I’d use something like Compass’s CSS3 mixins to improve the legibility of the code.  In this example I’m using a standard two stop linear gradient (with the added bonus of greater IE support), but you should play around with multiple stop or layered gradients for a nicer effect.

Check out this Pen!

The Border

Depending on your browser, your button may already have a nice looking border. We want to standardize this.

The border here is specified with a different color for each side. The colors vary slightly from the button background, giving the button a beveled effect. In this case the “light” is coming from the top left, so the top border, is the lightest, the left the second lightest, the right the third lightest, and the bottom the darkest.

The final code:

Check out this Pen!

 

Posted in Uncategorized | Leave a comment

Flex Charting vs. gRaphael

I’ve recently been looking at some different options for charting, for those cases where you might not want to use a heavy flex application, and one of the first that came to mind was gRaphaël. It’s an impressive javascript charting library based on the Raphaël drawing API created by Dmitry Baranovskiy. I’m not really clear if Dmitry created it by himself or with a team, but if it’s all one persons work, I’m seriously impressed.

gRaphael isn’t as robust as Flex charting, but with some tweaking I think you can get it to suit your charting needs for a HTML based site.

I’ve started experimenting with the Pie control, basically recreating the demo from the gRaphaël website. It’s really easy to get set up, but from what I can tell, it lacks features like labels on the wedges themselves (similar to what we see in flex), and there seem to be some layout issues with positioning the pie relative to the legend.

There’s not a lot of documentation out there for Raphael, so maybe there are work-arounds for these issues, or maybe I’m just doing something wrong. I’ll need to dig through the Raphael code a bit more to figure it out.

My gRaphael Pie Chart Code

Posted in Uncategorized | Leave a comment

HTML5 is not CSS3 is not Javascript.

There seems to be a lot of confusion out there about what HTML5 is. Your average web user seems to think that HTML5, by itself, creates all these fancy effects, similar to flash, and it’s just not true. Perhaps the most egregious example of which hailed the Google Doodle in which balls fly away from the user’s mouse as a great example of HTML5, but no, sorry, it’s not. They received so much criticism from the tech community that they changed their example to point to thewildernessdowntown.com, which while a much better example of the use of HTML5, still relies heavily on other technologies such as JavaScript. (They really should of pointed to Lost Worlds Fairs but that’s another story…)

For those of you not on the tech side of things, here’s a brief breakdown:

  • HTML5 – HTML is a markup language. It declares the structure of our content. HTML5 is a new version of HTML, adding new tags that allow us to define the parts of our HTML page. Much like a outline, the HTML defines the content of the page. HTML5 has added new tags such as video, header, and section, that better allow us to describe our HTML pages.
  • CSS3 – Just as HTML5 is the latest iteration of HTML, CSS3 is the latest iteration of CSS. CSS stands for “Cascaiding Style Sheets” and defines the style (a.k.a. the design of the page). An HTML page viewed without it’s CSS should theoretically still be perfectly legible and usable, just boring looking.
  • JavaScript – The magic behind the webpage. It’s what makes things move, defines complex svg shapes, creates motion, adds and removes parts of the page on demand, loads dynamic content, etc.

However, I understand why web users are confused. There’s not really a clear label for this type of development, at least not one that’s quick and easy to use. Sites use terms like “HTML5 and related technologies” (slate.com) or “HTML5 and web standards” (apple.com) which easily becomes abbreviated to HTML5, confusing less technical web users. I think we need a clear term to describe this new type of web development, one that doesn’t lump JavaScript in with CSS3 and HTML5.

I’m not sure what this new term should be. I’ve seen some suggestions, some calling it Web 3.0 (confusing, as Web 2.0 is more of a reference to a visual style than a programming style), but most are some variant of HTML5… and some other stuff. We need a nice simple term like DHTML (that’s Dynamic HTML for you young’ns), so here are some suggestions: iHTML (inspired by Apple, who are really pushing for a richer HTML experience), fHTML (after all, it’s the “future of web development” – also what one may be saying when trying to convince IE7 to degrade gracefully), but these names still put the focus on the HTML component of this type of development. Maybe we should just call it “super awesome new internet stuff” (SAWIS for short)? What are your suggestions?

//Update: After a brief, unscientific survey of twitter, it seems we should just use DHTML. I think it works!

Posted in Uncategorized | Tagged , , , | 6 Comments

Fonts and the Web: TypeKit

To follow up my post from earlier this week, I’ve started implementing type kit fonts on this site, and I’m really pleased with how simple it is to set up. (So simple, I think, even my mom could set this up on her website). All you have to do is sign up, drop two lines of javascript into your site’s <head> tag, select a font in your TypeKit control panel, add a few css selectors (in the control panel – you don’t even have to write code!).

If you do want to write your own css however, you can – and I ended up going this route when I was having trouble adding id’s in the TypeKit control panel. I’m not sure if this is a TypeKit issue, or me just doing something wrong, but in the end, I’m usually happier when I’m managing my own code, so it’s great that typekit also has this option (it would be rather strange if it didn’t).

The other great thing about TypeKit is that they offer a trial membership level – I think 1 website, restricted to two fonts, but it’s great for trying it out.

My only problem is the font selection. I love small caps and there just aren’t enough serif small caps options. So off to try the next site…

Posted in Uncategorized | Leave a comment

Fonts and the Web

So one of the things I like about Flex / Flash development is the fact that you can use pretty much any font you like, and it displays, fairly well across all browsers and operating systems. But even those of us who make plain ol’ HTML sites are becoming more appreciative value of good typography on the web, and we’re gaining awesome new tools to implement this good typography.

Now if I’m not a big slacker (it happens sometimes) hopefully in the next few weeks I’ll update this blog with a new design, and nice typography, instead of this boring old default wordpress theme. I’m hoping to use a few of these new tools to make my site super awesome looking:

For webfonts:

For layout:

And since webfonts aren’t perfect, help for choosing more unique backup (for those browsers that don’t support webfonts), and body fonts:

Hopefully you’ll find some of these links as useful and inspiring as I have.

Posted in Uncategorized | 1 Comment

Stupid Hackers

Hackers got at the site, not sure if it’s from a media temple vulnerability (they’re claiming it’s not off course) or a wordpress vulnerability or the combination of the two, but it’s annoying to have to re do your blog while on vacation! The site is mostly back up but I still need to set up a bunch of plugins / retrieve my file backups from home so it’ll be a few days before everything is fully back up and running.

Posted in Uncategorized | Leave a comment

FXG vs MXML Graphics Benchmarking

As a follow up to Elad Elrom’s post on FXG increasing swf file size and taxing the CPU I thought I’d benchmark FXG (compiled graphics files) vs runtime MXML graphics.

There seems to be some confusion in the community as to the difference between FXG graphics and MXMLG (MXML Graphics). FXG is used to create static vector files, and are frequently produced using Catalyst or other Adobe software, although they can be written by hand.

MXMLG’s format is very similar to that of FXG – they use a number of the same tags. Adobe’s even published a helpful guide on converting FXG to MXMLG. However, MXMLG is much more powerful as it’s rendered at runtime, and as such, you can customize it on the fly, even adding styling hooks to change properties via CSS.

The results from my benchmarking were somewhat surprising – I had assumed that FXG would use less memory, but it actually uses the tiniest bit more.

In both tests, I created 100 buttons and applied a skin to each of these buttons via the ‘Button’ css selector. The skins where identical, except in one I used a FXG component, and in the other I used MXMLG.

The Results

The swf’s themselves were fairly similar in size 41,020 bytes for the MXMLG version, FXG at a slightly lower weight at 40,900 bytes.

So the two demos used almost exactly the same amount of memory, the FXG version using 3K more at max memory – see for yourself:

Continue reading

Posted in Misc. | Tagged , , , , , | 1 Comment

Download the Slides / Examples from Flash Coders NY Talk

Thanks everyone who attended my Flex 4 Skinning and Styling talk last night at Flash Coders New York! For those of you who weren’t there, we covered the basics of creating programmatic skins in Flex 4 (and why you would choose to use programmatic skins over skins created in catalyst or png skins.

These demos are similar to some of the demos I’ve posted previously, and all build upon the same base of code:
Continue reading

Posted in Misc. | Tagged , , | 2 Comments

Skinny DataGrid / List Scrollbars

I’ve always felt that the default (flex 3) scrollbars are sorta chunky, like they might need to go on a diet. Apparently the designers I work with feel the same way, as they’re always making them skinnier than the default 16 pixel width.

However, when I go to implement the scrollbars in DataGrids, I run into a problem where there’s a slight gutter between the row backgrounds and the scrollbar, where the data grid background colour shows through.

There’s a simple (although I feel slightly hacky) solution to this fix. In any of your data grids that are using thinner scrollbars, on creationComplete call myDataGrid.invalidateList().

I should note, I’m not sure if this is an issue with programmatic skins, for scrollbar graphics at least, I tend to always use pngs.

Posted in Misc. | Tagged | Leave a comment