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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Max-width on individual images in grid 4 52
Form Processing in PHP 11 32
Objects on Same Line 2 18
How can I increase the size of this logo 5 22
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
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 …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

867 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now