PDA

View Full Version : remote element too big for device display


RainForest
11-09-2012, 11:11 PM
Hello,

I'm just learning how to design for devices. My front page is a standalone page on the site in that it is the only page having remote elements and three columns. I have two questions related to this?

1) Is there a way to resize remote elements and still have them display correctly (i.e., no scrollbars)? If not, how do I eliminate the elements from the device css while leaving them intact on the desktop css?

2) How do I move the content of the right sidebar to the left sidebar just for display on devices?

edbr
11-10-2012, 12:47 AM
make a stye sheet specificaly for hand held maybe

gentleone
11-10-2012, 12:51 AM
Is there a way to resize remote elements and still have them display correctly (i.e., no scrollbars)? If not, how do I eliminate the elements from the device css while leaving them intact on the desktop css?
Do you mean with remote elements third party content? Content where you don't have control over their CSS?
To have a layout that respond to the available screen width you must look into CSS3 media queries.
How do I move the content of the right sidebar to the left sidebar just for display on devices?
You can accomplish this with JavaScript, but is not recommended. A common thing is if you have a sidebar div floated next to you content div, you override with CSS3 media queries for smalle screens the 'float: right' to float: none'. This will drop the sidebar below the content on smaller sceens. But it's recommended to start with the small screen in your CSS (mobile first) which means that you give your sidebar that 'float: right' if the screen is wide enough to display it properly... for example on 1024px (iPad landscape and others)

RainForest
11-13-2012, 04:06 PM
Do you mean with remote elements third party content? Content where you don't have control over their CSS?
To have a layout that respond to the available screen width you must look into CSS3 media queries.

Yes, yes, and I am including media query code in a separate style sheet for a smartphone, one for a tablet, and the original css for desktops. To use an example of one problem, the remote content window is 500 px wide. How do I design that for display on a smartphone that's only 320 px wide?

You can accomplish this with JavaScript, but is not recommended. A common thing is if you have a sidebar div floated next to you content div, you override with CSS3 media queries for smalle screens the 'float: right' to float: none'. This will drop the sidebar below the content on smaller sceens.

Perfect! I think that's the answer for the sidebar question!

But it's recommended to start with the small screen in your CSS (mobile first) which means that you give your sidebar that 'float: right' if the screen is wide enough to display it properly... for example on 1024px (iPad landscape and others)

Got it! I'm designing for portrait view. This is the media query code I'm using on the front page. (It's a standalone page - that's why the css includes "index" in the name. I'll be writing separate css sheets for the remainder of the site once I get the front page working properly for devices).:

<!-- phone -->
<link href="indexPhone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />
<!-- end phone -->

<!-- tablet -->
<link href="indexTablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />
<!-- end tablet -->

<!-- desktop -->
<link href="main.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" />
<!-- end desktop -->

RainForest
11-13-2012, 06:26 PM
On second thought, designing a 3-column layout for a phone with an orientation of portrait isn't going to work, so I'll proceed with landscape instead. That should make the project a lot easier.

domedia
11-14-2012, 01:08 PM
You really should not have more than one column in a mobile site.

gentleone
11-14-2012, 02:44 PM
You can have 3 columns if the screen real estate can handle it.
Consider this simple layout:

<div id="menu">
<--! content #menu -->
</div>

<div id="content">
<--! content #content -->
</div>

<div id="sidebar">
<--! content #sidebar -->
</div>


If you start with mobile first in your css you actually don't do anything cause the normal flow of the document will stack these 3 divs on top of each other, so visually it is just one long column.

If you have enough screen real estate to align these divs next to each other, you make a media query and float the div's left (or right or left/right... whatever is needed).

@media screen and (min-width: 960px) {

div { float: left }

}


EDIT:
Forgot to answer a question.

I believe with the remote content you mean that webcam thingy that get's loaded in an iframe. You can't control that other then hide the iframe for small screens.

RainForest
11-14-2012, 04:01 PM
If you start with mobile first in your css you actually don't do anything cause the normal flow of the document will stack these 3 divs on top of each other, so visually it is just one long column.
Iím starting with desktop code because the page is already written, so Iím modifying the existing code which I've copied into new css pages. Iíve been alternating between working on the phone & tablet css pages - I'm not getting too far with either. Yesterday I tried to stack the #sidebarRight under the #sidebarLeft, ensuring the css widths & margins matched and removing the float for #sidebarRight (also tried floating it left), but #sidebarRight insisted on lining up next to #sidebarLeft instead of under it.


I believe with the remote content you mean that webcam thingy that get's loaded in an iframe. You can't control that other then hide the iframe for small screens.
Yes, thatís one item Ė there are a few others. How do I hide an element using css?

gentleone
11-14-2012, 05:03 PM
I’m starting with desktop code because the page is already written, so I’m modifying the existing code which I've copied into new css pages.
This can be a nightmare to do unless the codebase and source order was in the first place set-up properly.
I’ve been alternating between working on the phone & tablet css pages - I'm not getting too far with either. Yesterday I tried to stack the #sidebarRight under the #sidebarLeft, ensuring the css widths & margins matched and removing the float for #sidebarRight (also tried floating it left), but #sidebarRight insisted on lining up next to #sidebarLeft instead of under it.
make sure you change also width's or set them to their default value if needed, like 'width: auto' is the default value of the width property.
How do I hide an element using css?
You can do this several ways and it depends on the content or element you want to hide.
For this webcam iframe you can simply do:

iframe#cam { display: none } /*change #cam to the ID you have*/

But for content that needs to be still accessible for screen readers you should do this:

.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden}

If you would use simply the CSS property 'visibility: hidden' which is also good for hiding stuff and keep it accessible at the same time, the downside is that it also keeps it's layout. So it's visually hidden, but you will still see the space where the hidden element is. Thus you will get gaps in your layout.

RainForest
11-14-2012, 05:22 PM
This can be a nightmare to do unless the codebase and source order was in the first place set-up properly.
I don't quite follow you. What does this mean?

I've been tweaking the original code just a little to try to clean it up better than when I wrote the page. The learning process is slow for me, as this isn't one of my main duties, so I don't have a lot of time to devote to it. It may or may not have been a good idea, but I moved the code that's specific to index.html to its own css sheet. It's a little less confusing for me to have it all by itself rather than as part of the html page. I haven't been saving any of the device css at this point - I just keep starting over.


iframe#cam { display: none } /*change #cam to the ID you have*/
This is very helpful! I don't think any of the content that's too large needs to be accessible, so this one code should take care of all elements.

gentleone
11-14-2012, 05:51 PM
I don't quite follow you. What does this mean?
All I'm saying is that it is very difficult to get an existing website show properly on a small device unless the HTML is clean and semantic, and the order of the layout elements in the HTML are easy to switch around and to change visually their position with the float property.
Developing for the smaller devices, should have start from the beginning with planning/wireframing for this and then work your way up to the tablets and then desktops.

Another thing I forgot to tell you is to add the meta viewport tag to the head of each page.

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1">

RainForest
11-14-2012, 06:11 PM
All I'm saying is that it is very difficult to get an existing website show properly on a small device unless the HTML is clean and semantic, and the order of the layout elements in the HTML are easy to switch around and to change visually their position with the float property.
OK. I understand.

Developing for the smaller devices, should have start from the beginning with planning/wireframing for this and then work your way up to the tablets and then desktops.
So, for best results I should start from scratch and re-design the site from phone size up instead of using the live page and working my way down to smaller sizes. OK.

Another thing I forgot to tell you is to add the meta viewport tag to the head of each page.

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1">

Yes, I'll be sure to do that. Can you answer one more question for me please. How does your code work differently than this code?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />

gentleone
11-14-2012, 06:34 PM
So, for best results I should start from scratch and re-design the site from phone size up instead of using the live page and working my way down to smaller sizes. OK.
That's the best and easiest route,. It's doable the other way around, but it's harder and takes more time.
target-densitydpi=device-dpi
This is not an official viewport value (yet???), and is as far as I know only supported in Opera Mobile and Opera Mini, but without it your font-sizes gets controlled by the device DPI settings in Opera Mobile and Opera Mini.
initial-scale=1
This is to disable zooming. Some say you should not do this cause it's an usability no-go. Others say if I optimize my site or app for small screens, people don't need to zoom in to read the text properly. Cause they optimize the font-size for smaller screens too, so that it is easy to read. Zoom will break your responsive percentage based layout too and that's the main reason to include this in the meta viewport tag :)

RainForest
11-14-2012, 06:42 PM
OK. Thanks for the explanation. Just one more question! There are so many phone & tablet sizes out there to choose from. If a person is just designing for one phone size, one tablet size, and one desktop size what minimum widths would you personally recommend, and would you design for portrait or landscape?

gentleone
11-14-2012, 07:41 PM
There are so many phone & tablet sizes out there to choose from. If a person is just designing for one phone size, one tablet size, and one desktop size what minimum widths would you personally recommend, and would you design for portrait or landscape?
You don't design for a device and its size, because like you said there are so many devices with different screen resolutions. Not to mention the different device DPI settings and HD retina displays. It's crazy out there :)

The best way to deal with them all is responsive web design:

flexible layouts; thus everything in percentages and em's
fluid media (images & video)
CSS3 media queries (also for HD retina displays)

What I do is if I see something gets wonky in my layout or content while resizing my browser window, I create a media query to make the necessary adjustments in my CSS.
There are browser add ons/bookmarklets where you can see how wide your browser is when resizing it, so that you know the exact pixels for your media query.

RainForest
11-14-2012, 07:57 PM
Thanks so much for all your help, gentleone!

gentleone
11-14-2012, 08:42 PM
Thanks so much for all your help, gentleone!
No props... your welcome!