[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2013-11-08
3
Medium Priority
?
541 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1600 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 54

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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
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:
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

656 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