Normally, I would do it by embedding the website/webpage into an <iframe> and set a custom width and height. But for my purposes, the required page is secured against embedding into internal frame, as it should be.
But I would still like to be able to artificially expand my viewport without actually physically making the window larger than my screen - perhaps some way where the viewport just becomes larger and I can navigate using scrollbars. That's how it ought to work if the viewport is forced to be larger than the window - I think.
So, how would I go about doing this client-side? Currently, I use Firefox, so maybe there's some way to expand the viewport using Developer Tools or the Console, and such.
EDIT #1
I may have found a way. You can use the "Responsive Design View" part of the Developer Tools, and adding custom dimensions to get a larger viewport. This makes sense and it seems to work. But maybe there is a drawback or problem with doing this. Is this an okay method of artificially increasing viewport?
EDIT #2
The "Responsive Design View" tool on Firefox is capped at 10000x10000 viewport size. For what I want to do, I need to at least hit 20000x20000! So, I guess this doesn't work.
Related
I am currently trying to build a personal profile page. It's a work in progress, and I know little HTML, but I'm getting there.
I'm having an issue with my webpage with regards to how it scales with changes of the browser window size. On my (quite wide) screen at university, it looks fine. However, reducing the browser window size manually - or simply viewing it in a full size browser window on a smaller screen - appears to mess everything up - it doesn't look very nice. Text goes close to my pictures, and it all looks a bit tatty.
I think this is probably because my design is quite poor.
1. Is it because my design is bad or is there something else I'm doing blatantly wrong?
My current idea for a solution is to resize things so that they would look more reasonable on a smaller screen (i.e. on a normal sized laptop). I'm worried that this might end up making things look a bit odd on a bigger screen, though.
2. Is it possible/within reason for a beginner to have two different designs, one for smaller screens and one for big screens, which could be detected and then utilised depending on what screen size viewer is using? Should my page be designed to simply work with whatever screen size?
3. If I do reorganize the page such that it works better with smaller
screens, is there a way to "lock" this design in place, so that it
doesn't get messed up if someone views my page in a wider window?
Perhaps a way to ensure that only the boundaries of the page increase
in width?
What I'm essentially asking is how I should go about designing my page in order to resolve the evident issue - where the issue is that it looks rubbish when the browser window is any smaller than the max size of my screen at university.
You've created your page using tables. It is not a good practise nowadays exactly due to the problems your are facing. In practise, tables should not be used for layout purposes.
To make your layout fluid it'd be better to develop using div with float and relative positioning.
You can see another discussion related to this topic here
https://webmasters.stackexchange.com/questions/6036/why-arent-we-supposed-to-use-table-in-a-design/6037
You could use css property #media, to handle different styles for different screen width: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Curious whether there is a way to make an element think that the viewport is a certain width?
This would be used to test responsive CSS utilities. For example this CSS component is responsive, but to see the behavior users have to make the browser window smaller.
If there was a way to "Trick" the markup test elements into thinking that the viewport was a certain width the manual dragging of the browser window would not be necessary.
One possibility, although I doubt it's implemented, is for the browser developer tooling to expose an API that allowed us to select and inform the browser that certain elements should consider the browser to be rendered at a certain viewport size ...
A Way
While fiddling around with this test I accidentally discovered that there is a way to trigger the media queries without developer tooling and that is to zoom the viewport with ctrl +. That will trigger the media queries, although not with declarative precision that I'm looking for obviously.
Put it in an <iframe>. This tag creates a new window context, the width of which media queries are compared against. The iframe width can be manipulated to emulate different device widths, per this example:
https://codepen.io/anon/pen/jJNyJd
An <iframe> is used by the Material Design resizer tester to emulate different screens sizes in-browser:
https://material.io/tools/resizer/
As far as I know this is the only way to accomplish this.
I am currently designing an webpage which will be used to display dynamic content on an LED screen in a mall.
I need to make sure that the content I design exactly fits the height and width of the display . The screen size is 42″ and the resolution is 1280 × 720 .
How do I make sure that what I design exactly fits the screen? I
am more worried about making it fit vertically.
How can I design content which automatically adapts and fits
itself to such long vertical screens?
Are there any tools that can help me with the design process?
You shouldn't have many problems, just set your height to 1280px and width to 720px.
A good template would be:
<!doctype html>
<html>
<head>
<style>
#wrapper {
height:1280px;
width:720px;
outline:1px black solid; // useful when designing to see where boundary of screen is.
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Everything goes in here. -->
</div>
</body>
</html>
You'll want to find out what browser they are using, then design in that browser. You may well find that it runs Windows XP Embedded with IE 7.
To make it easy to use IE7, I'd recommend setting up a virtual machine running the browser. You can get this from Microsoft here: http://www.microsoft.com/en-us/download/details.aspx?id=11575&mnui=0, or if you are on OSX or Linux, the frankly amazing https://github.com/xdissent/ievms may be handy.
It would be worth considering carefully what the minimum fontsize is that will be readable. You may also find that if it's a normal screen that has been rotated that the subpixels will be rotated through 90˚, that is, instead of going RGB left to right, they will be arranged vertically. Microsoft's Cleartype will look weird in that case, so if that is turned on then you'll find that smaller text is very blurry. (It works on pixels left and right not up and down, so a rotated screen throws it off considerably).
I'd try to get a copy of the screen, or just run it through your TV and turn your head sideways to approximate it :)
Questions 1,3:
Get yourself the "Web Developer" add-on for firefox. In the toolbar, under "Resize" select "Edit Resize Dimensions" and add "Width: 720, Height:1280".
Now you can click on resize, and see exactly how will your design look on the needed screen resolution.
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
As for your question number 2:
With jQuery, you can add this code:
$(document).ready( function(){
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$("body").addClass("landscape");
} else {
// Portrait
$("body").addClass("portrait");
}
}
It will add the "portrait" or "landscape" class to your pages "body" element. You can now prepend this class to your CSS rules to have conditional design.
You have the benefit of only having to support one device and resolution but you will probably face a few challenges.
Challenges
Ensuring that content fits exactly in the space allocated (blank space would look bad on a display like that, as would overflow (of course).
Dealing with potentially older browsers (as #Rich Bradshaw pointed out) and mediocre CPUs/GPUs.
The difference in pixel density between a typical desktop monitor and a larger display.
Color temperature/interpretation and font rendering differences.
Things which may help
My first step would be to see if you can have a device given to you as a loaner for testing. I have worked with more than one company who was glad to lend/give a device when it was needed for particular requirements. This is especially important if you are responsible for any part of the visual design (for example, making sure that colors don't bleed, fonts are smooth, etc.)
If you can't get an actual device, at least see if it is calibrated to a particular color profile, which you can then set on your local machine (in Windows, it's under "Color Management").
If the content is static, it's pretty easy to put together a fixed dimension layout that will even work on older browsers.
If the content is dynamic in nature, you could try something like jQuery Masonry which will attempt to fit disparate content into a dynamic grid. However, it may result in dimensions which are larger than you desire so you will still need to have an approximate idea of the original content. This assumes that you are running a somewhat modern JavaScript engine IE7+)
Make sure that you fail gracefully. Layout errors are bad enough on websites used from PCs/mobile devices, but errors on a big screen in the middle of a shopping mall really stand out.
I found these guidelines for working with Google TV useful as they deal with design/implementation on larger screens: https://developers.google.com/tv/web/docs/design_for_tv
I'm asking this question purely from a usability standpoint!
Should a website expand/stretch to fill the viewing area when you resize a browser window?
I know for sure there are the obvious cons:
Wide columns of text are hard to read.
Writing html/css using percents can be a pain.
It makes you vulnerable to having your design stretched past it's limits if an image is too wide, or a block of text is added that is too long. (see it's a pain to code the html/css).
The only Pro I can think of is that users who use the font-resizing that is built into their browser won't have to deal with columns that are only a few words long, with a body of white-space on either side.
However, I think that may be a browser problem more than anything else (Firefox 3 allows you to zoom everything instead of just the text, which comes in handy all the time)
edit: I noticed stack overflow is fixed width, but coding horror resizes. It seems Jeff doesn't have a strong preference either way.
Raw HTML does just that. Are you changing your data so that it doesn't render so good in random sized windows?
In the olden days, everyone had VGA screens. Now, that resolution is most uncommon. Who knows what resolutions are going to be common in the future? And why expect a certain minimum width or height?
From a usability viewpoint, demanding a certain resolution from your users is just going to create a degraded experience for anyone not using that resolution. Another thing that comes from this is what is fixed width? I've seen plenty of fixed size windows (popups) that just don't render right because my fonts are different from the designer's.
In terms of web site scaling I like fixed sized web sites that scales nicely using the browsers "zoom" function. I don't want a really wide page with tiny fonts on my 1920 res monitor. I don't know if the web designer has to do anything to make it scale nicely when zoomed, but the zoom in FF3 is awesome, the one in IE7 is useless...
The design should be fluid within sensible bounds.
Use CSS has min-width and max-width properties (which work in every browser, including IE7+) to prevent design from stretching too much.
The important thing is never to have a block of text stretch too wide. If a window is expanded, no block of text should indefinitely stretch to match because reading becomes a difficulty.
Like people have said, it really depends on what information the site is displaying. Two good examples are StackOverflow, and Google Images..
If stackoverflow stretched to fit the screen, longer answers would be annoying to read, because the eye finds it difficult to scan over long lines - this is exactly why newspapers use columns for everything, and why books are the all the same sort of width.
With Google Images, where the content is basically a bunch of 200px wide images, it stretches to fit the browser width and is still perfectly readable.
Basically, bear in mind the eye hates reading long lines of text, and base your design on that. You can design your site so when you increase the font size, all the layout scales nicely with it (The only site I can think of that does this is www.geektechnique.org - press Ctrl+-/= or Ctrl+scrollwheel, and the layout changes width with the font size)
I guess like a lot of things: it depends. I usually do both. Some content stays fixed width to look good or if it can't benefit form more space. other stuff is set to 100% if it seems like it'd be usefull.
This should be decided on how complicated the design of your website is. The more complicated, graphically or component wise (amount of content divs), will determine how well your website will scale. Generally you will find most graphic designers website will not scale because they are graphically intensive. However informational website will scale to make the best use of readable space on the screen and are not complicated for ease of use. Its a matter of preference really.
I think it depends on the content of the site. Sites like SOFlow, Forums, and other sites have an emphasis on reading lots of details, so having more real estate to do so is a big benefit in my mind. The less vertical scroll, the better.
However, for sites a little less demanding on the reading level, even blogs or retail sites where you're simply displaying an individual product, having a fixed width allows you to keep things more concise.
I'm a big fan of fully-fluid designs. As to the usability complaints about lines of text that are too long... if they're too long because of the size of my browser window, then I can just as easily make the window narrower as I can make it wider.
This is a matter of styling preference. Both can be equally usable depending on implementation. Columns can also be used, if the screen gets wide enough. Personally, I find it annoying when there is a single, narrow column of text going down the screen.
Edit for 2012: Yes, your website should respond to the size of the window it is being displayed in.
There are many places to read more about this, including:
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
http://www.abookapart.com/products/responsive-web-design
http://en.wikipedia.org/wiki/Responsive_Web_Design
Note: if you use the zoom functionality in your browser, a fixed layout squashes the text, whereas a fluid layout allows it to take up the whole screen.
Maybe this is just a browser problem, but it's definately an argument in favor of fluid
Paragraph widths larger than your display make a web site completely unusable. You have to jiggle the horizontal scrollbar back and forth for every single line you read. I'm doing a web design subject at university and the textbook calls the designs which adapt to your screen width fluid layout.
I'm designing my big class project using fluid layout, it's a bit more trouble than fixed width. I suspect none of the other students will use it, the markers won't notice and none of the professional sites we're imitating are fluid either.
I'd say fluid all the way. The user can always go back to a smaller size window if he doesn't like the result of enlarging it, but he can't do anything about a fixed layout.
If you really, really hate the idea of your site looking ugly because of something a user with a large screen does, then for the sake of all that is true and beautiful, at least never use pixel-based fixed layouts! CSS has these neat text-relative size units like "em" that allow parts of your page to scale with the font size while others (like images) stay in their "natural" size.
Why not use them and make your page scale well without relying on the less flexible "scale everything" of FF3 that's really just a workaround for sites that use a dumb pixel-based fixed layout?
A lot of people are saying things like "this is a matter of taste" or "I don't like big fonts on my high-pixel display." Number of pixels has nothing to do with it, and it's not a matter of taste. It's a matter of DPI, which is directly related to display resolution and font size. If your layout scales along with the DPI of the fonts (by being specified in ems for instance, and using SVG), then you end up with very beautiful, very crisp websites that work optimally with any display.
http://www.boutell.com/newfaq/creating/anyresolution.html
There's probably a compromise design between fixed and fluid designs. You can design a site fluid-like but set the css property max-width to 1024 (or whatever). This means you get a fluid layout when the window width is less then 1024 and fixed width when it is greater.
Then narrow screen users (like my 800 pixel eee 701) don't have to twiddle the horizontal scrollbar to read every single line and wide screen users (who don't know how to resize their browser window) don't get 500 character wide, 1 character high paragraphs.
Now that most of the major browsers support full page zoom (at present, the only notable exception being Google Chrome), are liquid or elastic layouts no longer needed? Is the relative pain of building liquid/elastic layouts worth the effort? Are there any situations where a liquid layout would still be of benefit? Is full page zoom the real solution it at first appears to be?
Yes, because there are a vast variety of screens out there commonly ranging from 15" to 32".
There is also some variation in what people consider a "comfortable" font size.
All of which adds up to quite a range of sizes that your content will need to fit into.
If anything, liquid layout is becoming even more necessary as we scale up to huge monitors, and down to cellphone devices.
Doing full page zoom in CSS isn't really worth it, especially as most browsers now do this kind of zooming natively (and do it much better - ref [img] tags).
As to using fixed width, there is a secondary feature with this... if you increase the font size, less words will be shown per line, which can help some people with reading.
As in, have you ever read a block of text which is extremely wide, and found that you have read the same line twice? If the line height was increased (same effect though font-size), with less words per line, this becomes less of an issue.
Yes, yes yes! Having to scroll horizontally on a site because some designer assumed the users always maximize their browsers is a huge pet peeve for me and I'm sure I'm not alone. On top of that, as someone with really crappy vision, let me say that full page zooming works best when the layout is liquid. Otherwise you end up with your nav bar off the (visible) screen.
I had a real world problem with this. The design called for a fixed width page within a nice border. Fitted within 800 pixels wide minus a few pixels for the browser window. Subtract 200 pixels for the left menu and the content area was about 600 pixels wide.
The problem was, part of the site content was dynamic, resulting in users editing and browsing data in tables, on their nice 1280x1024 screens, with tables restricted to 600 pixels wide.
You should allow for the width of the browser window in dynamic content, unless that dynamic content is going to be predominantly text.
Stretchy layouts are not so much about zooming as they are about wrapping - allowing a user to fit more information on screen if the screen is higher resolution while still making the content acessible for those with lower resolution screens. Page zooming does not achieve this.
i think liquid layouts are still needed, even though browsers have this full page zoom feature i bet a lot of people dont know about it or know how to use it.
Page zoom is horrible from an accessibility perspective. It's the equivalent of saying "we couldn't be bothered to design our pages properly [designers], so have a larger font and scroll the page horizontally [browser developers]". I cannot believe Firefox jumped off the cliff after Microsoft and made this the default.
Yes - you don't know what resolution the reader is using, or what size screen - or even if accessibility is required/used. As mentioned above, not everybody knows about full page zoom - I know about it, but hardly use it...
Only your own site's visitors can tell you if liquid layouts are still relevant for your site.
Using a framework such as the YUI-CSS and Google Website Optimizer it's pretty easy to see what your visitors prefer and lay aside opinion and instead rely on cold hard results.
Liquid layouts can cause usability problems, though.
Content containers that become too wide become exceptionally difficult to read.
Many blogs have fixed width content containers specifically for this reason.
Alternatively, you can create multi-column content containers so that you get an effect like a newspaper, with its multiple columns of thin containers of text. This can be difficult to do, though.