What Resolution nowadays?

[Dal123]

What resolution to use nowadays for a site? I did mine a few years ago and it's changed a lot since then.
http://www.w3schools.com/browsers/browsers_display.asp

[Chimp]

The trend as of late is something called 'Responsive' web design, this means that your page scales to fit the browser aspect ratio and resolution.

My first steps into exploring Responsive layouts were with a lovely bit of kit called the Responsive Grid System by a bloke called Graham Miller:

http://www.responsivegridsystem.com/

Hope it's helpful to you!

EDIT:

Literally a few moments after I posted this, I stumbled upon a thread / post here on MacRumors which linked to an infographic that sums it up pretty well:

http://www.dotcominfoway.com/blog/re...gn-infographic (via StephenRichard)

Thanks Stephen!

[dan1eln1el5en]

was just going to say the same, really do look into this responsive net thing.

to all the "screen-sizers" the only screen size left in the world is the users, with this I mean that you will work for many people, and they expect "awesome" no matter the screen size, and today we are not operating with 16:4 scaling up or down, now we are operating from 480 x 620 to 4256 x 3865 (not sure about numbers, but imagine iPhone 3GS and rMBPro) one page, fits all

[Dal123]

Thanks, what about pictures and graphics? I know html 5 has gradients and things like that to spice up logo text but I imagine they can't compare to a properly decorated jpeg text logo.

So what does one do? I know you can use % as width, with minimum width etc. Is that the way to go?

Great links by the way; many thanks .

[olup]

Originally Posted by Dal123

Thanks, what about pictures and graphics? I know html 5 has gradients and things like that to spice up logo text but I imagine they can't compare to a properly decorated jpeg text logo.

So what does one do? I know you can use % as width, with minimum width etc. Is that the way to go?

Great links by the way; many thanks .

Images are really tough and so far there is no bulletproof way to really serve them correctly.

You have to keep in mind that images use up a lot of bandwidth, so you have to think twice, how many images you actually want to put on your website and what could be done with css3 (gradients and such).

The big problem is that now with high resolution displays you have to serve multiple images with different sizes. So a Iphone 3gs might get a small jpeg, while an Iphone 4 or Ipad 3 will need a bigger picture to keep the images nice and not blurred.

To get started with sizing images and this is very basic:

img { max-width:100%}

This website has a very thorough collection of all possible elements of a responsive website and a great resource page, where you can read up all the stuff.


http://bradfrost.github.com/this-is-.../patterns.html

[MarcelV]

Originally Posted by Dal123

What resolution to use nowadays for a site? I did mine a few years ago and it's changed a lot since then.
http://www.w3schools.com/browsers/browsers_display.asp

960 is still very dominant. While technology focused individuals make you believe responsive design is the way to go, there is much more needed effort required from a graphic design principle. This is a typical tech/business discussion and often the additional cost doesn't warrant it. Sometimes, because it can be done doesn't mean it is better. If you use the body width of 960px, you are optimized for the vast majority of users. Most people really don't upgrade monitors as fast as some think.

There are some good 960 Grid CSS frameworks available. Look at 960.gs, Yahoo UI grid css, and Blueprintcss.org

If you make headers expandable to full width and then keep the 960 body centered, you will have a great result.

Of course, mobile design requires a separate approach. But the trick is to find the most common denominator in height and width.

[m00min]

Originally Posted by MarcelV

960 is still very dominant. While technology focused individuals make you believe responsive design is the way to go, there is much more needed effort required from a graphic design principle. This is a typical tech/business discussion and often the additional cost doesn't warrant it. Sometimes, because it can be done doesn't mean it is better. If you use the body width of 960px, you are optimized for the vast majority of users. Most people really don't upgrade monitors as fast as some think.

There are some good 960 Grid CSS frameworks available. Look at 960.gs, Yahoo UI grid css, and Blueprintcss.org

If you make headers expandable to full width and then keep the 960 body centered, you will have a great result.

Of course, mobile design requires a separate approach. But the trick is to find the most common denominator in height and width.

Not quite sure what you mean by "technology focused individuals" but I'd say that you have to be damned sure your current visitor stats are bucking the current trend and your mobile users aren't increasing.

If you're relying in a trick to guess the average / most popular mobile screen size you're doing it wrong.

Originally Posted by Dal123

Thanks, what about pictures and graphics? I know html 5 has gradients and things like that to spice up logo text but I imagine they can't compare to a properly decorated jpeg text logo.

So what does one do? I know you can use % as width, with minimum width etc. Is that the way to go?

Great links by the way; many thanks .

For photos I tend to use an .htaccess file that calls on a cookie with the users screen width, no one gets served an image wider than their screen. I layer a fallback with very basic browser detection to detect older phones / users without JavaScript.

For graphic elements I add them into a webfont. They are then vectors so resize without difficulty. It also cuts down on hits to the server as all graphics / icons are contained within one file.

[Dal123]

Originally Posted by m00min

Not quite sure what you mean by "technology focused individuals" but I'd say that you have to be damned sure your current visitor stats are bucking the current trend and your mobile users aren't increasing.

For photos I tend to use an .htaccess file that calls on a cookie with the users screen width, no one gets served an image wider than their screen. I layer a fallback with very basic browser detection to detect older phones / users without JavaScript.

For graphic elements I add them into a webfont. They are then vectors so resize without difficulty. It also cuts down on hits to the server as all graphics / icons are contained within one file.

Thank you both for your great contributions . This way is bulletproof and I will be looking into it.

I agree that responsive web design is faltered:
If you're serving a website with text then it's fine; but if your website has pictures or movies then there it is more involved .

[tekboi]

Responsive is the biggest trend these days... although I have yet to adopt it. I"m a bit stubborn

I just don't like that fact that I would have to compromise my already existing layouts to incorporate responsiveness. I would basically have to recreate all of my websites.

[Dal123]

Originally Posted by tekboi

Responsive is the biggest trend these days... although I have yet to adopt it. I"m a bit stubborn

I just don't like that fact that I would have to compromise my already existing layouts to incorporate responsiveness. I would basically have to recreate all of my websites.

Agree completely; why bother changing your code when it's working fine, only for the code to change in another year .

[tekboi]

Originally Posted by Dal123

Agree completely; why bother changing your code when it's working fine, only for the code to change in another year .

Yeah, I was out of Web Development for almost 4 years. When I came back... whole new world. HTML5, CSS3, Flash is Dead, LESS, SASS, JQuery... The Web Dev world changes rapidly.

[olup]

Originally Posted by tekboi

Responsive is the biggest trend these days... although I have yet to adopt it. I"m a bit stubborn

I just don't like that fact that I would have to compromise my already existing layouts to incorporate responsiveness. I would basically have to recreate all of my websites.

Responsive design isn't a neccessity, therefore doesn't need to be applied, just to "get with the times". If you're happy with your layout of your existing site, then leave it at that. However if you have a project coming up, where you feel that it would make sense to go responsive, feel free to incorporate that and try it out.

I did it for one of my projects because I wanted to do something different for that particular project and I don't have huge amounts of content or images for that project.

[m00min]

Originally Posted by tekboi

Responsive is the biggest trend these days... although I have yet to adopt it. I"m a bit stubborn

I just don't like that fact that I would have to compromise my already existing layouts to incorporate responsiveness. I would basically have to recreate all of my websites.

I wouldn't recommend retrofitting an existing website with RWD. Honestly, it's quicker to scrap and start from scratch. Look at using it for new projects but for older ones... well it depends if the client sees it as something they want, and are prepared to pay for.

[Laird Knox]

Originally Posted by MarcelV

960 is still very dominant. While technology focused individuals make you believe responsive design is the way to go, there is much more needed effort required from a graphic design principle. This is a typical tech/business discussion and often the additional cost doesn't warrant it. Sometimes, because it can be done doesn't mean it is better. If you use the body width of 960px, you are optimized for the vast majority of users. Most people really don't upgrade monitors as fast as some think.

There are some good 960 Grid CSS frameworks available. Look at 960.gs, Yahoo UI grid css, and Blueprintcss.org

If you make headers expandable to full width and then keep the 960 body centered, you will have a great result.

Of course, mobile design requires a separate approach. But the trick is to find the most common denominator in height and width.

You don't understand responsive web design.

RWD isn't just about page width. An iPhone display is vastly different than a desktop browser. The point of responsive design is to provide the appropriate experience.

[Dal123]

Originally Posted by Laird Knox

You don't understand responsive web design.

RWD isn't just about page width. An iPhone display is vastly different than a desktop browser. The point of responsive design is to provide the appropriate experience.

Don't Iphones have some formatting in them to scale down pages appropriately. I understand it's not fullproof but from what I'm seeing so far they handle quite well (apart from my weird css hack; that no-one seems to understand in a number of forums ).

What about images, do you use a script to determine browser size on a cookie? Then have a bunch of different images to select from?
How many failsafe images should one create, and where are a list of the common screen sizes as there is nothing on ww3shools.com.

[Laird Knox]

Responsive web design isn't just about serving up different sized images. The actual page layout can change as well. This is where things get really interesting.

As far as serving up images goes my back end code lets me serve up any sized image. It re-sizes the image on the fly and adds watermarks as needed. Even so I'll just have a couple of sizes that the page will request depending on the layout.

Tonight I am going to take a look at Adobe's Edge Reflow package. This is the first thing they have done in recent years that has gotten me excited. If it does what they say it might be a really useful tool. If not then I'll be hand coding my latest project.

[m00min]

Originally Posted by Laird Knox

Tonight I am going to take a look at Adobe's Edge Reflow package. This is the first thing they have done in recent years that has gotten me excited. If it does what they say it might be a really useful tool. If not then I'll be hand coding my latest project.

I thought Adobe Edge Reflow was more of a responsive design application, not something that produces production level code.

[Laird Knox]

Originally Posted by m00min

I thought Adobe Edge Reflow was more of a responsive design application, not something that produces production level code.

I dunno what it really does and how well it does it. That is why I'm going to take a look at it. And yes, it is a responsive design tool.

It if produces horrible code like most WYSIWYG editors then I'll just hand code. I'm not looking at a very complex design. I just wanted to see what Reflow can do.

[m00min]

Originally Posted by Laird Knox

I dunno what it really does and how well it does it. That is why I'm going to take a look at it. And yes, it is a responsive design tool.

It if produces horrible code like most WYSIWYG editors then I'll just hand code. I'm not looking at a very complex design. I just wanted to see what Reflow can do.

Well I'm planning on using it for my next project during the design stage. I just assumed it would output dodgy, unoptimised code.

[Laird Knox]

Originally Posted by m00min

Well I'm planning on using it for my next project during the design stage. I just assumed it would output dodgy, unoptimised code.

I'm going through the tutorial now. Even if the code is bad it should save time when I put together the page. If I already have a reference worked out then it should be a snap to code.