I try to create a variable width website, but i have a problem with the images. I want to site to have bigger images and fonts on wider monitors, and smaller for normal ones. The solution i thought about was using percent, but the images (For the buttons, background and header) look kind of bad when they are resized. Is there another solution for resizing images and content dependeing on browser width?
Thank you
First thing to do is to check whether you really need those images. I haven'y seen them, so I assume you need them badly.
But you don't actually need any javascript to do that.
Depending on the audience you're targetting and the time you've got to build your website, you can try this to use CSS media queries to determine the width of the user's display. (You can learn more here: http://www.alistapart.com/articles/responsive-web-design/)
You can check the target display resolution with simple CSS conditional statements. If you know what kind of display types are the most popular among your prospective guests, you can prepare 3-4 different sets of various sized images for various users.
This way you can deliver different sizes of images to different user resolutions.
But first make 100% you need the images and you cand achieve the same effect with CSS.
You probably need a mixture of JavaScript and CSS; use JavaScript to determine the dimension of the screen, and use it to calculate the ratio for your re-sizing, and change the CSS property of the objects.
You may also want to use sizes in em instead of pixels when doing the style sheets.
When resizing images, you also have to keep in mind the aspect ratio, so you cannot just apply a percentage value to both the width and height.
Related
I'm using rails and bootstrap and I'm using the bootstrap carousel on my landing page. I found that on the mobile view the carousel starts to look quite bad unless I make the pictures much higher than wide.
I wanted to use an if statement in my erb file to check the viewport size and render the appropriate image. I don't think using media queries in css is appropriate in this case as the image size determines the size of the carousel (not simply a background image).
Sorry if this is a newb question.
Erb is rendered server-side, which really has no notion of the viewport size, you would need to resort to using javascript in conjunction with your code, to make the adjustment.
This seems like a perfect case for media queries in the css. This is a much cleaner solution than muddling around with js.
You can, in the carousel, draw both of the images. Give all the wide images a distinct class (wide-image, for example) and all of the tall images a distinct class (tall-image, for example). Then, in the appropriate section in your css, simply set the undesirable image class to display none, which will effectively leave you with only the appropriate images displaying (and governing the size of the carousel).
I'm kind of sure this is not possible but I ask because it seems unbelievable.
I have some elements styled for reponsive design
img {max-width:100%;height:auto;}
but the images have to be different depending on the device (I won't load heavy wide screen images on a phone device).
Since media queries aren't supported inline, I could go for a css background solution, but background-size is not perfectly supported and honnestly it would look more like a hack.
Can anyone confirm that "widely supported device related responsive images" are not properly possible ?
Thanks
If I understand your question correctly, you are looking for a way to deliver a different image depending on the viewpoint.
Adaptive Images could be the solution you are looking for. Easy enough to setup and confirm.
A second possiblity which might give you even more control is Adapt.js . I've used it with good success on several sites. You load a small javascript file in the head of your document. This tests viewpoint width and then dependending on the results, it will send the appropriate CSS file. It has wider browser support than #media requests.
If you could live with using background images, then it would work well, and since you could specify different images for different viewpoints, you aren't up the creek with browsers that don't understand background image sizes.
Good luck!
You could try the Responsive Img jQuery plugin.
It's made to automatically create and swap in different-sized images at different breakpoints, based on the container's width.
If you already have different versions on your image created and on your server, the plugin will just swap those in at the right breakpoint sizes.
Therefore, you can create new images for all the different breakpoint sizes you want, and the plugin takes care of the rest.
It's not CSS, but it gets the job done.
2014 update
There is a nice and new technique here :
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
It requires a small js, a 1x1px blank image, a few extra markup for img tags, and some .htaccess rules.
Seems to work fine so far.
Im looking for some options regarding scaling some HTML elements for use on a large screen (like a kiosk). I'm currently using CSS3 scale() to get a relatively cross-browser scale (thanks to cssplease), but seeing if anyone else has any better suggestion.
Primarily, I'm looking at rendering widgets (HTML, js, and images) on a large scale (from 400x200px to 800x500 for example). While I could rewrite each widget for a larger scale, I thought I'd check my options.
Is there something that SVG can do, or canvas? CSS3 scale() is okay, but images need to be replaced with high-res versions. Text spacing seems to also be slightly off.
Thanks!
CSS3 Transforms are still the best option for what I want, especially for browser performance.
Not sure if Understood you right, but if you need your website, images, videos etc to look good on any screen (with any resolution) you could try to go for responsive design. You have option of using css media queries to adjust website for different screen resolutions, it will also maintain original image quality etc.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
I found them very help full and once you get into it you would easily build scalable websites ;))
This may be an extensive retrofit but you might be able to define your elements' dimensions using ems then use media queries to increase the base font size for different screen sizes. So if your base font size is 16px, you main column might be 47em, sidebar 12em, for an approximate site width of 1000px. You could then use media queries to detect a larger browser and all you need to do is increase the base font size to 20px and viola your site is now 25% bigger.
I am attempting to create a webpage formatted to fit the width of all screen
sizes (or resolutions).
In other words, I want to format the width of my page in such a way that anyone who views it will not have to use a horizontal scroll bar at the bottom of the screen.
So far, I have found no help on this topic.
Well, there are several approaches. One would be to use ems/percentages for your widths thus achieving a fluid design that adopts to your users screen resolution. The other is to have several css sheets for different widths and call them based upon a screen resolution check from a simple js code.
The first one is a bit harder, but yields good stable results. On the other hand, (as a designer) it kinda restricts your creativity a bit.
It seems to me like the latter is more widely used. Nowadays, 3 different stylesheets will suffice for most devices around the world. One around 900px will cover somewhat older screens, one around 1160px will handle the larger and more modern screens, and one for mobile devices(sorry, no idea on approximate width) should do the trick.
The way you're asking this question, not only will the width of the body have to be 100%, but the width of its the child elements will also have to be in percentages.
The only way to achieve a scalable web page is by avoiding fixed sizes. Of course that presents problems with text since it will attempt to wrap it on the following lines, so you must either specify a minimum width or combine it with a pre tag with overflow: hidden so that it won't affect your page layout at the expense of simply not being able to read the text.
Fortunately, you can easily test your page by simply shrinking your web browser to smaller resolutions and seeing how it pans out.
I am creating a website and would like to get the opinion of some of the more experienced web developers.
How does one create a website where the element style attributes (padding, margin, height, width, etc) are appropriate for the users screen resolution?
With CSS i get to choose one value and that is the final value which will be displayed for all users, regardless of their browsing resolution.
For example, say i would like an image to be displayed 10% to the left of its container i would do the following: padding-left: 15%; Now, that may work fine for some resolutions but for others i may need that value to be higher.
What do more experienced web developers do in regards to screen resolution differences?
It sounds like your goal is to have your layout look literally the same at any resolution, which isn't really practical. Remember that images scale poorly! What most designers do is use percentages where possible to allow the layout to "flow" to fit most resolutions while remaining attractive.
If you analyze (for example) Stack Overflow. you'll see that it is a fixed-width set that is itself centered in the browser. Apple does the same thing, with some art elements that are displayed gracefully at any window width. It's an artistic problem, and I'm not sure the answer can be given with any more clarity than that.
It depends entirely on your design goals.
Most designers use fixed-width areas and let it center on the screen.
In some cases you can use CSS media-queries to apply specific rules to different types and sizes of screens (browser support is limited).
You can use min/max-width to handle many cases of content growing too large or small - but there is no equivalent for margins.
SVG graphics can be used to provide scalable images that look good at any resolution.
Some companies provide an entirely separate site for mobile users.
There are other tips and tricks but in general most designers avoid these issues by using fixed-width layouts - even though that's not always ideal.
I usually define those styles in em units, which are relative to the font size. So, increasing the text size increases padding & margins proportionately.