Subtracting Design Techniques

This is Redensek font with a color of 8c1818. Haven't heard of Redensek, will verdana be substituted? Just out browsing the world of blogs and some are too wild.

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
-Antoine de Saint-Exup'ery

White space is free.
JavaScripts slow you down. It may be the piece that results in errors. For the novice, JavaScript is where you experience most of your errors.

From our browsing experience we find that the concept of subtracting might be a good design practice for today.

There is just too much on each page. Instead of adding to a design, subtract from it. That's todays task. How does the Subtracting Design model work? First, you must look at the overall design, and think of it as a prototype. It is not a finished product. It will be difficult for the designer to see the low-hanging fruit. Any outside observer will be of assistance. They need only to know the five simple steps and be assured that there is no wrong answer. For each portion the observer should 1. Look at the first screen (they should sit in the drivers seat if feasible). Overall impression Balanced View? Impression of color Ease of use Where can white space be added? Where do they click first (note if they ask you what to do now, if they ask then you may already have identified a cluttered screen. The subtractive design model is simple. It is based on evaluating the following areas: Can content be eliminated What does not add value Add white space The five-step process includes, but it not limited to, observing the end-user; analyzing how each portion is used; brainstorming for development of solutions When observing, the user should not know that you are observing. They tend to blame themselves instead of the developer when they know they are indeed being observered. Pay close attention to use of the mouse and shortcut keys. Observe use (or lack thereof) of the page down key and Tab keys. Do they ever venture beyond the fold? Catch them in a natual state of work. Users do not report problems. Do users find workarounds for problems? Can the problems be fixed? Do they read the Help? Can the Help be removed? Empathetic design can access five types of information which traditional market research cannot. These are: Natural order A blog voting place where you don't really want to go. Careful where you venture online.

Tell me the punch line again

Uh, there isn't one. This is a rant, ramble, and rave page. Indeed, if you wanted a story you would be reading a newspaper.

Nevertheless, you are here so let's try to say something of some interest or at least let you peek into the world of IT.

Ego

In a profession that is dominated by men (and a lot of boys) it becomes increasingly difficult to understand the male ego. Especially when you have listened to the powerful wonders and confess that they are "frauds".

They aren't frauds. The chair is just too big. They get to sit in the big kids chair now and it's a little much in the beginning.

Some still bow to the suit. Silly boys.

so you want my job, eh?

Dazed and confused they walk back to their office (kid-sized cubicle) and strategize their next move, hoping their lack of knowledge will not be revealed.

They simply haven't learned to answer "it depends".

So how 'bout those Kings?

Go Kings!

Stupid Web Tricks

Borders

Want it real quick and dirty?

This is bordered text

Copy this code and paste it (or type it) anywhere in your HTML page or your Blog.

 
<STYLE type="text/css">
.myborder{
	border-style:outset;
	border-color: orange;
	border-width:10px;
      }
</STYLE>

<p class="myborder"> 
This is bordered text 
</p>

And this is what you will see.

This is my bordered text

Want more? Check out the article Borders, borders, borders for more fun ways to use borders.

The day job...

The day job...

disillusioned and retrospectively angry

We got hacked and someone now has sensitive information, including the Social Security Numbers about all of the estimated 300,000 employees of the State of California, including me.

disillusioned and retrospectively angry

They tell us now, more than a month after the hack.

Gee, thanks boss.

Subj: Design help...  
Date: 5/29/02 6:54:12 PM 
From: [removed]
To: webmaster@mandarindesign.com 

Hi Michelle!

Remember me [name removed]. 
As you know, I am always 
working on a new design for my site 
and [link removed] 
is the new design. I copied one or two
 html tables from another site, but haven't 
yet filled in the info I
want there (is it against 
some law to do that?).

Just thought you might have some 
suggestions for me.

Thanks!
Sincerely,
name removed

Pirated Sites

In our humble opinion, lifting some code from a site is not breaking any copyright laws. It's a good method for learning about new techniques and exploring new areas. We all borrow ideas, colors, and style.

To pirate an entire site is another story. There is a great site that demonstrates the original site and the pirated sites.It's fun to browse Pirated Sites.

More Web Tricks...

Dynamic Slide Show with Fader

A possible alternative to the FadeImages Applet is this Slideshow at codelifter.com. The instructions are simple and the code is short. Here's what we plugged in to the JavaScript code - Mandarin Fadejs

so you want my job, eh?

We quickly need the Inline Style syntax to make a form field turn red when we don't like the users input. Ah, here it is this is red Cut and paste it next time from here.

<span style="font-weight:bold;color:red">
this is red
</span>

Okay, now let's repeat the style tag for each color. red orange yellow green blue violet Easy enough.

so you want my job, eh?

Waiting for jobs to run before finalizing FoxPro programs for a load into Oracle. That's time enough to put some bells and whistles in the never-ending application. When the mood is better then we will switch the red to maroon so it doesn't slap the customer :) Right now it needs to slap. Later it can just remind.

Stupid Web Tricks

Float Image Left

Using the same STYLE code as yesterday. But, this code to float an image on the left is even shorter.
All you need is one line of code.
Here's the code to copy and paste (or type) into your blog or web page.

<span style="float:left;">
<img src="banner2.gif">
</span>
And begin your text here...
it will begin to the right and will 
eventually wrap. It's hecka tight!

Do a google...

We did a google on zeitgeist and here are the results: Top 10 Gaining Queries Week Ending May 20, 2002 1. natalie portman 2. star wars 3. daniel pearl video 4. real madrid 5. hayden christensen 6. super 7 7. survivor 8. ff11 9. preakness 10. napster STYLE-O-MATTIC creates style sheet code on the fly. No software to download. Nothing to steal :) It's all free.
Blogsnobs like to show off their blogs and blogversations are with the writer alone. Are you considering jumping on the blogwagon? It's easy to set up and one blog blub a day will work.

Why so much $ ?

Because we are professionals. Here's a sample of what we do for your project -

• Narrative descriptions
  • Site Description
  • Background
  • Purpose of the site
  • Goals of the site
  • Target audience
    • Intranet - private internal
    • Internet - public World Wide Web
    • Extranet- private World Wide Web
  • Competitive analysis
  • Specific features required
    • Personalization
    • Secure transactions
    • Reports
    • Etc.
  • Responsible parties
  • Communication flow
  • Desired completion deadlines
• Database schema
  • Entity Relationship Diagram
  • Field names
  • Data types
• Diagrams
  • Data flow charts
  • Logic flow charts
  • Screen layouts
• Browser support requirements
  • Supported browsers
  • Minumum version numbers
  • Minimum monitor resolution
  • Client side scripting requirements
  • Dynamic HTML
• Capacity Planning
  • Anticipated hit counts
  • Bandwidth
  • Server
  • Processor
  • Disk storage
  • Load balancing
• Security
  • Desired "level" of security
  • Logical security model
  • Technical security model
  • Secure transaction requirements
  • Integration with existing systems
• Existing system integration requirements
  • Direct access vs. replication
  • One-way vs. two-way edits
  • Data synchronizaton
• Graphic design elements
  • Creative resources
  • Artwork resources
  • Navigational icons
• Site hosting plan
  • Remote capabilities
  • Maintenance plan
  • Backup plan
  • Disaster Recovery plan
• Review, testing, release, upgrade process
• System documentation

Stupid Web Tricks

Sunday Float your main text to the left and type around it. It's done with inline style. This style is rarely used but has been working well in most browsers. The style code that floats the text left also works with graphics. Copy the code below and paste it (or type it ) into your blog.

<span style="float:left; font-size: 36pt; 
font-weight: bold; font-style: italic">Sunday</span>

Do a google...

Do a google on yourname.com

Qoöl

Is your programmer out playing?

Should we be calling some of these

Stupid Web Tricks

Like typing flipped vertical. Would even a good skateboarder could read it? C'mon, you know you want to flip your text. Do it like this

<DIV 
STYLE="background:#ffffff;
width:200;
height:30;
filter:flipv()">
They can actually flip vertical. 
</div> 

Whoa, that was fun. Surfing the Web is not anonymous. What does your browser tell each site about you?

Curious about what a site knows about you?

All of the data is tracked in site logs. Using the logs and formatted reports the Webmaster can see how many times you visited, the pages you browsed, how long you stayed, where you've been, where you go when you leave. No, we don't pay much attention to the logs but most sites do.

Enjoy your junkmail!

Play with bgcolor="whitesmoke"

Color Palettes The junk mail today from HitBox Banner Network had this background color of whitesmoke. This is a whitesmoke background, a particular pleasing palette for spring that we can borrow :)
bgcolor="whitesmoke" Whitesmoke is very gentle and this text color of 425475 is subtle, eh?	bgcolor=#689590 is background color here, they used it as a text color
#858585 is another background color	#DFE7E9 is another background color	background whitesmoke with font color #515151 #515151 is the font color used for links

a day's work

Is your programmer out playing?

so you want my job, eh?

Yes, I still dream in browser-safe colors. Last night I had to cut-and-paste a little piece of the real world into the dream which required waking for a moment. After falling back asleep a simple click on the back left-arrow resulted in going back into the dream.

Sleep.

We updated the ColdFusion Help page today. There was nothing out in ColdFusion land worth stealing or sharing, not even a little tidbit.

so you want my job, eh?

Browsing blogs

And from some blog we stold the comment "Coding tricks stolen from the Resolutions Quiz stolen from the Beatle Quiz, stolen from somebody else, probably stolen from somebody else"
We found this treasure dynamic cheatsheet creator today in the free code arena.
Overheard: "Your blog is like a car wreck, but more interesting"

What do programmers do on Saturday?

It's Saturday and right now I'm wondering if there are any programs or systems that are dependent upon the new F9 record being added to the database. The new file and record types will track DSL info and is stored in yet another mainframe-based text file.

so you want my job, eh?

But, so many programs read the data there is no way to just survey each and determine which might go wild when it hits this new record type. Have to do a brain search and keep thinking it through. The dependency will not be obvious and there are at least 20 or 30 or 40 REXX, FoxPro, and SAS programs that use that data source. This isn't even my job, the new programmers are supposed to maintain the systems, but the new kids don't know how to spell m-a-i-n-f-r-a-m-e.

so you want my job, eh?

Off to the Kings vs. Lakers playoff game this afternoon.

Go Kings!

Who is that man behind the curtain?

Verbal grenades are the bomb. Trying to keep this under control but the speed of typing is faster than the speed of unedited thoughts that spew onto the pages. Spelling and grammer be damned.

so you want my job, eh?

Again today we contribute to the creative spelling dictionary. And you thought this was going to be a slow day...

so you want my job, eh?

So I'm out reading another blog where the writer refers to "the wisdom of the common man" and what strikes my funny bone is that I think he is referring to Joe six-pack.

Fade Applet or JavaScript Slide Show

This fading image you see here is done with the old Fade Applet (click the link to see the short and easy instructions).

The JavaScript slideshow looks identical so you can compare and select either one for use on your site.

so you want my job, eh?

Programming isn't rocket science but it may hurt your brain and your attitude... No problems yet today so writing some .bat files to backup the production data (program source code, templates, and data) to a shared drive. Putting the work flow in an HTML document so I can just click. Nah, these can't be run on a scheduler right now, it's somewhat manual. So, how 'bout them Kings Lunch? On a roll with the session variable captures and really need to start closing them when customers exit...pepsi is here, vending machines for candy bar...I'll just blog a quick break away. The sun is shining but we don't know it in here. It's been years since I've seen the seasons change. The windows are at ceiling level with the blinds shut. Too much screen glare otherwise. We are the inmates running this asyllum (where's the spellchecker when you need it).
I was done for the day, but found this sick site Blog Stickers where you can get stickers for your blog. Blog stickers...ye gads!

a day's work (today)

so you want my job, eh?

You think Programmers program all day? AM - discuss the year and a half database project (consultants) that failed, while I'm tweaking some ColdFusion code. The CFSELECT and the REQUIRED option not working as expected. Three large screens in front of me and still not enough room to hold it all (IBM/TSO/ISPF mainframe screen and several PC related data screens.

so you want my job, eh?

Phone call. Question: How many workstations (PCs) in our network. Does 84,000 sound correct? No. More like 200,000 but we don't know what is connected, only what the customer tells us is connected. Old data. Old methods. No real need to know how many physical end-user devices, just logical definitions.

so you want my job, eh?

DNS questions that I can't answer. Refer.

so you want my job, eh?

Back to coding...that's what programmers do, right?

so you want my job, eh?

So, how 'bout those Kings? See the game last night?

so you want my job, eh?

Phone rings...can you add a search option for the QC# to this app? Yea, sure. I'll get to it real soon. Adding it to my list right now.

so you want my job, eh?

Oh, there we go typing upside down again...here's the code to flip your text vertical

<DIV 
STYLE="background:#ffffff;
width:200;
height:30;
filter:flipv()">
Text entered here will be flipped vertically
</div>

Yea, it's another filter to confuse your visitors (flipvertical)

Go Kings! Go Kings!

so you want my job, eh?

ColdFusion They develop new versions of software faster than we can process in our ordering system. Macromedia is touting ColdFusion MX now. Guess ColdFusion 5.0 is already "soooo last week" and my copy just arrived. The upgrade path is confusing.

so you want my job, eh?

I order for developers (Studio, the cheapy software) while the Internet group orders the servers (bigger bucks). It looks like the server goes from 4.5 to MX, without a version 5.0 in the middle. Very confusing to try to relate the two.

so you want my job, eh?

Scraps

Last week I was working on a screen that opens in a new window and needed the code to give the user the option of closing the window. Just a little snippet of code...an anchor reference to javascript.
Close this Window

<a href="javascript:top.close()">Close this Window</a>

Here's another sample.
Close

<a href=javascript:window.close()><b>Close</b></a>

You know you want it...

The Shadow Filter

The shadow filter looks a lot like the glow filter. And, it's just as easy to code.

Here's the code if you want to copy and paste it (or type it) into your blog.

<TABLE STYLE="filter:shadow(color=orange)">
<TR><TD>
<big>The shadow filter looks a lot like the glow filter. 
And, it's just as easy to code.
</big> 
</TD></TR>
</TABLE>

You learn something old every day...

Google's Top 10 Gaining Queries for Week Ending May 6, 2002: 1. spiderman, 2. morrowind, 3. kentucky derby, 4. pim fortuyn, 5. cinco de mayo, 6. kirsten dunst , 7. hubble , 8. may day, 9. juventus , 10. gamecube

The Glow Filter

You don't need images for this effect, just a STYLE tag.

Still playing with the glow filter today. Wanna play?

Here's the code if you want to copy and paste it (or type it) into your blog.

<TABLE STYLE="filter:glow(color=yellow)">
<TR><TD>Still playing with the glow filter today.
Wanna play? 
</TD></TR>
</TABLE>

Go Kings! Go Kings!

a day's work

so you want my job, eh?

Is your programmer out playing?

Programming for the Web can be fun. The most misunderstood part is a lot of people think it is like designing home pages. In the real world (day job) yes, I do develop Internet Web-based applications. And it is a little like designing and developing a home page.

Guess what

There are no images in this Web-based application in progress. The one exception is the company logo and an up arrow image. The color palette is limited to the standard goldenrod, navy, and touches of maroon. You see, there are customers who use the Web-based applications all day every day.

You can't make them look at pictures or wild colors. It's like the customer recently who liked the screens because "they are the color of money". Well, look at a dollar bill and you will see the limited color palette. That is what works for the all-day everyday workers.

It's a business application. Most of the work is during the analysis phase, not the actual coding. We figure out what the problem is that the customer wants to solve with automation. They usually are not very clear on that part. They know that some parts of their work can be automated. We figure out which parts and then prototype it. Once they see the prototype ("the moment of visualization") they can then describe what they reallly want. If the application is written well and works well for the customer they tend to want more of their business automated in this same system that was created for an entirely different purpose. It's the automation result (screens) that they are familar with, have embraced, and now want to add to it. The process can, and does, go on for many years.

Many Years?

Yep. And millions of dollars. Designing new databases and making the programs work with new technology. It's a never-ending process. Consultants come in for the heavy loads.

The Lighter side...

Some serious work going on here in the office. Had to come into the blog to steal some of my own code for some automated emails that are being generated using ColdFusion. It's actually the style syntax that I've come to lift. That dashed box. Luckily, this email is only going to Internet Explorer 5x customers so it's easy to format it using inline style.

And here is the code so that I can just cut and paste it from this screen if it's needed again. Solid looks nicer than the dashed box, maybe.

<div style="border: solid 1pt firebrick; width:200px;  
background:#ffffff; padding:10pt" align="left">
Ah, here it is. Think I'll use this box for the 
exception comment</div> 

And it looked like today might be slow day...

ColdFusion problem. Server is slow, too many simultaneous users or someone wrote a runaway query, but the FoxPro program that reads the MVS/TSO flat file data that is downloaded nightly needs a quick fix before we move on to the load into OpenView. So, I'm blogging and then will sneak a smoke before getting to the emails or letting the phone ring. Pepsi in hand I depart...

My boss, the genius...

Take a minute to decide on beige or bisque for the background color on the standard acknowledgement verification note. Some will have to look at it everyday, all day. Yuk. Bisque looks nearly pink and I'm in a bad mood so let's stick with bisque. Yea, we really are not harmless. It's a slow torture, not as obvious as blinking text or animation.

My boss, the genius...

Our Internet ColdFusion server is down now. Dead in the water. Too many customers in the afternoon? Can test locally and muck with the colors in the email again. Or, could work on the security levels within the app but that one is a headache. Update the User Manual? Nah. Time to focus on how to keep the app alive.

Need another quick break. Try this at home. More STYLE for your blog.

You can change the background color behind a piece of text using this simple effect. You don't have to copy any code between the <HEAD> tags on your page for this one to work.
Here's the sample code to copy and paste (or type) into your blog:

<span style="background-color:yellow">
This is highlighted
</span>

Here's the result: This is highlighted

Okay, one more fun one before we quit for the day.

This is glow filter effect

No, nobody pays you to glow text :) That's what blogs are for.

Are we having fun yet? The glow filter is just a fun style. It's simple and is rarely used. There aren't many places on a page where it would really be appropriate. But, for blogging it makes for some cheap trick fun.

My boss, the genius...

My boss, the genius...<-------that doesn't mean anything. Rarely see my boss. He's a nice guy. Doesn't have a clue what developers do but that's okay. That's what they pay me for

Thursday, May 09, 2002      Permalink   EMAIL  

Blogging with Style

So, you want to blog in style? Use inline style to put some attitude in your type. This paragraph is using inline style. Here's the HTML code to copy and paste.

<p TYPE="text" 
style="font-family:arial,helvetica,sans-serif; 
font-weight:bold; font-size:12px; color:sepia"> 
This paragraph is using inline style. 
Here's the HTML code 
</p>

What's your mood? Tone? Can type express you?

What's your mood? Tone? Can type express you?

And here we have

large orangered Haettenschweiler.

Say that three times.

de code de code, gimme de code, boss
Yep, it's all about coding. Once you find a few styles that you like you will repeat them. They become a part of your voice through the type, or something like that. These are a few favorites you see here. Inline Style makes the most sense in a blog, especially if you are not using an external style sheet.

<p TYPE="text" 
style="font-family:Haettenschweiler;
font-weight:normal; font-size:large; color:orangered">

<br>And here we have large 
<br><br>orangered Haettenschweiler. 
<br><br>Say that three times. 

Hint: The code will work if you put it all on one line. We put it on separate lines for demonstation. Either way usually works.

If it doesn't work on the first try make sure your blogging tool didn't insert stray line break <br> tags. You may not be able to see the line breaks. Use the delete key to make sure each tag is on one line.

Wednesday, May 08, 2002      Permalink   EMAIL  

Today is the first day of the rest of your life, unless it is the day you are going to die.

      Permalink   EMAIL  

Same images, different techniques...

Learn to Group Clickable Images

Or

How to use the old Fade Applet

Yea, we like the fade too. It's just not as reliable.

Tuesday, May 07, 2002      Permalink   EMAIL  

An oldie but goodie...the fade applet. How to use the old Fade Applet

Sunday, May 05, 2002      Permalink   EMAIL  

      Permalink   EMAIL  

FENG SHUI

"DO plan a new view,surprise,or delight to be revealed at every step or turn along a garden path. "

from FENG SHUI DOs & TABOOs, author ANGI MA WONG

Question: Can we translate this as "do plan a new view, surprise, or delight to be revealed at every page or section in your page"?

Answer: It's a Web Page, not a garden.
Quit overthinking it.
Quit overworking it.
Relax.
Have fun.
There are no rules! Go for it.
Express yourself or lack of self, whatever it takes to float your boat.

      Permalink   EMAIL  

Resist the urge to code

Out Cruisin' looking for something to Punch the Page. Our look is old, out of date, boring. The original concept was simplicity but after a while it's the same ol' same ol' and JavaScripts are starting to look good. Then a quick trip to the guest book and the entry today is

Hi Michelle! I'm so glad you dropped by -- your site is fascinating! So many cool things to try out, and so neatly arranged...Golly, how I wish more folks would use simplicity -- I hate going to cluttered and slo-oow loading sites. When I update my web-help page, I'll be adding your link. Great work! Lary

Thanks Lary for the reality check!

Friday, May 03, 2002      Permalink   EMAIL  

Malc says there is a nice image swap at Dynamic Drive - New Section. We are still browsing to see what else is new in the JavaScript world. Geez, lost the link to Malc's page but here is another really cool image fade that uses a script from Dynamic Drive.

If it runs slow it is because the images are large and slow to load. This one even runs from our test AOL browser that is usually more sensitive that Netscape!

Thursday, May 02, 2002      Permalink   EMAIL  

Try to be grief brief

Reminder: Take a look at this month's featured article Grouping Images to learn some thumbnail visual trickery.

Wednesday, May 01, 2002      Permalink   EMAIL  

Archives

2006: J F M A M J J A S O N D

2005: J F M A M J J A S O N D

2004: J F M A M J J A S O N D