Tag Info

Hot answers tagged

14

Responsive design (also known as 'adaptive' design), where the same web page presents the best version of two or more hand-crafted layouts depending on the browser width, is the strongest option for most websites. To see why, it helps to look at all of the options available to web designers: Fixed layouts A fixed page width, where the content width is the ...


6

Resizing during a session, or actual browser window size vs screen size? It's impractical (See @JacobHume's comment below) to tell if a user is changing the window size while browsing but Chris Coyier over at CSS Tricks has come up with a way to track the window size onLoad, (results below) and zachstronaut has a similar method using Google Analytics. ...


4

That entirely depends on your user base, for a commercial site I work on 1024x768 represents 9.49% (166,453) of our visitors, we will continue to support that for some time. The flip side to that, a hobby project that I work on has a different audience and I don't support 1024x768 as it only represents about 2%. Check your existing stats and use that to ...


2

A fluid layout is the easiest to create and maintain. You then can also use a mobile stylesheet to "fix" any issues that may arise in very small devices.


2

I'd use two stylesheets. One thats flexible to fit the majority of regular desktop PC users. Another for mobile.


2

While one could compute the average aspect-ratio or, even better, the most frequent aspect-ratio of your displays for people of visit your site, it will be of little consequence. As you have noted, the browser bar takes some space. It takes a different amount of space on each browser, at different resolutions and with different toolbars installed. Scroll ...


2

As stated in Google's PageSpeed Insights FAQ: Does PageSpeed Insights use a real device? PageSpeed Insights' analysis does not use real devices. PageSpeed Insights fetches a site with a webkit renderer (the same rendering engine that powers Chrome and Safari) that emulates both mobile device and desktop devices. Therefore, screen width should not ...


2

Until recently it was becoming increasingly common to see mobile versions of websites, where the URL is entirely different, such as m.example.com or example.com/mobile. This is often more convenient than sending mobile users to the regular site, but it has drawbacks, such as complicating SEO, doubling the design code you have to maintain, and making it ...


1

Google Analytics does not support pixel ratio by default but you can add it with script for a custom variable. See https://github.com/tysonmatanich/GetDevicePixelRatio for more details.


1

I have written a short javascript code that could help you: alert( 100 / document.body.offsetWidth * document.getElementById("<YOUR_ELEMENT_ID").offsetWidth ); You have to insert in the line above the ID of the elements that you want to know the percentual width related to the window width. You can insert this line of code in firefox url bar (preceded ...


1

I would use a calculator. 100 / screenWidth * elementWidth But what should that be good for? The designer should set up the percentages once for the layout. Screen sizes are different, thus also the computed percentages would differ, depending on what screen size you are using such a ruler. 100 / 1600 * 900 = 56.25% 100 / 1024 * 900 = 87.89%


1

You may find this useful for creating full screen background images.


1

The current recommended best approach is to use what's been coined "responsive web design" where you need to satisfy various devices and screen size/resolutions with a single approach. A great article outlining the hows, whats and whys of responsive web design can be found at ...


1

Here are a few applications that let you test your websites mobile version http://webdesignledger.com/tools/7-useful-tools-for-mobile-website-testing Is that what you meant about narrowing windows on a desktop to see a mobile version for development and testing reasons? If so there's some good apps in the link above for that. I also think narrowing a ...


1

I would argue that oversizing images is a bad idea, but I think you might be on the right track. Oversizing would indicate that you're providing images that are bigger than they have to be, when your question would indicate that you might want to consider adding some custom CSS to your web site, possibly using media queries, to accommodate a larger ...


1

I guess technically a responsive image would fall into this bracket, but I personally feel they are bad - as you say for mobile etc. The mobile has to compress them, download them, uncompress them, then resize them. I like the idea of the picture tag which may never happen. Someone ran up a polyfill example at https://github.com/scottjehl/picturefill. I ...



Only top voted, non community-wiki answers of a minimum length are eligible