Read more

Building web applications: Beyond the happy path

Dominik Schöler
July 22, 2016Software engineer at makandra GmbH

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

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

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 Show archive.org snapshot 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.

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.

Printing

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

  • Bootstrap Show archive.org snapshot 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.

Carrierwave

Maintenance

Accessibility

  • 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.

Ad blocking

  • Install an adblocker like Adblock Plus and check if elements are blocked. Things to pay special attention to are iframes and embeds. If you encounter an issue, see how to debug blocked elements.
Dominik Schöler
July 22, 2016Software engineer at makandra GmbH
Posted by Dominik Schöler to makandra dev (2016-07-22 12:09)