Solved

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

Posted on 2013-11-08
3
527 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
  • 2
3 Comments
 
LVL 52

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 52

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

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

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

910 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

25 Experts available now in Live!

Get 1:1 Help Now