Create an adaptable website layout with CSS3 media queries | Published on May 9th, 2011 by Jean-Baptiste Jung. 21 Comments - With the rise of both very large screens and mobile devices, web developers have to be able to create websites that display correctly and look good whatever the device is. Sure, you can use good old techniques like fluid layouts, but I’ve got something better to show you today. This tutorial will teach you how you can create an adaptable website layout using CSS3. ... Once done, we have to add a stylesheet to our index.html page. The following code is the basic styling for the page. Paste it into a file named style.css. ... Using CSS3 media queries to make our layout fit in all screen resolutions ... @media screen tells the browser this applies only for screens, because we don’t want to resize anything for print. And and (min-width:1200px) specifies that the screen must have a 1200px minimum width. If these requirements are met, then the code within the parenthesis is taken into consideration by the browser, and redefines previous styles. Now that we created a bigger version for bigger screens, what about a very small version for mobiles? ... As we resize the website layout, we have to resize images as well. The max-width CSS property is here to help. Insert the following on your style.css file: img { max-width:570px; margin:10px 0; } A default image size is now defined. Now we can setup sizes for big screens as well as mobile devices:   http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

Resize a BG Image based on Screen Resolution | I am looking at an easier way to have the background-image for a site be resized so that it looks the same across all screen resolutions (or at least close enough). The way I am doing it now is by using Javascript to get the width of the screen and then loading an appropriate sized image. Looks like this: ... For coding purposes, you make all the images mountainbg_width_height.jpg so in your javascript: Or maybe set an array with a few common sizes so you can show most of the common sized image on more uncommon size screens. At work we use widescreen monitors now 16:9. That gives you a whole other realm of sizes.   http://www.dreamincode.net/forums/topic/166511-resize-a-bg-image-based-on-screen-resolution/

What Screen Resolution Do You Design For? Using the Less Framework | I belong to a design group on LinkedIN and a while back someone posted a question asking what size do you design your web sites? That discussion grew to hundreds of responses, each one of them saying something different. There was some consensus among the majority of designers who stated that they design their pages for 900 pixels wide. Others stated that their best practice is to use a fluid design while others still swear by the 960 grid system. Of course, there were those that simply stated to go with your client's preference and their audience. Another approach, if you have an existing site with plenty of collected metrics, is to check your analytics software for your visitors screen resolutions. For one of my sites, the smallest, most-used screen resolution is 1024x768. That makes it an easy decision to comfortably design my site at least 900 px wide. But then I noticed another screen size nestled in at number 9 out of 10, and that was 320x480, which is undoubtedly smart phones. The Less Framework The Less Framework is really an amazing tool and the site is a perfect example of its resizing abilities. If you change the size of your browser window, you'll see the images resize to fit the screen, you'll even see the columns change to better accommodate the size of your window. So, what is it? Less Framework 3 is a, "a cross-device CSS grid system based on using inline media queries." Simply put, the framework recognizes the visitors screen resolution and sizes your web page accordingly. This CSS3 styling option works on the majority of most browsers including all Android and iOS devices, except for, you guessed it: Microsoft's Internet Explorer (at least until IE9 is released). For visitors using IE, the 768 px layout is displayed. The framework is based on four different layouts to accommodate the majority of screen resolutions: 3-column--For all iPhones, iPod Touches, and other 320 px mobile devices 5-column--For 480 px mobiles, narrow browsers, and landscape iPhones 8-column--For tablets at 768 px, netbooks, and old browsers 13-column--For laptops, desktops, and HDTVs at 1280 px and beyond   http://www.htmlgoodies.com/beyond/css/article.php/3921766/What-Screen-Resolution-Do-You-Design-For-Using-the-Less-Framework.htm

Implementing Responsive Design with Media, Responsive image options | There are limitations to every approach to responsive images currently available. To illustrate this, let’s look at a couple different techniques for setting responsive images, and evaluate whether they’re right for the Yet Another Sports Site page. Sencha.io Src Sencha.io Src is as close as you’re going to get to a plug-and-play solution for responsive images. The service, originally created by James Pearce, takes an image that you pass and returns it resized. To use it, you simply preface your image source with the Sencha.io Src address like so: http://src.sencha.io/http://mysite.com/images/football.jpg Sencha.io Src uses the user agent string of the device making the request to figure out what size the device is and then resizes your image accordingly. By default, it resizes the image to 100% of the screen width (though it will never size up). Adaptive Images Another solution bordering on plug-and-play is Adaptive Images, created by Matt Wilcox. It determines the screen size and then creates, and caches, a resized version of your image. NOTE The code for Adaptive Images can be found at http://adaptive-images.com It’s an excellent solution for an existing site where you may not have time to restructure your markup or code. What’s ahead for responsive images? Just to be clear: relying on a combination of server-side detection and JavaScript cookies is entirely a stopgap method. If there were something more permanent out there, I’d advocate it. Unfortunately every responsive image method available today is essentially a hack, a temporary solution to cover up the problem.   http://www.peachpit.com/articles/article.aspx?p=1929616&seqNum=4

Hello friends, I have a background image in body. What i want to achive is that 1)- calculate the visitor screen resolution. 2)- based on that resolution i want to resize my background image. suppose if vistior screen resolutiion is 800*600 it will resize background image to 800*600 and so on. ... A chap has done quite a bit of work on this, i'd read it. http://css-tricks.com/how-to-resizeable-background-image/ ... Check the article Image-resize based on screen resolution at http://netprogramminghelp.com ... Some other might do it "automatically" by adopting other code from other well-known developer. I develop my own simple code in javascript that I attached in my page to solve your issue that used to be mine.   http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/258057/image-resize-based-on-screen-resolution#

Dynamically Resized Backgrounds With CSS3 | Large, illustrative background images appear to be the trend in web design this year. Links in recent articles here have provided some examples: thesixtyone and youarelistening.to (from “Music to Code By”), along with sites like Flipboard and Ben The Bodyguard. If you decide to go down this particular design route, there are a few points to keep in mind:   http://demosthenes.info/blog/299/Dynamically-Resized-Backgrounds-With-CSS3

How to resize image according to screen resolution of user? | Is there a way to resize the image on a html according to the resolution of the users screen? for example: to get the image larger when the resolution is 1024x768 and smaller when it's 800x600? I use the following script to change the css of a page according to the resolution, but I don't know how this can be done for an image This is the css I use: < link rel="stylesheet" type="text/css" media="screen" href="size1024.css"> < script type="text/javascript"> < !-- if (screen.width < 1024) link = document.getElementsByTagName("link")[0]; link.href = "size800.css"; --> < /script> ... This can be done of course but, it will lead to distortion of the image as the image is not a vectored one but pixel-based.   http://www.webxpertz.net/forums/showthread.php/34269-How-to-resize-image-according-to-screen-resolution-of-user

Resizeable Images (At Full Resolution!) | Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don't bork when text is resized. But did you know you can make images grow and shrink along with the text? The trick is to give your images a unique class and set their widths with an em value. HTML: CSS: img.expand { width: 10em; } Now because you are forcing a specific width on this image, the web browser is in charge of doing the resizing, which is generally frowned upon. I tend to disagree though, I know that a web browser will never be as intelligent at retaining image quality as Photoshop, but the proof is in the pudding and I think generally web browsers do a fine job at it. Here is the trick: make sure your starting image is larger than the default size. If the size your image is exactly the size as it is displayed on screen at the default text size, you are going to lose image quality as you size it up. But if your image is larger, it will be scaled down at the default size and have room to grow while maintaining resolution.   http://css-tricks.com/resizeable-images-at-full-resolution/

The problem | HTML and CSS, properly used, enable one to write a web page which is viewable at essentially any screen size. Provided, that is, the page contains text only. Images form a problem, partly because browser resizing of images has in general been quite poor, at least compared to what one normally expects from a drawing or photo-manipulation application. (This is incidentally not a criticism: speed of display is far more important in browsers.) And if images are not resized, an image which is viewable on a PDA looks ridiculously small on a 1600-pixel workstation. Even with greatly improved browser resizing, one would still have an issue with bandwidth. A low-resolution image is not going to look good when expanded, but sending a high-resolution image is wasteful if it is only going to be shrunk to some smaller size. In the long term vector graphics such as SVG may provide a solution for GIF-type images. But photos remain an issue. This page therefore experiments with another possibility: selection of different size images. ... I'm not going to bother explaining how most of the Javascript works: it's very straightforward, and a look at the source should make it obvious to anyone who is at all familiar with Javascript. One point is discussed below. Limitations Older browsers do not support image resizing after rendering. The resizing works in any case in Opera 7+, IE 6, Mozilla and Firefox. Unfortunately there does not seem to be any good feature test to determine whether resizing is supported or not. As a first approximation browsers supporting document.getElementById("someElement").style tend to support resizing, while those which don't support one won't support the other. One exception I have met is Opera 6, which doesn't support resizing of images, although it does support “getElementById”. However Opera 6 is now so little used that one can probably safely ignore it – or otherwise add a bit of browser sniffing for this specific case.   http://sbpoley.home.xs4all.nl/webmatters/resize.html

How to Make Your Website Adjust to Different Screen Sizes | Screen resolution presents a problem for web developers. Each computer setup is different and resolution is not a parameter that can be controlled by a web page. The solution, however, is to use CSS or cascading style sheets to control the size of your page depending on the size of the browser window. The key is to use percentages in the width property of your CSS. By using a percentage amount, the content of the website will re-size as the browser window changes size. This will change with the resolution of the viewing computer or with resizing the browser window itself.   http://www.ehow.com/how_7331662_make-adjust-different-screen-sizes.html Read more:

How to Resize Images in ASP.Net | By Jon Guenther, eHow Contributor Print this article To resize an image in ASP.NET, you must use a combination of the Image server-side control with .NET code (either C# or Visual Basic). By specifying either the height, width or both properties of the Image control through code, you can resize the image in response to an event action such as checking a box, making a selection from a drop-down menu or clicking a radio button. By setting the "AutoPostBack" property of the action control, the image is resized automatically.   http://www.ehow.com/how_7505977_resize-images-aspnet.html Read more:

Dynamically Resizing Images | One of the biggest criticisms facing Dynamic HTML(DHMTL) in relation to Flash is DHTML's seeming inability to scale pages relative to a browser's dimensions. To overcome this problem, three central areas need to be focused upon: Dynamic Font Scaling. Layer Resizing. Element Resizing Each of these key areas need to accommodate differing browser dimensions, while at the same time maintaining the same layout and feel of the page. It's no easy task, but it is possible with the help of a little JavaScript magic. In this article we are going to investigate how to dynamically resize an image. But before we do, lets understand some of the previous techniques used in an attempt to try and accommodate differing browser dimensions. Recently, I discovered a method that allows for the dynamic resizing of images as well as other page elements that doesn't rely on passing multiple images. In all honesty even this method has its drawbacks. For one thing it requires, extra coding to make pages fluid. Another drawback is that to actually see the best results with this method, a higher than typical image resolution is needed. For example, if using a background, rather than making the background 800*600, something akin to 1152 * 864 is needed. The golden rule here is to scale down not up, as scaling up results in poor image quality. The obvious disadvantage is that this method leads to increased kbs.   http://www.webreference.com/programming/javascript/images/index.html