Creating a HTML 5  page so that it works for different screens

Posted on 2013-11-14
Last Modified: 2013-11-25
What do I need to do to make my website work for different sizes of the sceen?

For instance do I have a background bar in the top that is too short when using a wide screen .

Also many things get strange when I try to center them.

Any hel pwould be intresitng to hear.
Question by:mdoland
LVL 17

Assisted Solution

OmniUnlimited earned 250 total points
ID: 39647567
What you are interested in doing is an area of web design called "Responsive Web Design".  These generally use HTML5 and CSS3 to generate a variety of flexible and fluid layouts that will adapt themselves to all sorts of screens and devices.  Most of what is done relies on the use of percentages in the declaration of HTML element styling and javascript to detect and adapt elements to the page.

There are a number of responsive design frameworks that you can use for quicker setup of these somewhat complex layouts.  Among the more famous are Foundation and Skeleton.  You might want to check these out for a quick familiarization as to how this all works.
LVL 52

Accepted Solution

Scott Fell,  EE MVE earned 250 total points
ID: 39648026
At the core of making a responsive site/page are @mediaqueries  In short, you design your page elements for each possibility at the same time.  

While you can do this from scratch, I like using foundation and bootstrap although I tend to use bootstrap more often 

Bootstrap et el typically contains a grid as a base as well as some predefined css for objects like buttons, forms, images, type.  You will also find some prebuilt functions for js/jquery for dropdowns, modals, alerts and more goodies.

Using the bootstrap example, you will see there are multiple classes to represent the size of the column in different scenarios.  Bootstrap uses a 12 column grid.  Where you see the number 12, that means one wide object.  Where you see a 6, that is 2 equal columns.

In the below example, the first row will have a wide left column (8) and a narrower right column(6) if the viewport is greater then 768px (col-xs-). If the viewport is below, then the row gets stacks where the left side takes up the full width (col-xs-12) and the right side goes to half the screen (col-xs-6).
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>

Open in new window

LVL 53

Expert Comment

ID: 39648140
All good advice so far.  However the nmber one thing seems to have been neglected.  What is your competence level in CSS3 and HTML5.  Those are the fundemetal building blocks for any responsive design.

You are not going to learn to produce distinctive signature layouts using code you do not fully understand that was written by someone other than you who probably has a diferent vision of what a perfect page looks like.

The tools templates and frameworks available are amazing, but you will not produce anything better than mediocre to good quality using them without fully understanding the detailed coding.  For great and brilliant layouts you have to add the polish and you cannot do that without being skill in the fundemetals.

No offense intended, but you are not skilled in the fundamentals if you need to ask this question, and you should invest a little time in learning through some experimentation, so you can put the cherry on top of the layouts you do using third party tools.


Author Comment

ID: 39656474
So, making it easy, if I want it to work in two different wide mode in a browser. What would that look like?

I have a background image that is in two different sizes, lets say back-wide.png and back-narrow.png. When someone narrows the browser sideways, it suddenly is supposed to flip to the back-narrow.png, right?

 Give some example of what that will look like.
LVL 17

Expert Comment

ID: 39656501
As mentioned beforehand, responsive design models are complex by nature, and requires a very capable ability to handle complex html, css and javascript combinations.

What you are asking to do can be handled through a variety of techniques.  Each technique has its advantages and disadvantages.  Some can do what you are proposing using only one image.

I would agree with COBOLdinosaur in stating that you need to sit down and learn the basics before we can walk you though the fine tuning of any particular problem.

As for examples of what is possible, I would say just look on the internet at a few responsive sites (just google "responsive design examples".)  Be sure to check them out on a variety of screens and devices and you will see how they react.

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question