Cross-Platform Frontend ​

If your only tool is a hammer, everything looks like a nail. Actually, I enjoy coding on a laptop. The app I want to build should run on a mobile, too. I'm not a designer, but I want to achieve something that looks OK, feels modern and works on a variety of devices.

My first attempt was the landing page on www.ergberg.tk. The next larger development is the static site you are visiting right now. Other projects may follow. Actually the text below is really just about the jotter.

What does it take?

• Should look OK with different sizes
• Should work on mobile and on computers with mouse
• Should provide high reactivity with smooth transitions
• Should not be directly identifiable as web page in a browser

Works with Different Devices ​

OK, that's no longer witchcraft these days. At least, as long as the device has a screen, and it's not exceptionally small or large. My main focus is on modern browsers for desktop, laptop and mobile.

The default VitePress theme has a layout that responds to different screen widths. There are breakpoints where navigation bar entries and the sidebar automatically fold in and out. I added another one for my right-hand bar, which contains the table of contents or search results on the glossary pages.

On larger screens, I use larger font-sizes. Unlike typical layouts, my main text area is not limited in its max-width.

What is no Tackled?
I have no experience with accessability at all. I try to score high when Chrome's Lighthouse takes a look. I also don't have any fancy hardware on hand, not even a laptop with touchscreen, not a mobil with a keyboard, mouse and external monitor, not even a smartwatch. So I have no idea how well the site can be used on those devices.

Keyboard & Mouse? ​

Mouseover can provide some nice effects, but if there is no mouse, mouseover shouldn't be essential to get through the app. So behaviors meant for mouse interaction should also be supported by touch events – or canceled out if there is no way to map it to a mouse-less device.

Similar, telling mobile users that they can use keyboard shortcuts – like Ctrl-K to open the search – is unhelpful. So no key event handlers at all? I left them in. If you do not have a keyboard, just don't use them 😉. I hide the hints for keyboard shortcuts when I assume there is no keyboard:

.keys {
  display: none;
}
@media (hover: hover) {
  .keys {
    display: inline;
  }
}

.keys {
  display: none;
}
@media (hover: hover) {
  .keys {
    display: inline;
  }
}

This is not straightforward, but seems to work as long as having an input that can hover is a good indicator that a keyboard is also present.

High Reactivity & Smooth Transactions ​

Of the many frontend technologies at hand, I started my journey with Vue. This jotter was build with VitePress and styled in parts with Tailwind.

The static side generation ensures fast page load times. With the Topic Map and the WYSIWYG Editor I have heavy components that take a long time to load and initialize. Therefore I defined those components as AsyncComponent and load it only on demand.

For colors and motion effects, I use CSS transitions. Conveniently, Vue provides built-in components that also allow for smooth transitions, namely <Transition> and <TransitionGroup>. The Search Page shows these components in action when the type completion dropdown or search result list changes.

Looks Like a Native App ​

It's not there yet. The plan is to one day in the not too distant future deploy a PWA web app manifest to get some of that "native app" smell for mobile. Far on the horizon are future experiments with Electron and Quasar.