Go Premium for a chance to win a PS4. Enter to Win


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

Posted on 2013-11-14
Medium Priority
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 1000 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 54

Accepted Solution

Scott Fell,  EE MVE earned 1000 total points
ID: 39648026
At the core of making a responsive site/page are @mediaqueries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.  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 http://getbootstrap.com/ 

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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

963 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