Responsive HTML pages made easy

  • 6
  • Article
  • Updated 3 years ago
  • (Edited)
rise_responsivepng

What does “Responsive” mean?

Ensuring that your web page or presentation is responsive means that your content will be functional and visually compatible across most devices.

For example, if you are viewing a web page on a display with a 1280 x 800 resolution, and you try to load the same web page on a much smaller device such as a tablet, you may run into issues if you haven’t implemented responsive principles. You may notice inconsistencies such as misaligned text, placeholders, divs, and images when browsing sites that are unresponsive. Responsivity ensures that whether you scale up or down, your web page or digital signage will look great.

Is Rise Vision responsive?

Yes! When creating a new presentation from your editor, you are given the option to select the screen resolution you are working with. Our default settings are compatible with most large displays. (1920x1080). However, some users may find these options a bit limiting when implementing content, especially with much smaller devices.

Screen Shot 2015-09-25 at 21726 PMpng

 

To allow flexibility, users can edit the existing code generated by their presentation or code a responsive custom template from scratch. You can edit and view the existing code in our HTML editor. (hit “HTML” beside the “Design” tab) For custom templates, you can link your external responsive web page to your presentation via our scheduler.

Go ahead and click “Schedules” on your dashboard. Hit “Add”. Name your schedule and then click “Add” once more under “Presentation/URL”. When the Content box pops up, instead of checking “Presentation” check the “URL” box. A field will appear where you can input the URL of the responsive page you would like to load. Remember to save!

 

Screen Shot 2015-09-25 at 23000 PMpng

How do I code a responsive HTML page?

You don’t have to be a seasoned developer to understand responsive design. Here I will walk you through various responsive principles to ensure that your content will look great no matter the device it is being displayed on.

Viewport Meta Tags

When setting up your page, inputting a Viewport Meta Tag within your tag should be the first step toward ensuring responsivity. The viewport is the area within the webpage the user sees. This tag will instruct the browser how big or small the viewport should be. This is especially useful when dealing with mobile devices, since when you load a page by default the device will zoom out on your page. You can play around with “width” and the scale properties to suit your needs. I recommend reading this article to learn more about options and units for Viewport Meta tags.
 

My Responsive Page

Box-Sizing

This property will define the width and height of your content relative to other elements on your page. This is especially useful when you are working with padding and margins. This should be placed at the very top of your stylesheet.

Example:

 
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Remember to include the * asterisk before your curly brackets {} so that it applies to all elements. This code snippet should come at the top of the CSS file, or just after any CSS reset.

You can also use “content-box” and “inherit” depending on how your page is set up. To learn more about what these properties do you can click here.

rvresponsivepng

Max-Width

Max-width will ensure that your content will not expand beyond the display or browser you are working with. It is especially useful when working with images. When scaling down, the image will scale down with the width. This can be applied to height as well.

Example:
img {
max-width: 100%;
height: auto;
}

Height:auto ensures it will maintain the proper aspect ratios as it expands and contracts with different browsers and displays. Learn more here.

Viewport Sized Typography

Units include vw, vh, vmin, and vmax. These values are relative to the viewport. Viewport sizing can be applied to your divs as well. You can learn more in this article.

1vw (viewport width) = 1% of viewport width

1vh (viewport height) = 1% of viewport height

1vmin (viewport minimum) = 1vw or 1vh

1vmax (viewport minimum) = 1vw or 1vh

Example:
.h1 {
font-size: 7vw;
}

You can view a live demo of viewport typography here.

Normalize.css

Just like the name suggests, Normalize.css is a downloadable file that allows you to “clean up” your code so to speak. It will keep your elements up-to-date, remove bugs, and introduce properties to your stylesheet with cross-browser functionality in mind. You can learn more here and here.

Note: this may be a less beginner-friendly option but still worth your while.

Media Queries

Media Queries allow you to specify the device you are working with inside your stylesheet. The browser will then run a test and detect what media type your user is using. The page will load according to your pre-defined parameters.

For example, let’s create a media query that targets iPads specifically:

 
@media only screen
and (min-device-width: 768px)
and (max-device-width 1024px) {
/Styling goes here.
};

Read more about Media Queries here.

flexpng

Flexbox

The Flexbox property creates a layout where all elements shrink and expand harmoniously. It will intuitively distribute elements on your page according to the scale. Extra blank space is distributed in a fluid manner and elements remain relative to each other.

For example, when your page loads on a mobile device, your elements may choose to appear vertically rather than horizontally for better readability. You have full control over the axis. Learn more here.

CSS Frameworks and Responsive Grids

If you are new to CSS, I highly recommend learning the above methodology and coding your project from scratch first. This way you will be better equipped to navigate CSS frameworks and have more autonomy over customization for the future.



Put bluntly, CSS Frameworks do all the work for you to ensure your page is responsive. These frameworks contain pre-written code that can be applied to your project upon installation where compatibility is guaranteed. When reading over documentation, you may come across Responsive Grids. Think of these grids as structured templates for you to fill your content with. You can learn more here.

Here is a list of CSS Frameworks for you to explore. The most popular being Bootstrap and Foundation. These Frameworks are also great for offering content such as forms, buttons, modals, and more. Have fun with it!

http://getbootstrap.com/

http://foundation.zurb.com/

http://getskeleton.com/

http://materializecss.com/

https://daneden.github.io/Toast/

http://rwdgrid.com/

http://bourbon.io/
That just about wraps up this article. If you have any questions, comments, or suggestions feel free to leave a comment below.
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb

Posted 3 years ago

  • 6
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb
Excellent. Thanks for sharing
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Anyone else have examples to share for responsive signage feel free to comment below!