User Interface Trends » web standards http://uitrends.com A place to catalog, discuss, and rate trends in user interface design Wed, 21 Jul 2010 04:38:08 +0000 en hourly 1 http://wordpress.org/?v=3.0.1-beta Spec Wreck http://uitrends.com/2010/07/20/spec-wreck/ http://uitrends.com/2010/07/20/spec-wreck/#comments Wed, 21 Jul 2010 04:38:08 +0000 Sarah Selser http://uitrends.com/?p=2188 Why is it so difficult to build to spec? (Just to be clear, I’m referring to all design fields, not just the software industry.)
Is compromise just an inherent part of the process? How detailed do our specs really need to be? Lately, my specs have become pretty lean. This seems to work well on a small scale because additional verbal communication adequately bridges any gaps, but what about on a larger scale when verbal communication might not be an option (due to different time zones, etc.)? Is creating detailed specs, only to have to compromise during development, really the best way to go?

]]> http://uitrends.com/2010/07/20/spec-wreck/feed/ 1 UItrends Web Design Tip #1 http://uitrends.com/2009/11/12/uitrends-web-design-tip-1/ http://uitrends.com/2009/11/12/uitrends-web-design-tip-1/#comments Thu, 12 Nov 2009 15:09:11 +0000 Jeff Noble http://uitrends.com/?p=1292 Hello and welcome to the first ever UItrends tip!

If you are a web designer and upon viewing the source code (Firefox shortcut: Ctrl + U or Internet Explorer longcut: Alt + V + C) of a recent project of yours, you happen to see anything that resembles any of the following tags:

  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
  • <table> (For layout)
  • <td>
  • <tr>
  • <IFRAME>
  • <frame>
  • <frameset>
  • <hr>
  • <br>
  • <font face=”Arial” size=”1″>
  • <bold>
  • <strong>

    OK, this has been removed. Thanks for the feedback!

  • <center>
  • <map name=”Map”>
  • <area shape=”circle” coords=”101,396,82″ href=”#”>
  • <b>

Please stop! I know these tags have been your trusty friends that you’ve gotten to know very well over the years and you’re having a hard time leaving them, but what you might not know is they are creating more work for you, slowing development, creating unorganized code, painful website updates, larger file size and slower times for your website visitors. I beg you, please join us here in the modern web design community where CSS and XHTML is your new best friend. I promise you will love them and in return they will honor and cherish you from here until eternity… or maybe just until CSS3 and HTML5 are widely accepted and we rightfully trash the current standards and start the cycle all over again.

]]> http://uitrends.com/2009/11/12/uitrends-web-design-tip-1/feed/ 33 Interview with Eric Meyer: The Future of Web Design Part 2 http://uitrends.com/2009/10/29/interview-with-eric-meyer-the-future-of-web-design-part-2/ http://uitrends.com/2009/10/29/interview-with-eric-meyer-the-future-of-web-design-part-2/#comments Thu, 29 Oct 2009 13:44:20 +0000 Jeff Noble http://uitrends.com/?p=1232 Recently I was fortunate enough to interview Eric Meyer on the future of web design in what seems to be turning into an interesting series on this topic (See the first interview with Chris Coyier here).

And for those of you that don’t know who Eric Meyer is, shame on you. Shame. Shame. Shame.  I can’t write it any better than An Event Apart, “Eric Meyer has been working with the web since late 1993 and is an internationally recognized expert on the subjects of HTML, CSS, and web standards. Author of Eric Meyer on CSS and More Eric Meyer on CSS (New Riders), Cascading Style Sheets: The Definitive Guide (O’Reilly & Associates), and CSS2.0 Programmer’s Reference (Osborne/McGraw-Hill) as well as numerous articles for the O’Reilly Network, Web Techniques, and Web Review, Eric also created the CSS Browser Compatibility Charts and coordinated the authoring and creation of the W3C’s official CSS Test Suite.” So yeah, he knows a thing or two about web development.

Jeff: There has been a lot of talk and excitement in the web design community about CSS 3 and HTML 5. I find this interesting, mainly because I’m a dork, but it doesn’t seem like most of the major web browsers can fully implement existing agreed upon standards correctly, much less the next generation. Do you have any thoughts on this? Also I know there are bits and pieces of CSS3 and HTML5 that work in some browsers but when should we expect these technologies to go “mainstream?”

Eric: Some of them already have: ‘canvas’, which is part of HTML5, is used quite a bit for a variety of very cool purposes.  It’s also possible to use some HTML5 markup right now, either with a little CSS or a little JavaScript or both or even neither, depending on the browser. We might all groan and say, “God, the Browser Wars are back!” but really, that’s not at all the case.  Things are soo much better than they used to be that in comparison, this is at most the Browser Mild Disagreements.

Incompatibilities are the only thing we can ever count on in web browsers.  The last day of complete browser interoperability was the day before the release of the second web browser.  Browser teams don’t coordinate with each other, don’t agree on what to do or not do– and if they did, we’d probably complain that they had formed a monopoly that was unresponsive to our needs.

Jeff: Will we have to resort to some sort of battle royale street fighter kumite with everyone involved to get this done (CSS3 & HTML5 becoming widely accepted)? And if so, do you think Jean Claude Van Damme is a good fit or possibly Steven Seagal might make an appearance?

Eric: Um, sure.  Aren’t there any more recent tough guys to throw into the mix?

Jeff: What is the best way (I mean other than physically threatening or brandishing a weapon) to convince people that seem more interested in slapping code together quickly that web standards matter and it’s in their best interest to follow them?

Eric: Leading by example, sharing our experiences, making resources available, and helping when asked.  Nobody can be forced to go down the standards path, and frankly I’m not really interested in trying. People will slap together code, and it will mostly work, until the point where they want to do more powerful stuff or they get users with accessibility problems or they just start to realize that what they’re doing is clumsy and bloated and there must be a better way to do it.  When that happens, they’re ready to look at what’s been done by others and take advantage of resources and assistance.

It’s sort of a virtual apprentice setup.  Those wanting to become craftsmen learn by studying what the craftsmen who preceded them have done and said.  It isn’t perfect, but it’s working all right for now. I suspect there may emerge a system of actual, in-person apprenticeship, but it will happen very slowly.

Jeff: Designing a website to be optimized for mobile devices is a hot trend but it seems like Adobe and Apple are currently engaged in some sort of weird macho staring match about how to get Flash on the iPhone.  In addition, JavaScript and CSS have (at best) limited functionality for the majority of users with standard traditional cell phones. There seem to be a lot of roadblocks to transferring typical web interactivity to mobile devices, what are your thoughts on the future?

Eric: That one’s a stumper for me, because I’m not sure what the best mobile experiences should be, let alone what we’ll get.  There are some things one can do in a desktop browser that just seem really hard to do on a mobile device, like dropdown menus.  Maybe those will just never make it to mobiles.  Or maybe someone will come up with an interaction pattern that is recognizably a dropdown and yet is perfectly optimized for mobile environments and we’ll all wonder why nobody thought of it sooner.

Jeff: I’m going to skip explaining the part about what web 2.0 is, because quite frankly the word makes me want to smash my head through my computer monitor.  What are your thoughts on what the next version of the web will be?

Eric: It’ll be a more powerful version of what we have now, one that we sort of collectively evolve, and we’ll worry about branding it later.

Jeff: Do we go ahead and call that web3.0 or will it be so advanced that we skip directly to web 4.0?  If so, who can I sell this domain web4point0.com?

Eric: I’m sure there’s a social media guru out there somewhere who’d love to take that off your hands.

Jeff: The other day I was thinking about when I was first learning how to design websites, I made this really simple hangman game out of JavaScript.  I thought it was cool and was quite proud of myself at the time but it always seemed that JavaScript was regarded by web developers (at least the ones I knew) as this wacky weird little language that wasn’t really that powerful. Now it seems like JavaScript is everywhere you look, disguised as ActionScript in Flash/Flex, or playing a vital role in the creation of mashups, etc. Has JavaScript changed or have the attitudes of those developing websites changed more?

Eric: Both.  It’s gotten a lot more powerful, and people have started using it to do all kinds of stuff natively in the browser that would’ve been unthinkable even two years ago.  AJAX drove a lot of that change in perception, but also things like Google Maps and the various JS-based APIs.  People started to realize that no matter what you might think of JS as a language, it can be used to do a lot of cool stuff and it’s pretty much here to stay.  My contention of late is that it will be the basis on which the web will advance at a much-accelerated rate, actually shifting the basis of standards development into the hands of the community.  We’ll see.

Big thanks to Eric for the interview!

]]> http://uitrends.com/2009/10/29/interview-with-eric-meyer-the-future-of-web-design-part-2/feed/ 9 Why You Should Be Using CSS Sprites http://uitrends.com/2009/10/12/why-you-should-be-using-css-sprites/ http://uitrends.com/2009/10/12/why-you-should-be-using-css-sprites/#comments Tue, 13 Oct 2009 04:26:38 +0000 Jeff Noble http://uitrends.com/?p=1094 Trend: Using Sprites to Optimize CSS Code

When I was in my 6th grade computer literacy class (yes, computers existed back then) I first heard the word “sprite” (no… not the drink or the preternatural legendary fairy creature) while learning this ancient educational program called Logo. Logo basically revolved around giving a turtle (not a real one) some neato commands to draw an image on the computer screen, REPEAT 4 [FD 100 LEFT 90] – I just blew your mind right there by drawing a square. You weren’t ready for that. Boom!

Thanks. That’s the end of my post. Goodnight folks! No really, what I wanted to write about is the development trend of using CSS sprites, which sounds pretty fancy but in reality is just a way of writing optimized CSS that utilizes one central image composed of numerous other images positioned differently across multiple CSS declarations. Translation: Loading an image once, then moving the image around to only show the specific portion you want to see instead of using a bunch of separately sliced up images in your CSS.

Why should you care? Mainly because using CSS sprites:

  1. - Requires less CSS code, which means smaller file size
  2. - Requires less HTTP server requests loading different images, which means quicker load time
  3. - No wacky JavaScript preloaders to ensure all images load
  4. - No annoying white flickering due to load time when hovering over button

And drum roll please… all of the above adds up a better overall user experience for your website visitors and a shiny gold star for you for being the best you can possibly be with your awesome CSS skills.

Learn More Here:

In a blind taste test 9 out of 10 sprites chose Sprite!

In a blind taste test 9 out of 10 sprites chose Sprite!

]]> http://uitrends.com/2009/10/12/why-you-should-be-using-css-sprites/feed/ 2 Interview with Chris Coyier: Random Thoughts on the Future of Web Design http://uitrends.com/2009/09/25/interview-with-chris-coyier-random-thoughts-on-the-future-of-web-design/ http://uitrends.com/2009/09/25/interview-with-chris-coyier-random-thoughts-on-the-future-of-web-design/#comments Fri, 25 Sep 2009 16:15:18 +0000 Jeff Noble http://uitrends.com/?p=991 I recently sat down with Chris Coyier from css-tricks.com for a hard hitting investigative in your face user interface interview, unfortunately I don’t know how to write (I just press a bunch of keys on the keyboard and hope for the best) much less write stuff like that so I just winged it. Unlike the interview with Lil’ Wayne a few weeks ago, the following was actually real. We’re about to get really real folks, brace yourself.

More about Chris…

Chris Coyier is a web designer from Madison, WI currently living in Chicago, IL and working for Chatman Design. He also happens to run a web design community (css-tricks.com) that has an extensive collection of really awesome articles, forums, videos, downloads and snippets.

Jeff: Obviously uitrends.com covers a wide range of user interface trends (so I’m told), and a lot of the information presented on your website covers how to implement some of these trends. What are some of the key trends you have covered on your own website?

Chris: Using custom fonts is becoming a big thing recently. Fonts have always been a hot topic, since the core web fonts available for use are so limiting it really itches designers the wrong way. So there have always been image replacement techniques and fancier stuff like sIFR. But just recently we’ve seen popular browsers implementing CSS support for the @font-face rule, something that IE has supported for a long time. This allows for font files to be directly linked to in CSS and used in the browser, even if the user doesn’t have that font on their system. One problem with this is that any fonts you can do this with legally kinda suck. But now we have technologies like TypeKit coming around, which I covered briefly, which are using additional technology to allow you to use actually very nice fonts with @font-face. This is going to be big in the coming year I think.

Jeff: There has been a lot of talk and excitement in the web design community about CSS 3 and HTML 5. Are these real solutions to existing web design problems or just a bunch of overblown hype and wishful thinking, kind of like when I saw the movie Back to the Future II and got really amped up about hoverboards? What are your thoughts on these being implemented or even agreed upon by December 21st, 2012 (the “supposed” end of the Mayan calendar)? Any correlation or am I just grasping at straws here?

Chris: Oh it’s all very real. A lot of CSS3 stuff you can already use in a “progressive enhancement” kind of way to make designers cooler for browsers that support them but still be fine in browsers than don’t. The standard example is rounded corners, which you can implement with -moz and -webkit CSS attributes very easily. IE won’t get the rounded corners but of course that isn’t the end of the world. HTML5, for garden variety web designers like me, means a barrel full of new tags we can use to mark up web pages in far more semantic ways. For more hardcore developers, check out this HTML5 intro video that has some pretty mindblowing stuff you can do with HTML5 today.

Of course, I’d swear it all off forever if I could have a hoverboard.

Jeff: Web standards. Are they golden rules to be followed or do they just get in the way of cranking out some sweet non-compliant code? Why? Is this all part of a more semantic web with flying robots that interpret code and stuff?

Chris: Compliant code doesn’t limit you in any way. There aren’t things you can do with non-compliant code that are super cool, but put you in some kind of “bad kids” club. Non compliant code just means you screwed something up somewhere. You didn’t close a div, you used an attribute that doesn’t exist, you forgot to include an attribute that is required to make your code more helpful. Validation is just a tool to make sure you are on the right track. The real test is if your page works and looks right (i.e. doesn’t look broken, not necessarily exactly the same) across all browsers, and validation can help you get there.

Jeff: There are a lot of tools like content management systems (CMS) that allow people to create websites easily without a lot of knowledge about setting up, planning, organizing, designing, usability or even coding. Is this good or bad for web design? And, if you had to pick one CMS out of the 1.2 trillion available (last I checked) which would it be and why?

Chris: WordPress. I chose it 90% of the time. I feel like I can do just about anything with it. But, this choice is because I already feel very comfortable with it. I can crank out a WordPress powered site very quickly and I know that when changes and things come up with that site, I’ll have to power to get it done. Ultimately our work as web designers comes down to getting things done, so sometimes you have to make choices based on what you already know. Learning the ins and outs of 10 different CMSs just isn’t practical. If you are super comfortable in Joomla and can really get it done with that, more power to you. But I definitely feel like WordPress is a pretty amazing system.

Jeff: Is there anyone on Twitter that uitrends visitors should be following? You know, other than uitrends and Jeff Noble – that guy pretty much rules.

Chris: Well, other than Jeff Noble, you could always follow me. This account is pretty amazing. I think you should use Twitter however makes sense to you. Follow your friends, follow people you think will be interesting to you. Don’t follow some list of SEO experts you found on a list somewhere because you think you’ll get a bunch of hot SEO tips you can’t live without. That’s lame and boring and your twitter stream will turn into a bunch of nonsense. I suggest looking over at least the first page of a persons tweets pretty carefully before following and seeing if they look interesting before following, and then not being afraid to unfollow people if they turn out to not interest you. Twitter is only valuable if you get something out of it, and that you have to manage yourself.

Big thanks to Chris for the interview!!!

]]> http://uitrends.com/2009/09/25/interview-with-chris-coyier-random-thoughts-on-the-future-of-web-design/feed/ 3 Invasion of The Captcha Monsters! http://uitrends.com/2009/08/28/invasion-of-the-captcha-monsters/ http://uitrends.com/2009/08/28/invasion-of-the-captcha-monsters/#comments Fri, 28 Aug 2009 14:10:06 +0000 Jeff Noble http://uitrends.com/?p=350 Trend: Captcha Verification

Let me start of by saying something totally obvious… I am not a smart man. Shocking, I know. I also scare easily, as a kid I could never make it through a full episode of a Scooby Doo cartoon because the spooky music would always freak me out before the giant bog monster/ghost bull/angry pirate was revealed by those “meddling kids.” Seriously. Now speaking of fear inducing monsters – you know what often keeps me from completing a website form – if you guessed remembering my own name, you were totally wrong, it’s the dreaded captcha monster! Born out of the necessity to kill SPAM and limit the volume of “acai berry & increasing your manhood – wink wink” email offers, this creepy crawly has infected websites all across the Internet with a beast like efficiency .

Now let’s be honest, I can barely function on a day to day basis much less do I want to try and figure out what the hell some Rorschach type squiggly demented looking characters are after I have gone through the trouble of entering my personal info on a website. Is it a sideways V, one of those less than or greater than “alligator mouths”, a mutated 7, a giant bat? I don’t know but just like that Scooby music, I try to hang in there, but eventually I freak out and end up leaving.

Every time you vote this DOWN a Captcha monster dies.

He's cute but the captcha monster will totally eat your face off - Vote him DOWN!!!!!!!!!

References:

]]> http://uitrends.com/2009/08/28/invasion-of-the-captcha-monsters/feed/ 10 An Open Letter From Your Old Friend IE6 http://uitrends.com/2009/08/25/an-open-letter-from-your-old-friend-ie6/ http://uitrends.com/2009/08/25/an-open-letter-from-your-old-friend-ie6/#comments Wed, 26 Aug 2009 04:16:27 +0000 Jeff Noble http://uitrends.com/?p=137 Trend: Dropping support for IE6

Dear Internet Users,

There has been a lot of fancy talk about killing me lately and quite frankly it hurts my proprietary ones and zeros. Since 2001 I have been there for you day in and day out with my numerous updates and patches for my simple tab-less interface, tight integration with an amazingly stable operating system, wonderful PNG light blue rendering, super advanced popup/spyware enabling, flawless rendering of cutting edge technology such as tables, frames and midi files as well as a big F you to those wacky web standards, those are totally over rated.

We’ve been together through good times and bad times, mostly bad… but don’t leave me now. If 14.4% of you are wrong, I don’t want to be right! Vote UP to keep me around another 8 years.

Signed.
Internet Explorer 6

Look at me and my friends

Check out me and my friends! We aren't going anywhere!

References:

]]> http://uitrends.com/2009/08/25/an-open-letter-from-your-old-friend-ie6/feed/ 9