How to Inspect and Design Transitions – Pause/Stop Requests with Fiddler

Designing user-friendly applications often involves creating tranisitions between two states. For example after hitting the save button you want to show feedback (a loading overlay with a spinner),  so that the user knows your app is actually doing something – processing and saving the data.

design and layout transitional elements, interactions, loading overlay by pausing the loading of a page

Here is an example where communicate that we are saving the Premium settings in discoverize – the html of the overlay is being appended by javascript.

Because these transitional elements are only on screen while the transition takes places it is hard for a frontend designer to design and layout the elements show during the transition. If they are only being hidden with css properties you could make the elements visible with help of firebug or any other browser developer tool or inspector.

However if these elements are loaded/appended by javascript and removed after the transition has finished it is almost impossible to inspect and adjust them.

How to Stop or Pause a Request with Fiddler Filters Break for Inspection

There is an easy way to pause or stop your request: Fiddler filters.


Fiddler is a free desktop web debugging tool by telerik. It allows you to analyse traffic of your web app or website.

Here is how you set a breakpoint on POST to interrupt the request:

pause or stop a request with breakpoint on POST in Fiddler - to design and layout transitions in web apps

  1. Open Fiddler
  2. Navigate to the “Filter” Tab
  3. Turn on the checkbox “Use Filters
  4. Go down to “Breakpoints” and turn on the checkbox “Break request on POST

Done. Now, in your web app, as soon as you press the save button (or equivalent interaction) fiddler stops/pauses the request. In our case the loading overlay is being shown permanently.

You can layout and design the transitional elements as you are used to with firebug and so on.

Once you are done you can either resume the request by pressing “Go” (top left) in Fiddler or simply turn off the breakpoint or filter.

Thanks to Oliver for showing me this tip 🙂

How to Stay Sane and Productive and Up-to-date as a Digital Worker – Manage Incoming Information

Being productive is key to being a web and ux designer or any person working on the web.

One part of productivity is knowing where to find the information you need when you need it.

Another part is keeping up with new developments in your trade, constantly learning and improving.

However, I believe the most important part to being productive is actually getting back to work and getting things done: designing web sites, building web apps, publishing content.

Many Opportunities to Learn and Improve your Skills

As a passionate frontend developer or ux designer for that matter you get bombarded with more information than you can possibly handle, let alone use productively. If you just try to stay up to date with developments in your field of expertise, you follow leading blogs, important people on twitter and signed up for a couple of newsletters.

Every day you get dozens if not hundreds ideas for improving your workflow, speeding up production or trying something completely new:

  • Sass for smarter css development
  • Grunt and Gulp for automation
  • flexbox for more complex layouts

And if you are building a product you have to learn even more stuff:

  • marketing and sales
  • support and customer satisfaction
  • pricing and business models

So basically, your inbox, rss reader, twitter is overflowing.

“Getting Things Done” Rescues Your Sanity and Creativity

If you have read the enourmously popular “Getting Things Done” by David Allen, you know that a major key for being productive is a well structured system for managing incoming stuff.

Simply put, Allen suggests that you sort all incoming stuff into clearly predefined buckets. For the purpose of this post I am only going to focus on 3 buckets:

  • actions: things I should do next
  • someday maybe: things I might consider doing sometime in the future
  • reference: information I might need later

The crucial step to staying creative and sane is to keep your head free from todos, mental notes, reminders - so that you can actually focus on the work at hand. This may even apply more to designers then to other digital workers, because designing is about coming up with many solutions to a problem. And more mental space you have, the more ideas you will generate.

Tools That Help Me Stay a Productive Designer

Diigo for Maybe Later and Reference Information

A lot of information is nice to know, however does not  change your current course of action. But you might need it at some point in time - so it would be great if you could find it later quickly.

Examples for reference information might be:

  • a blog post on how to create circle icons with css
  • a guide how to build your own html emails
  • a video on how to run a facebook ad campaign for your product

All these things are currently not relevant to your actions, because you currently don’t work on them. But you think, they might prove useful to you in the future. And you already know that you can trust the source - which in most cases beats a new google search on the topic.

diigo logo - bookmarking productivity tool

So I save them in diigo. Diigo is basically an online bookmarking tool. You can save links and access them in your account from any device later. I just recently switched to diigo from delicious, because it is a lot faster and easier to use:

  • You can install the diigo add-on in any browser to save a web page with a click of a button (I simply click ctrl + d) - the diigo popup opens
  • I add some tags (for example to associate the post with a project of mine) to find the ressource later hit save and I am done

using diigo for reference bookmarking with firefox addon

I know the information is securly saved and I don’t need to worry about finding it again.

So I can get back to work.

Pocket for Actions and Maybe Later

If I get across a blogpost that I think will change the way I work or approach things, I will actually want to read it sooner than later.

Examples might be:

  • a blog post about improving your sass compiling time by switching from grunt to gulp
  • an article on how to auto-reload your web page across devices during development with browser sync
  • a guide how to improve your blog post writing by chosing better headlines

The difference to the reference information is crucial: These posts help me improve my work right now. Because:

  • I am using sass and it’s slow to compile
  • I loose time waiting for my browser to reload while designing web apps
  • I would love to improve the readibility of my posts 🙂

However I cannot stop the work I am currently doing just to implement these ideas. So I need a place to store them for later completion.

pocket logo - bookmarking productivity tool

Pocket to the rescue: Pocket is also an online bookmarking tool - however offers a better read-later experience - which is perfect for actionable information.

With a simple click of a button you save a page to pocket:

using pocket to save posts for later read

Because I don’t store these posts for reference but want to act on them, I do not add any tags here. I am going to get them sooner or later.

The next step is simple: Whenever I have a moment spare time or energy avaible to try something new, I fire up the pocket app and simply pick a post from my list and read it or implement it. I either pick the first post or if I am not into just scroll to the first thing that catches my eye:

my pocket reading list - simple productivity

Another great thing about pocket is the great reading user experience: It let’s you completely focus on the content - no distractions, no ads, no navigation, no newsletter popups:

pocket reading view - focus on the stuff you want to learn

I especially enjoy the reading experience on my smartphone with the pocket app. The content always looks good, sharing and saving new links is easy and let’s you get back to the article quickly.

With Pocket I have completely changed my blog reading habits: I don’t have dozens of tabs open with blog posts that nag at me for not reading them for weeks. And even though my list in pocket is growing every day, it does not bother me, because I know I will get to it if I have the time for it.

Clearing Your Mind and your Workspace to Stay Productive

Which brings us back to Getting Things Done: Using diigo and pocket gives me the peace of mind to organize incoming stuff where it belongs and getting back to doing actual work.

As David Allen best put it:

Your Mind is for having ideas, not holding them.

Try the tools: and

How to Decrease Your Bounce Rate to Zero and Why Bounce Rate is not a Search Ranking Factor

While making changes to our google analytics events for our web portal software discoverize, we managed to drop our bounce rate to zero. In this post I share what how we fixed the problem and why I think that bounce rate can not be part of google’s search ranking algorithm.

What Exactly is Bounce Rate?

We all know, the lower the bounce rate the better, but what does it actually represent?

Google analytics defines bounce rate as the

percentage of session, in which the person left your site from the entrance page without interacting with the page.

(Check here for a more in depth explanation:

Basically it means, that after arriving at your site, the visitor does not go to another page or converts for you (for example newsletter signup).

Usually you would want your bounce rate to be as low as possible – because you want your visitors to convert in some shape or form. Be it by buying something, linking or commenting on your blog post or subscribing. There are exeptions to this rule – because a high conversion rate can mean that your visitor has found what she was looking for – wikipedia is a great example (unless you are actively procrastinating 😉

How We Dropped our Bounce Rate to Zero

Our discoverize portals usually have bounce rate around 40% – which actually is quite a good number for travel related sites. A couple of weeks ago it suddenly dropped by about 50%:

drop in bounce rate by 50% - google analytics

Naturally we wanted to take credit for improving our software and encouraging more interactions with our portals. However we had not deployed any changes in that period that should have affected the bounce rate this much.

So we dug deeper to find out what could have gone wrong. And pretty quickly we found that the bounce rate on our detail pages had dropped to zero (for example a glamping detail page:

bounce rate dropped to zero

So this definetely could not be right… After going through our git commits we quickly found where the mistake came from:

We had added an google analytics event that would trigger as soon as the detail page was opened. A glance at the google analytics events documentation showed that these events count are interpreted as as user interactions. This means that these visits even though not triggering any real interation from our visitors did lower the overall bounce rate.

How to Prevent Events from Affecting Bounce Rate

Luckily there is a pretty easy way to fix this – via David Walsh:

ga('set', 'nonInteraction', true);

More on tweaking your events and bounce rate in David’d Blogpost:

Sadly, our bounce rate is back to normal:

bounce rate back to normal

Why Bounce Rate Should not Affect Your Search Rank

There have been some speculations on whether or not google considers your bounce rate when calculating your search rank.

Our inadvertent drop in bounce rate show that you could manipulate your bounce rate very easily. So it seems reasonable to asume that bounce rate should not be part of google’s search algorithm.

How to Really Improve Your Bounce Rate

If you want to increase your visitor’s interactions with your site and convert them to customers, readers or fans check out this post by quicksprout with a great infographic:

Striped Progress Completeness Bars with CSS3

In a recent project we needed bars that represented the completeness of an entry in our portal software discoverize.


The idea was to introduce a gamification element to motivate entry owners to fill out their entry. The bars needed to allow for:

  • different colors (positive, normal, negative)
  • different sizes (depending on context)
  • display readable text in all settings

So lets get started with the css funkiness.

Step 1: Creating Stripes with CSS3 Linear Gradients

There are quite a few resources on creating stripes with css:

Because I wanted a more subtle, sketchy look with thin stripes, I decided to create my own pattern that looks like this:

css stripes thin sketchy as overlay

In order to achieve the effect I used the :before pseude-element to create the stripes as an overlay. You position it absolutely within your parent so that it fills it completely.

Basically you create a CSS3 linear gradient with transparent segments and semi-transparent black segments where you want the stripes to be. This way the stripes would always appear in the color of the parent element. You rotate the gradient to the angle you want (in my case 45 degrees). By using gradient segments that start and stop at the same point you get a hard line instead of a gradient between the colors.

You can adjust the width of the stripes by changing the gradient segments and the background size.

.stripes {

.stripes:before {
  background-image: linear-gradient(-45deg, 
      rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 2%, 
      transparent 2%, transparent 50%, 
      rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 52%, 
      transparent 52%, transparent); 
  background-size:20px 20px;

Check out the finished look (demo):

See the Pen ogRdWp by Andrej (@AndrejTelle) on CodePen.

Step 2: Creating the Progress or Completeness Bar CSS3

There a quite a few of resources for creating css bars, however they are mostly for displaying a animated progress status. Basically the user is waiting for something to happen on your page – either an upload or download or some transaction being completed.

We needed a representation of the current completeness of an entry – so no animations and more of a flat overall look and feel. And the text should be readable both above a full bar and the empty bar-wrapper.

completeness progress bar with css3

In order to be able to adjust all compontents of the bar I created a SASS mixin that allows me to create bars of different colors and sizes. I can set the following variables:

  • size (height) of the bar
  • color of the actual bar-meter
  • color of the text and the text-shadow
  • background color of the bar-wrapper

You need an html parent element that is the bar-wrapper and an child-element that get’s the inline style width set to the completeness percentage. Here is the html:

<div class="bar">
  <span class="bar-meter" style="width:92%"></span>
  Completeness: 92%

Here is the CSS (Sass, SCSS) needed:

// mixin definition for bar-wrapper, actual dynamic bar and text
@mixin bar($size:17px, $bar-color:#5bb75b, $text-color:#fff, $text-shadow-color:#444, $bg-color:#ddd) {
  // wrapper properties
  border-radius: 5px;
  border: solid 1px #999; 
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.2); 
  // text properties
    1px 1px 1px $text-shadow-color, -1px -1px 1px $text-shadow-color,
    1px -1px 1px $text-shadow-color, -1px 1px 1px $text-shadow-color, 
    1px 1px 2px $text-shadow-color, 1px 2px 2px $text-shadow-color,;
  font-family: verdana; 
  // actual dynamic bar
  .bar-meter {background-image:linear-gradient(lighten($bar-color,7), darken($bar-color,7));
    border-radius:5px 0 0 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border:solid 1px rgba(0,0,0,0.35); 
    border-right: solid 1px rgba(0,0,0,0.45); 
    border-bottom:solid 1px rgba(0,0,0,0.45); 
  // stripes on dynamic bar
  .bar-meter:before {
    background-image: linear-gradient(-45deg, 
      rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 2%, 
      transparent 2%, transparent 50%, 
      rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 52%, 
      transparent 52%, transparent); 
    background-size:16px 16px; 

And then you call the mixin on your bar-element and define the variables (size, bar-color, text-color, text-shadow, bar-background) you want:

.bar-1 {
@include bar(36px, #5bb75b, #fff, #333, #ddd); margin-bottom:24px;}

Here is the result with different sizes and colors according to completeness:

See the Pen NPVygb by Andrej (@AndrejTelle) on CodePen.

Check out the full completeness bar demo.

For sake of brevity I did not include vendor specific css3 prefixes. Make sure to include those for browser you need to support.

If you have any suggestions for improvements I would be glad to read them in the comments. Feel free to critique my code.