Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 548
  • Last Modified:

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

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
elm9999
Asked:
elm9999
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
elm9999Author Commented:
Thank you so much padas,

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

:)
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Start with bootstrap.  There are a lot of templates now that use bootstrap as a base.  Good luck on your projects.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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