Lighthouse CMS has a few nice features related to responsive design. Right now, I have SiteEditor opened to the homepage of our sample website. From here, you can easily preview the page by selecting the Preview this Page icon. Then, as in any site, you can resize the browser window to see how the site looks in a variety of sizes.
Lighthouse CMS offers a more elegant solution, allowing you to preview your site in a number of different sizes to get a real sense of how your site will look across devices. Let’s take a look.
In SiteEditor, click the “Resize Viewport” button on the WYSIWYG toolbar to change the size of the site panel. The dropdown contains a list of popular device sizes. This list is easily managed with another admin tool so you can add more device sizes if you like.
Let’s see to see how the site will look on an iPhone 4. Since this site has responsive features, you’ll notice how the navigation has changed from a top nav to a drop-down. Click “rotate” to see how the page will display when the phone is held in landscape mode.
I can continue to browse the site in iPhone mode. Notice that the two column layout has collapsed into one. At any point, I can select another device from the list or go back to the default screen size.
If you have any questions about Responsive Design, please contact us at info@modernsignal.com.