[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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 …
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month20 days, 1 hour left to enroll

873 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