36 posts categorized "Design"

Nettuts+ Video Tutorial: Getting Clever with CSS3 Shadows

Lately I've been doing a great amount of experimentation and testing with CSS - and seeking to understand more of the goodness that comes with CSS3 as more and more browsers support both HTML5 and CSS3. In that experimentation, I came across this great video from Nettuts+ about how to create shadows with CSS3. I thought it was quite cool and recommend it for anyone else playing around with CSS3:

Now... if only all the browsers out there would fully support CSS3!


If you found this post interesting or useful, please consider either subscribing to the RSS feed or following me on Twitter or subscribing to my email newsletter.

Here's the #1 Reason I Hate Websites That Use Flash...

Right here in the screen capture:

flashonamac.jpg

If the fan on my MacBook Pro starts kicking in... or if it gets slow... or if I look at the CPU monitor and see it jacked to near 100%... all I have to do is open my Activity Monitor and...

99% of the time it's an issue with Flash!

Now, granted, it's probably not "Flash", per se, but rather "a website that isn't using Flash properly". Or "a website that has a poorly written Flash app."

But that's perhaps the point... so many websites out there have poorly written Flash apps!

The good news is - and THE reason I use Google Chrome - is that I simply kill off that process and my Mac goes back to being snappy again. Still, it's annoying.

How about you? If you're on a Mac do you find Flash sites jack up your CPU?


If you found this post interesting or useful, please consider either:



CSS3Please.com - a great way to learn about CSS3

css3please.jpgIf you are, like me, interested in understanding more about how Cascading Style Sheets Level 3, a.k.a. "CSS3", particularly as it plays a major role in the ongoing evolution of HTML5 particularly on mobile platforms, you will probably find this site immensely useful:

http://css3please.com/

CSS3 has been in development for quite a while (intro from May 2001) and is still evolving (current status) but it represents a great advance in control over design of web sites directly in a browser.

With CSS3 one of the greatest benefits is the ability to replace images with in-browser elements.

Consider something as simple as "rounded corners" on a box. Without CSS3 you have to use images. With CSS3, you can ditch the images and create rounded boxes directly in the browser. For instance, this paragraph should have rounded corners (and a shadow) if you view it in the most recent builds of Firefox, Chrome or Safari.

What I've done is simply added an inline style to the <div> and then added multipled paragraphs inside of that div block.

CSS3Please.com lets you experiment with CSS3 directly in the browser... and then copy/paste the results over into a stylesheet for your site (or use as an inline style as I have here). It's a cool tool for those of us interested in design.


If you found this post interesting or useful, please consider either:



SXSW Slides on Fluid Web Typography (from Jason Cranford Teague)

Those of you who know me well know that I have a long-time interest in typography and publishing design dating back to the many years I spent teaching FrameMaker in the early 1990's... given that, I was delighted to run across this presentation by Jason Cranford Teague that he apparently gave at SXSW this past week. I like the style of the presentation and although I wasn't at SXSW to hear his narration, I can gather from his slides some of the points he was making. He does have a point... why do we limit ourselves so much to the default fonts of the web? Let's use typography more to make more attractive and interesting sites, rather than just settling for the defaults...

If you found this post interesting or useful, please consider either subscribing to the RSS feed or following me on Twitter or identi.ca.



Our screens are getting bigger... and smaller... (is your website ready for that?)

Over on his blog today, Christopher S. Penn pointed out that, at least according to website analytics, the screens we use to view web pages are getting both bigger and smaller...

His point being that those of us working with online marketing need to think about our content both in terms of how it will appear on giant screens now available and also on the tiny screens of mobile devices.

Naturally, I had to check the analytics for this site and, sure enough, the same two sizes Christopher identified appear in my stats... only on my site for the past month they are at #6 and #7. (Chris' were at #6 and #9):

screenresolutions-1.jpg

Now, granted, when you look at the percentages of visitors using those screens, it's only 4.7% using the 1920x1200 and only 4.6% using the 320x396, but still, it's interesting to see. (I also at some point should dig in and look at the trend over time.)

wptouchonvoxeoblogs.jpgChristopher mentions the need to make sure your website looks good on mobile screens and recommends the MobilePress plugin for Wordpress users.

I've not used that plugin, but what I found worked very well for the Voxeo blog site was the WPTouch plugin from Brave New Code. As you can see in the image on the right, it displays all your blog posts in a very iPhone-friendly manner. It has other options, too, to interact with the blog site. (But you don't have to trust me, just head over to blogs.voxeo.com with either an iPhone, iPod Touch or Android phone and check it out.)

I admit that part of the deciding factor was that I really liked the look of the site with WPTouch. If you click on the "down arrow" in the upper right next to the blog name, you also have easy access to the tags, categories and other navigation controls of the blog.

The key point, though, is that you need to make sure that your website content degrades gracefully as it goes from giant screens to small screens. For WordPress-powered blogs, either of these plugins - or the others out there - will help reformat your content appropriately.

What are you doing on your site to address the mobile audience?

P.S. If you use Google Analytics and want to see where these screen resolutions are for your site, go into GA and then into the report for your site. Click on "Visitors", then the arrow next to "Browser Capabilities" and then finally "Screen Resolutions". Where are 1920x1200 and 320x396 on your site's list in terms of order? Feel free to leave your results (like "#6, #7") here in the comments...


If you found this post interesting or useful, please consider either subscribing to the RSS feed or following me on Twitter or identi.ca.



R.I.P. GeoCities...

yahoogeocities.jpgAs has been widely reported, Yahoo! is shutting down and deleting all the content from its GeoCities service today. This isn't a surprise, as Yahoo! has been laying the groundwork for the shutdown for some time. And in truth, I'll barely mourn the passing... I haven't intentionally been to a GeoCities-hosted site in years.

But...

..."back in the day", as folks are so fond of saying now, GeoCities certainly was a place where many people got their start with free websites. For those of us online in the 1990's... long before all the zillion sites today where you can go and create your own free site... there was GeoCities.

I had websites running on other servers and never set up my own site on GeoCities, but I certainly knew folks who did and undoubtedly spent time on some sites there. It's amazing on one level that the Yahoo! acquisition was ten years ago... but in recent years the service had definitely been eclipsed and for many of us was more almost a caricature than anything else... (see today's XKCD layout to get a sense of what the site had become like).

Still, it's worth noting the passing, because back in the 1990's, GeoCities certainly did help many people get online. Some articles I noticed today:

And, as I mentioned earlier, the folks at the XKCD comic changed their layout in tribute:

xkcd-geocities.jpg

(P.S. A colleague has pointed out that if you view the source of the XKCD page, it's even funnier...)


If you found this post interesting or useful, please consider either subscribing to the RSS feed or following me on Twitter or identi.ca.



Noupe: "50 Most Beautiful Icon Sets Created in 2008"

50mostbeautifuliconsets.jpgAre you fan of well-designed icons? Would you like some new icons to use on our blog or web site?

As a long-time fan of design in general, I was pleased to learn from my Twitterfeed (I'm sorry, I don't remember from who!) of the "50 Most Beautiful Icon Sets Created in 2008" on the Noupe blog. Some very cool icon sets in there... many/most free and others commercial.

I love to see the range of creative ideas people come up with...


If you found this post useful or enjoyable, please consider subscribing to the RSS feed for this blog or following me on Twitter or on identi.ca.


Technorati Tags: , ,


A web page you should NEVER see...

UPDATE - May 7, 2008: A bit of an apology to Fast Company is in order here. Shortly after I posted this piece back on April 30th, Paul Maiorana, who works with the Fast Company web site, contacted me asking for the original URL I used that got me to the screen I include below. After I provided the URL, Paul very quickly said it was the wrong format for the Fast Company site (even before the site re-org) and the blog where I found the link was using the wrong link. He also provided me with the correct link.

Oops.

So of course if I am following a link to a page that never existed on a web site I will naturally get an error message like the one I show. As to my inability to find the article through the search box, all I can say is that whatever search terms I used at the time (I have no clue now what they were) didn't find the article for me. It was, though, there on their site.

So my apologies to Fast Company for criticizing aspects of their website redesign. Clearly in this case such criticism was not warranted.

I'd note that the point I was making about web site redesigns still stands - if you have a valid URL from before a redesign, it should still work after a redesign. Obviously, if you have an invalid URL, it still won't work.

P.S. For the record, the post I was trying to find was "The Ultimate Calling Card" about books and self-publishing.


I'm sorry, but I find pages like this utterly inexcusable:
fastcompanypagenotfound.jpg

Okay, so you went and "re-organized" your web site and in the process completely screwed up all the URLs that used to be there. But, c'mon, man, haven't you heard of Apache redirects (and their equivalents for other web servers)? In my opinion, part of any website reorganization/redesign/whatever really MUST include some plan to redirect the old URLs. Why? Simple:

Once posted, URLs live "forever".

Those URLs are linked to by other web sites. They are incorporated into blog posts. They are sent along in email and IM messages. They wind up in search engine databases.

Once used out on the Internet, in my opinion, URLs should never be deleted. Redirected, yes... but not deleted. Unless, of course, the content is actually being removed from the web server in which case, sure, the URL will no longer work. But if the content is just being moved to a new location... to a new URL... because of a redesign then I shouldn't get a 404 for following a link to your site for the older URL.

Sure, with a large site setting up the redirection will take a good bit of work, but the benefit is people will still be able to easily get to your content, nevermind all the SEO advantages. Unless, of course, you don't really want them to find your content anymore.

P.S. I did search Fast Company's site for the article I was looking for and couldn't find it. Fast Company's loss... it sounded like an interesting article to read that I probably would have passed along to the 1,200 people following me on Twitter.

Technorati Tags: , , ,


The curious case of the lowercase "g"... and my, how resources available to parents have changed...

200711270803A conversation at 5:30am this morning:

"Daddy, what is this letter?" (holding up a puzzle piece with a letter on it)
"It's a letter 'g'".
"No, it's not."
"Yes, it is. It's just a lowercase letter. A small one."
"But where is the squiggle at the bottom?"

It turns out that she was talking about the loop at the bottom of the lowercase letter "g" that appeared in one of the books she has been learning words from. Looking up the letter G in Wikipedia did in fact bring up this interesting (to me) little bit of typography. If you look through the various letters, the lowercase "g" is really the only case I know of where we have common usage of a very different letter from a typographic point-of-view. (Well, another case might be the uppercase W.) Many if not most letters have common variations with and without a serif (the line on the top or bottom of a "stem" or main "stroke" of the letter, for those not accustomed to typographic terms). But I can't really think of another letter that varies as much as the lowercase 'g'. A quick survey of some of my daughter's books shows that the g does have a "squiggle" or loop at the bottom of it in some common fonts.

From the Wikipedia article:

The modern minuscule (lower-case) G has two basic shapes: the "opentail G" and the "looptail G" . The opentail version derives from the majuscule (capital) form by raising the serif that distinguishes it from a C to the top of the loop, thereby closing the loop, and extending the vertical stroke downward and to the left. The looptail form developed similarly, except that some ornate forms then extended the tail back to the right, and to the left again, forming a loop. The initial extension to the left was absorbed into the upper loop. The looptail version became popular when printing switched to "Roman type" because the tail was effectively shorter, making it possible to put more lines on a page. In the looptail version, there is a tiny flick at the upper right which in typography is called its "ear".

As I looked through our daughter's books and also looked online, it seems that all the more recent books seem to use the "opentail G" without the loop/squiggle. The particular book where she pointed this out was an older Richard Scarry book ("Best Little Word Book Ever") and the same font seems to be used throughout the "Golden Books" series of "classic" children's books. It was also present, though, in other books.

On one level, it was an interesting discussion to have with my daughter (although we could have had it a bit later in the day, really) and an interesting pointer to me to notice the typography in books she is looking at... because she will notice it.

It was also interesting to think about how resources available to parents have changed as well. When confronted with the inevitable "I don't know why it's different", I simply jumped online, went to a site (Wikipedia, in this case) and looked up the info. Fascinating world we live... and that's the world my daughter and her peers will be growing up in!

Technorati Tags:


Bad web interface design... if we don't have a choice, why give us one?

Anyone see any issue with this web page? (click on the image to see a larger version)

200710220249
So if I don't have a choice... if I can only sign up for 1 day, why give me the illusion of choice and require me to enter something in a useless field? Sheesh...

(And yes, I realize it is probably because this "SmartCity" software is deployed in many locations and in this particular location of Orlando, Florida, whoever is running it set the maximum allowed to one day. Still, you would think that someone could have made the software so that if "max = 1", the user wasn't given a choice. It's just bad design in my opinion.)

Technorati Tags: ,