Posted 26 days ago. Visible to the public. Linked content. Auto-destruct in 34 days

Updated: 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?
  • - Generate many records per table. Watch the Rails logs and [query_diet]( to find areas of improvement.
  • - Reduce [N+1 queries](, [preload associations you know you'll be using]( and use database indexes.
  • ## 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
  • - Use [superclamp]( to perfectly fill boxes with text
  • - Use [object fit](/makandra/41156) to dynamically crop images
  • ## 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](/makandra/41114) 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.
  • - Deposit [favicons in every size](/makandra/195625).
  • ## 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:
  • %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:
  • $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.
  • - Remove them using [geordi png-optimize](
  • ## Carrierwave
  • - Go through our [Carrierwave checklist]( if used.
  • ## Maintenance
  • - Integrate and test the [capistrano maintenance task](
  • ## 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.
  • +- 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](/makandra/506727-ad-blockers-how-to-debug-blocked-elements).
  • +

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Daniel Straßner
Last edit:
26 days ago
by Daniel Straßner
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Daniel Straßner to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more