Solved

Build a Web page to be seen on PC, Tablet, iPhone & Inteligent phone

Posted on 2013-11-08
3
534 Views
Last Modified: 2013-11-08
Hi Experts,

I need to build a web page that fits well on PC, Tablet, iPhone & Inteligent phone, I have built some Web pages some time ago but never tested on diferent devices other than PC, so I don't know how to do it to fit on those devices.

Any advice is welcome and thank's in advance.
0
Comment
Question by:elm9999
[X]
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
  • 2
3 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 400 total points
ID: 39634964
You want to create a responsive site.  In short, this means the web page will reconfigure based on the viewport (desktop wide vs desktop narrow vs tablet vs phone).  This is done with @mediaqueries and takes a little more thought than you may be used to.    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Basically you use something like below to change the width of a div based on the screen size.  You can change just about any element you can touch with css.  

@media (min-width: 300px) {
 div.some_class{width:150px;}

}
@media (min-width: 700px) {
 div.some_class{width:300px;}

}

Open in new window


I like using http://getbootstrap.com/ and http://foundation.zurb.com/ as a base for my projects.  You don't have to reinvent the wheel each time and there is a built in css grid to make things easy for you along with other goodies you may like.  
http://getbootstrap.com/css/#grid  In bootstrap a responsive set of divs may look like below.  You can see there are multiple classes in each div.  One for small screen (sm) or medium (md) screen etc.  It looks confusing at first, but you quickly get the hang of it.   In the example below, the first div is 5 columns wide on the small screen and 6 columns wide on a medium screen or wider.
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Open in new window

For reference, bootstrap's code
Extra small devices Phones (<768px)
 Small devices Tablets (=768px)
 Medium devices Desktops (=992px)
Large devices Desktops (=1200px)
0
 

Author Closing Comment

by:elm9999
ID: 39634988
Thank you so much padas,

I will review the links and now I have an idea about it!

:)
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39635264
Start with bootstrap.  There are a lot of templates now that use bootstrap as a base.  Good luck on your projects.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to count occurrences of each item in an array.

732 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