Posted about 4 years ago. Visible to the public. Repeats.

Building web applications: Beyond the happy path

When building a web application, one is tempted to claim it "done" too early. Make sure you check this list.

Different screen sizes and browsers

Desktops, tablets and mobile devices have all different screen resolutions. Does your design work on each of them?

  • Choose which browsers to support. Make sure the page looks OK, is usable and working in these browsers.

  • Use @media queries to build a responsive design

    • If you do not support different screen sizes, the app should at least not look broken. Set the viewport so the page is zoomed out sufficiently to show the entire page without overflowing boxes, e.g. with %meta(name='viewport' content='width=950') in the <head>.
  • Finally, use Browserstack to validate the design on various devices

Data Amount

As your application grows, data will accumulate. How does your application perform with lots of data?

Varying Content

Designs usually come from the designer, assuming a perfect world. You need to make sure the design works with any kind of content

Internet speed

Don't forget users with a slow internet connection. Not everyone is sitting behind a FTTH cable with warp speed. Throttle your browser's internet connection (e.g. in the Chrome DevTools network panel) to feel how your app behaves.

  • If you're using Unpoly, style .up-active and show a spinner during slow requests.
  • Use Responsive Images to give each user only the image size he actually needs.
  • Make sure that your site is small enough to not blow up user's mobile data plans. Ideally the total size including assets should be < 300 KB on first load (YMMV).


Most mobile devices can add web application to their application list ("home screen") as pseudo-native apps.


When shared in social networks, your website will be parsed and turned into a small preview. You should at least configure a reasonable default image, else a random image from the page might be displayed.

If your web application has shareable content, you can even improve its display by including dynamic meta information with each page.

  • Twitter Cards

  • Facebook's Open Graph. Add these tags:

    %meta(property='og:url' content=…) # Permanent URL to this piece of content %meta(property='og:title' content=…) %meta(property='og:description' content=…) %meta(property='og:image' content=…) # Image URL %meta(property='og:locale' content='de_DE') # en_US is default


Does your web application have printable content? Add print styles (@media print { … }) if needed.

  • Bootstrap comes with a good default print stylesheet

    • However, an A4 page is ~600px wide, which means the xs grid tier will apply. To have the grid styles of md and sm apply in your print design, add something like this:

      $grid-columns: 12 // Or @import bootstrap/variables here @import bootstrap/mixins/grid-framework @media print // No @media width restriction -> applies on xs @include make-grid(sm) @include make-grid(md)
  • To inspect your print styles:

    1. Open the Chrome DevTools
    2. Press ESC to open the Console
    3. Press the Console's ⋮, select Rendering
    4. Select "Emulate media: print"

PNG color profiles

PNG images may contain color profiles, that actually screw their colors.

Rendering defaults

  • Firefox highlights focussed links with a dotted outline. You may want to disable that.




  • Decide what effort you want to put in improving accessibility for physically impaired users. By adhering to common conventions, many requirements are fulfilled automatically. See our card on that topic for details.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Dominik Schöler
Last edit:
5 months ago
by Dominik Schöler
checklist, randfall
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more