At long last I’m getting around to updating Joho’s look, for several reasons:

First, my last redesign made the page look like it was designed in 1999, although I actually did the redesign about seven years ago, I think.

Second, CSS has made it easy enough to avoid using a table as the container for all of the contents of the page. That was always a hack but, it was easier than dealing with floats, etc., for a multicolumn design.

Third, it was especially easy to move away from using a table because I’ve given up on a multicolumn design. That has meant for now stripping out some early 2000s goodness, including my link-rotted blogroll, categories list, and archives. I plan on adding back my blogroll, if only as an historic artefact, via an overlay.

Fourth, the page page needs to be more readable in the mobile camera phones that the kids all use what with their Facebooking, and Chapnapping, and all the rest. I have by no means done all the work required to make this page truly responsive (Everyday Chaos is my best attempt at employing a modified a responsive template), but I’m hoping it will be responsive enough for the kids who are used to their Facebroking and Snoopchitting and all the rest.

Fifth, Medium.com‘s elegant design redefined what a blog should look like. Yes, that was like 18 years ago, but I was too busy with my Facebokchoying and Schnapssbapping to get around to it. Medium not only transformed our expectations about the tools for writing a post, but also about the reading experience: easy to take in, elegant, content-focused. So, I have increased the font size, removed the distracting sidebar, and I hope made it a more inviting page.

I’m obviously not done. For example, I haven’t yet gotten around to updating the page that shows a single post. But I’m happy so far with the redesign. Or, to put that more accurately, I’m somewhat less embarrassed by the page.

Until design tastes change again.

Aaaand, they just did.

Be the first to comment »

Princeton has published the ongoing results of its “Dark Patterns” project. The site says:

Dark patterns are user interface design choices that benefit an online service by coercing, steering, or deceiving users into making unintended and potentially harmful decisions.

So, Nudge gone evil. (And far beyond nudging.)

From the Dark Patterns page, here are some of the malicious patterns they are tracking:

• Activity Notification: Influencing shopper decisions by making the product appear popular with others.
• Confirmshaming: Steering shoppers to certain choices through shame and guilt.
• Countdown Timer: Pressuring shoppers with a decreasing count-down timer.
• Forced Enrollment: Requiring shoppers to agree to something in order to use basic functions of the website.
• Hard to Cancel: Making it easy for shoppers to sign up and obstructing their ability to cancel.
• Hidden Costs: Waiting to reveal extra costs to shoppers until just before they make a purchase.
• Hidden Subscription: Charging a recurring fee after accepting an initial fee or trial period.
• High Demand: Pressuring shoppers by suggesting that a product has high demand.
• Limited Time: Telling shoppers that a deal or discount will expire soon.
• Low-Stock Notification: Pressuring shoppers with claims that the inventory is low.
• Pressured Selling: Pre-selecting or pressuring shoppers to accept the most expensive options.
• Sneak into Basket: Adding extra products into shopping carts without consent or through boxes checked by default.
• Trick Questions: Steering shoppers into certain choices with confusing language
• Visual Interference: Distracting shoppers away from certain information through flashy color, style, and messages.

Home page:https://webtransparency.cs.princeton.edu/dark-patterns/

Academic paper:
https://webtransparency.cs.princeton.edu/dark-patterns/assets/dark-patterns.pdf

Nathan Mathias has put a front end to this data at the Tricky Sites site: https://trickysites.cs.princeton.edu/

Be the first to comment »

I just posted a new page at the Everyday Chaos web site. It lists media coverage, talks, and other ways into the book.

Take a look!

Be the first to comment »

Flexboxes were the first thing CSS created once it became sentient. Where CSS used to lay out boxes robotically following directions, now it can dynamically respond to changes to the size of a browser window, re-laying them out in relation to one another. This means you no longer have to engage in the standard design process of first trying to “float” elements to the left or right until you give up and just use a static table which you should have done in the first place anyway.

To get started with flexboxes, do what every non-professional Web muck-abouter does and pin this page to your browser.

But suppose you want those boxes to do something when a mouse comes into them? Since I keep on having to re-solve this problem because I can’t remember how or where I did it last time, I decided to post one way that works but is guaranteed not to be the way that actual Web developers do it. Also, it is not specific to flexboxes, so you may wonder flexboxes are in the title. Good point!

So, download jQuery and let us begin…

In this example (and on this actual page) we’re going to change the color of a border and increase its width when a mouse enters, and restore the color and width when the mouse leaves. You stick this code somewhere where it will be run before your user starts moving her mouse over your lovely flexboxes.

In this example, we have a set of flexboxes that have the class “flexbox”. Here goes:

// -- When mouse enters
 $( ".flexbox" ).mouseenter(function(){
     $(this).css({"borderColor" : "#AC3B61"})
     $( this ).animate({
         borderWidth: "10px"
}, 500, function() {
    // do something after the animation finishes
   });
  });

// -- When mouse leaves
$( ".flexbox" ).mouseleave(function(){
      $(this).css({"borderColor" : "white"})
      $( this ).animate({
          borderWidth: "1px"
}, 500, function() {
   // do something after the animation finishes
   });
  });

As you may have observed, these two blocks are essentially the same: one thickens the element’s border when a mouse cursor enters, and the other restores it when the cursor exits.

If it’s not clear what’s going on here, the first line runs a new function whenever a mouse enters an element that has been given the class “flexbox”. Of course you can make up any class name you want.

Then there’s a line of jQuery magic that is going to affect which element the mouse entered (so long as that element has the “flexbox” class); the “this” designates the actual flexbox the mouse entered. That line changes the color of the border.

The next line, with the word “animate”, tells the page that what follows should be an animation — a transition over time — and that time is specified as half a second (500 milliseconds) . What’s it going to do? Change the border width.

Then there’s an empty function that executes after the animation. I left it there in case you need it.

The “mouseleave” functions undo those changes.

So, that’s it. I’m sure it’s suboptimal and probably wrong, but it’s working so far. And now maybe I’ll remember where I put the code.

Be the first to comment »