Posted about 3 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).

Favicon

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

Sharing

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:

    Copy
    %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

Printing

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:

      Copy
      $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.
Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
almost 3 years ago
by Dominik Schöler
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 cookies to improve usability and analyze traffic.
Accept or learn more