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>.
- 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
-
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?
- Generate many records per table. Watch the Rails logs and query_diet Show archive.org snapshot to find areas of improvement.
- Reduce N+1 queries Show archive.org snapshot , 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 Show archive.org snapshot to perfectly fill boxes with text
- Use object fit 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
Show archive.org snapshot
, style
.up-activeand show a spinner during slow requests Show archive.org snapshot . - 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.
- Deposit favicons in every size.
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.
-
Facebook's Open Graph Show archive.org snapshot . 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 Show archive.org snapshot comes with a good default print stylesheet
-
However, an A4 page is ~600px wide, which means the
xsgrid tier will apply. To have the grid styles ofmdandsmapply 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:
- Open the Chrome DevTools
- Press ESC to open the Console
- Press the Console's ⋮, select Rendering
- Select "Emulate media: print"
PNG color profiles
PNG images may contain color profiles, that actually screw their colors.
- Remove them using geordi png-optimize Show archive.org snapshot
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.
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.
