Responsive design in Spire CMS
Responsive web pages
Responsive web pages are web pages designed to change their presentation and orientation according to the type of device viewing the web page. You can have a single web page that displays differently on a smartphone, a tablet, and a desktop computer.
This presentation of page elements optimizes the screen size of the device type displaying the website, while still maintaining the functionality of the website elements, with a single layer of HTML coding and sets of CSS that adjust based on the device's screen size or window size.
The three sizes that change the way the web page displays are the following:
- Smartphone: 320px
- Tablet: 768px
- Desktop: 1024px
If a website is on a window sized at 769 pixels, it displays the full desktop site. However, if a website in on a window sized at 767 pixels, it displays the tablet version.
Responsive web pages and mobile web pages
Mobile web pages and responsive web pages both 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 specific mobile screen size. | Responsive web pages change the web page presentation and orientation for each device. |
Content | Because a mobile web page is a 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. |