Responsive design in Classic CMS

3 min

Important

Classic CMS reached end-of-life in January 2025 and is no longer receiving feature updates or bug fixes. You should [migrate to Spire CMS](../../End user docs/spire-cms/get-started-with-spire-cms/migrate-from-classic-cms-to-spire-cms.mdx).

Responsive web pages

Responsive Web pages are web pages designed to change their presentation and orientation depending on the type of device viewing the web page. This means you can have a single web page that displays differently on a smartphone, a tablet, and a desktop computer.

This presentation of page elements is designed to optimize the screen size of the device type displaying the website, while still maintaining the functionality of the website elements. This is accomplished by having a single underlying layer of HTML coding with sets of CSS that adjust based on the device's screen size or window size.

There are three specific breakpoints where the presentation changes:

Smartphone: 320px

Tablet: 768px

Desktop: 1024px

This means that a website displayed on a window sized at 769 pixels will display in the layout of the full desktop site, where website displayed on a window sized at 767 pixels will show as the tablet optimized version.

Responsive web pages vs. mobile web pages

Mobile web pages and responsive web pages both aim to optimize the website user experience based on the type of device on which the website is viewed. The table below discusses the considerations for both mobile and responsive web pages:

Consideration	Mobile Webpage	Responsive Webpage
URL	Mobile Web pages often use a separate site (usually a subdomain) that depends on HTML redirection to ensure users are routed to the correct website	Responsive Web pages all use the same URL, as it is all coded into the page
Rendering	Mobile Web pages are statically set to a certain, optimized mobile screen size	Responsive Web pages change the web page presentation and orientation on the fly
Content	As a Mobile Web page is a completely different website, you can tailor content specifically to mobile users	Content can be targeted to specific devices - Desktop, Tablet or Phone. This ensures content can be customized to fit the device size and format.