Layout for devices

New to Sitely, at least doing some more complicated that just plain pages (like https://gremlins.nu) I have searched the forums but not found any clear answer.
As in Layouts for different devices

I have a page designed for smartphone device with a long text column.
I want the page to display two column on desktop device.
Preferably with the text ‘linked’ so I only have to do corrections in one place.

I can not do that?

I tried a messy work around that may work, copying the the column at desktop page and truncate the ‘live’ first column and cut down the second. Going back to the phone view setting the copy to ‘no show’. Messy.

I can live with a solution that disconnects the desktop page completely from all dependencies if that is a (the only) possibility.

Yes, it’s absolutely possible to do what you want, but you do have to do a little extra planning. Clearly, things would get a little messy if Sitely just took your single column text and automatically made it into two columns - you have to be able to indicate where the column breaks would happen. In most websites, text is created in blocks, rather than in columns. Each block would normally be created to occupy no more than about two-thirds of the web page width for easy reading (desktop/laptop). Such an arrangement would be considered the maximum readable width of a single column of text. However, text is very often in much narrower columns (one-third, or half the width of a page). This arrangement allows for the placement of other page content (maybe images) alongside text, or to allow two or three columns of text to be displayed side by side on wider screens.

Typically, these block layouts are designed for desktop screens so you can visually arrange the individual blocks of text so they can be read without having to scroll down one column, and then scroll back up the page to continue reading a second or third column. In other words, each block of text should be self contained and be readable in isolation - preferably within one screen height. By planning your desktop site this way, it’s easy to transition to a mobile layout by placing your blocks of text one below the other on the mobile version, instead of arranging them side by side in columns.

If you plan your site this way, you only have to edit text on one version of the site, and your edits will be reflected on other device layouts. You may have to adjust size and placement of the text blocks, but the text itself will be common across all devices.

I recommend you have a read through the Sitely documentation page at : Devices | Sitely Documentation to see an example of text placement for different devices.

1 Like

Most helpful! I have to try all this out, will take some efforts. Thank you!

1 Like

All done, pro bono for my favorit local bistros ugly present web; https://buonasera.se (unreadable on mobile). To be moved from work place https://fifi.se Pictures/logos are almost all place holders or low res in waiting. Learned a lot…

A much better site! The old one was confusing because it looks like a page with a popup that can’t be dismissed. It will be nice to see the final site.

1 Like