When building a web application, one is tempted to claim it "done" too early. Make sure you check this list.
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
%meta(name='viewport' content='width=950')
in the <head>
.Finally, use Browserstack Show archive.org snapshot to validate the design on various devices
As your application grows, data will accumulate. How does your application perform with lots of data?
Designs usually come from the designer, assuming a perfect world. You need to make sure the design works with any kind of content
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.
.up-active
and
show a spinner during slow requests
Show archive.org snapshot
.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.
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
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:
PNG images may contain color profiles, that actually screw their colors.