Since October 2026 every hPage website is mobile-friendly automatically: all designs come with a mobile layout, and there is nothing to configure. The former setting Mobile Design no longer exists.
How the mobile layout works
- On phones and tablets your website is shown in one column: header, menu and content below each other. The menu folds behind the menu head of your design and opens with a tap.
- The content, colours and fonts are the same as on the desktop. You edit your pages once; there is no separate mobile content to maintain.
- Pictures, videos and tables are scaled down to the width of the screen. Wide tables with a fixed width scroll sideways.
- The mobile layout applies to touch screens that are narrower than your design and to every screen narrower than 1024 pixels. A laptop with a mouse and a narrower browser window keeps the desktop design.
Check your website on a phone
- Click Visit Website in the sidebar to see the address of your website, and open this address in the browser of your phone.
- Without a phone: open your website on the desktop and make the browser window narrower than 1024 pixels. The layout switches to the mobile layout.
- If your phone still shows an old version, reload the page. Mobile browsers keep pages in their cache for a while.
Tips for images
- You do not need to resize images for mobile devices: they are scaled down automatically and keep their proportions.
- Keep file sizes small so pages load fast on a mobile connection. The image compression when uploading files helps with that.
- Avoid putting important text inside images: on a small screen it becomes hard to read. Write the text as text instead.
- Images that float left or right of the text are shown narrower on mobile so that text still fits beside them.
Tips for texts and tables
- Write short paragraphs and use headings; long blocks of text are hard to read on a phone.
- Avoid fixed widths in your own HTML (for example
width="800"); use percentages or no width at all. - Prefer tables with a width of 100 % or without a width. A table with a fixed width scrolls sideways on mobile.
- Very long words and web addresses are broken at the edge of the screen; a space or a hyphen gives the browser a better place to break.