• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 263
  • Last Modified:

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

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.
0
mdoland
Asked:
mdoland
2 Solutions
 
OmniUnlimitedCommented:
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.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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>
</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>
</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>
</div>

Open in new window

0
 
COBOLdinosaurCommented:
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.

Cd&
0
 
mdolandAuthor Commented:
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.
0
 
OmniUnlimitedCommented:
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.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now