Solved

Adapting fixed-width website CSS to fit on an iPad screen

Posted on 2014-01-31
7
1,176 Views
Last Modified: 2014-02-03
I need to take this website:
http://www.bbdesign.com/jwallacellc.com

…and make it fit nicely on iPad and other tablet devices. The site is built to a fixed width of 1048 pixels, and as such doesn't look right on those devices.

Many of the elements throughout are aligned with down-to-the-pixel precision, which makes this task a bit challenging. I tried messing around with width/height percentages on specific elements in my media queries… that gets me closer to the goal, but some things were still way off and I don't know that I can make everything align perfectly using that method.

I'm not asking for specific code here necessarily, but a strategy. Should I setup media queries that rework my CSS to some other fixed size? If so, is there a way that it can fill the page (especially the width) nicely no matter what the device's exact resolution? Or must I use percentages rather than a "less than 1048" fixed width approach, since I don't know exactly what the user's device resolution is? How does my "viewport" setting play into this (if at all)?

One example of something I tried: my header and footer I gave a 92% width, centered. That gave me a nice margin on either side, and by resizing the fonts, the header and footer looked good. But the three columns of content blocks on the home page… I could not get those to size exactly right using percentages. If you click one of those content blocks, you get another set of "pop-up" content that also needs to fit. Those two areas are where I got stuck.

Anyway, I just need to get from where I am now to a nice looking website on a tablet. The client is happy with the design, it just needs to fit. I think someone's better experience with this stuff is going to help me get to the goal a lot faster, and I'm hoping I can do this in a relatively painless way.

I would appreciate any advice. Thank you!
0
Comment
Question by:bbdesign
  • 3
  • 2
  • 2
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39825495
Having a quick look around I think you could easily use Bootstrap and make the site responsive without too much work
It would require removing any absolute sizing you have so bootstrap can resize the elements to the screen properly.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39827756
The HTML validator reports a couple of tagging errors that you should clean up.  Then instead of using percentages use viewport relative units in your CSS for all positioning and dimensioning; including margins padding and even font sizes.  

The viewport units vw and vh will adjust to the actual screen resolution unlike percentages which adjust to page size which may distort positioning.  The vw unit is equal to 1/100 of the viewport width and vh is equal to 1/100 of viewport height.

However when you have a site that is "...aligned with down-to-the-pixel precision..." you are guaranteed to have problems across devices because the act/ual size of pixels can vary by a substantial amount.  The standard of 96 pixels per inch is hacked in many mobile devices by using a "virtual inch" that is smaller than real inch.  That is done instead of using an alternate pixels per inch value to avoid scaling issues on the smaller screens. of pads and phones.  

If you use vh and vw, you get a rendering that basically miniaturizes the screen (this can make text difficult to read without zooming).  H/owever you might still want to use the media queries to bring in alternate versions of the graphics, because loading full size images and then scaling them to smaller version is inefficient.

The browser support matrix for viewport units is: http://caniuse.com/viewport-units

Cd&
0
 

Author Comment

by:bbdesign
ID: 39828495
Since I originally wrote this question, I have been working on this using a combination of:

<meta name="viewport" content="width=device-width">

Plus: device width of 768 pixels

That seems to work, at least on iPad. I haven't tested other devices. This also allows me to simply redo my pixel math in my CSS media queries, and retain the pixel-level precision.

Is there a downside to doing it this way? Yes, I will need to create a new set for iPhone, but this seems to work OK for iPad.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 58

Expert Comment

by:Gary
ID: 39828535
And what about all the other phones and tablets.
Heres a few to add to your list of screen size specific CSS
http://code-tricks.com/css-media-queries-for-common-devices/

And that list is old, there are many more...
0
 

Author Comment

by:bbdesign
ID: 39829443
The outlook for this whole thing seems dire. I do subcontract work for an agency that designs down-the-the-pixel layouts. There are a multitude of devices with varying resolutions. Viewport Units have OK support on browsers, but not great (yet).

Seems the options are not great no matter what. But, I appreciate your input!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39830113
>>>I do subcontract work for an agency that designs down-the-the-pixel layouts.

You either need to convince them that doing magazine page layout for modern media is an obsolete approach and if they want a high quality presentation for all of their clients they need to move to 21st century aproaches.

Either that or substantially raise the amount you are charging them because it is going to be very maintenance intensive.  Every time a new device, new version of a device, a new O/S, a new version of of an O/S, or new video chip comes on the market the layouts will have to be updated.

I will assume the agency has been around a while and is used to doing print media.  Mobile internet is a complete different world beca/use there is no fixed size for the pages, and even the size of pixels changes across different devices. Plus there is very little agreement on standards for mobile devices, and the manufacturers will fight it out for at least 10 years before standards emerge.

Cd&
0
 

Author Comment

by:bbdesign
ID: 39830148
Thanks again!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

743 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

12 Experts available now in Live!

Get 1:1 Help Now