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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 53

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Help with mod_substitute 18 78
ASP sending two datas 2 30
links not working 2 34
Session on Html 8 55
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

751 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