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

Responsive Design

Posted on 2014-01-06
Last Modified: 2014-01-10

I need to have some portions of a web app I am building responsive to the iPad / iPhone devices.

I believe I only need to address some of the images. My thinking is to make "smaller" versions of the images & then use the navigator.userAgent property to determine which one to use based on device & change the img src property accordingly for the effected images.

See www.rkassoc.org/FWLSCO. I would produce modified versions of the header image & the city skyline, to fit the pixel limitations of the iPad/iPhone devices.

I understand one can also use something like this: @media screen and (max-width: 1060px); I'm guessing several of these for the different widths of iPad, iPhone & iPhone 5, possibly one for portrait & one for landscape? See also this: http://stephen.io/mediaqueries/

Can someone give advice? I have looked on the web but don't seem to find a definitive answer.
Question by:Richard Korts
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 250 total points
ID: 39760910
I think the more important consideration for responsive design is to avoid fixed widths and heights for any and all elements on the page that can be potentially larger than the smallest screen size you wish to support. For example, if your target maximum width of the content area is 1200px, set your main wrapper to width:100%, max-width:1200px and min-width:320px (iPhone in portrait mode). Set all elements inside the wrapper similarly, especially that header image. No fixed widths or heights except for the very smallest elements like buttons or icons. That way, the entire page is free to shrink when the browser width decreases, images included. At some pre-determined width, you can employ media queries to swap out a different header image for the smaller screen sizes if desired. Beyond that, make sure all text areas are free to wrap automatically to fill the available space. If you divide the 1200px max-width into columns of content, be sure those columns stack one on top of the other when the browser width gets down below a pre-determined threshold. This is easily accomplished using float:left divs. A div will not float:left if there's not enough room so it becomes automatic stacking at some point. You can also use <ul> and <li> elements and float:left.
LVL 52

Accepted Solution

Scott Fell,  EE MVE earned 250 total points
ID: 39760953
Making a site responsive from scratch is not needed. I like to use bootstrap as a base http://getbootstrap.com/

I converted some of your code just for demo.  You can see I what happens when the browser narrows.
<!DOCTYPE html>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <div class="row">
    <div class="col-med-12">
  <img src="http://www.rkassoc.org/FWLSCO/images/head.jpg" width="100%" alt="">
  <div class="row">
<ul id="nav" class="drop">
  <li><a href="about.php">About</a></li>
 <li><a href="end_session.php">Log Out</a></li>
    <div class="row">
<img id="main" src="http://www.rkassoc.org/FWLSCO/images/ftworth.jpg"  width="100%"  alt="">

<form name="st" action="login.php" method="post" onSubmit="return chk_vals();">
Log&nbsp;In: <input type="text" name="uid"> 
Password: <input type="password" name="pwd">
<input type="submit" value="Go">

Open in new window

The core is the css grid http://getbootstrap.com/css/#grid
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>

Open in new window


Author Comment

by:Richard Korts
ID: 39760962
To Tom Beck


I just tried the page on my iPhone without ANY changes & it looks perfect; the only thing is the logon area (at the bottom) is tiny.

As you may have guessed, this is an app for specific controlled users, so I guess we can just tell them to expand screen size.

Can I adjust the font sizes of those form elements to be larger if the device is iPhone?

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

LVL 38

Expert Comment

by:Tom Beck
ID: 39761005
I just tried the page on my iPhone without ANY changes & it looks perfect; the only thing is the logon area (at the bottom) is tiny.
You are missing the point of responsive design. I looked at your site on my iPhone and it's a PERFECT miniature version of your full size site. It is thus a site obviously designed for larger screens and Safari Mobile is doing the best it can with it. Safari Mobile will attempt to adjust font sizes to a certain extent to make them readable. It will take <h6> headings for example and make them look the same size as <h1> headings on the phone so that no font is too small to read. However, think what this can potentially do to your design. Headings now have a new, unintentional hierarchy.

When a site is fully responsive, the iPhone user is left with the impression that the site was specifically designed to be viewed on an iPhone. No zooming in and out or scrolling around required. All text and graphics sized and proportioned to layout nicely on the smaller screen. Long horizontal menus collapse gracefully into narrower dropdown menus for example. Images do not overwhelm the tiny screen or take up an unwarranted amount of screen real estate.
LVL 58

Expert Comment

ID: 39761184
You are on a fools errand if you go down the route of trying to make some pages of your site responsive.
Either make your whole site responsive to the various screen resolutions (better in the long run) - as padas has pointed out Bootstrap is a great way to go - or you don't, period. Trying to do this as a when I need it, I'll do it is only chasing your own tail.
You talk about making smaller images - well the main image on your link could be halved in size to about 40kb just by making it web ready (not overly large for a smartphone) - if you have Photoshop it is just a case of 'Save for web and devices'.
Remember images are eye candy - no one really looks at them in detail unless they are for example an image of a product you are buying - so you can greatly reduce the quality on everything else without reducing the clarity
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39761222
If you look at the 2nd code box http:#a39760953 this is an example of how you would code a responsive site using bootstrap.  

Another example
<div class="row">
  <div class="col-xs-12 col-sm-8">Full row for phone, larger left column for devices over 768px </div>
  <div class="col-xs-12 col-sm-4">Full row for phone, smaller right column for devices over 768px </div>

Open in new window

Each page takes a lot ore planning, but the end result is a better experience for your user.  The example that simply shrinks down the page just shows what can happen.  Optimally, if your browser starts at 1200px wide, and you narrow your browser, you will start to see things shrink down until a point where you reach the next size as defined by your media query, then the window rearranges allowing objects to remain a certain size, just in  a different position.

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Short answer to this question: there is no effective WiFi manager in iOS devices as seen in Windows WiFi or Macbook OSx WiFi management, but this article will try and provide some amicable solutions to better suite your needs.
Let Bitmoji into your life. Now is the time to learn a new language of smartphone messaging with this brief introduction.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

792 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