Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Feb 28, 2013, 01:33 PM   #1
Dal123
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
What Resolution nowadays?

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
__________________
concretestairslondon.co.uk
Dal123 is offline   0 Reply With Quote
Old Feb 28, 2013, 02:43 PM   #2
Chimp
macrumors newbie
 
Join Date: Feb 2013
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!

Last edited by Chimp; Feb 28, 2013 at 02:52 PM. Reason: More reading material.
Chimp is offline   2 Reply With Quote
Old Feb 28, 2013, 03:27 PM   #3
dan1eln1el5en
macrumors 6502
 
Join Date: Jan 2012
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
dan1eln1el5en is offline   0 Reply With Quote
Old Mar 1, 2013, 05:20 AM   #4
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
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 .
__________________
concretestairslondon.co.uk
Dal123 is offline   0 Reply With Quote
Old Mar 1, 2013, 05:46 AM   #5
olup
macrumors regular
 
Join Date: Oct 2011
Quote:
Originally Posted by Dal123 View Post
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:

Code:
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
olup is offline   1 Reply With Quote
Old Mar 1, 2013, 07:55 AM   #6
MarcelV
macrumors 6502
 
Join Date: Jul 2004
Quote:
Originally Posted by Dal123 View Post
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.
MarcelV is offline   1 Reply With Quote
Old Mar 2, 2013, 05:07 PM   #7
m00min
macrumors 6502
 
Join Date: Jul 2012
Quote:
Originally Posted by MarcelV View Post
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.


Quote:
Originally Posted by Dal123 View Post
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.
__________________
Obligatory dick waving: 2012 i7/8GB/256SSD MBA; 2010 i7/8GB/256SSD MBP; 2006 Mac Mini; iPhone 4S; iPad 3
m00min is offline   1 Reply With Quote
Old Mar 10, 2013, 08:21 AM   #8
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
Quote:
Originally Posted by m00min View Post
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 .
__________________
concretestairslondon.co.uk
Dal123 is offline   0 Reply With Quote
Old Mar 13, 2013, 05:35 PM   #9
tekboi
macrumors 6502a
 
tekboi's Avatar
 
Join Date: Aug 2006
Location: New Orleans ✈ WesŦward
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.
__________________
PowerMac G4 | iMac 27" | Macbook Pro | iPad | iPhone | Thunderbolt Display
---
My Site | Facebook | My Twitter
tekboi is offline   0 Reply With Quote
Old Mar 14, 2013, 01:50 PM   #10
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
Quote:
Originally Posted by tekboi View Post
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 .
__________________
concretestairslondon.co.uk
Dal123 is offline   0 Reply With Quote
Old Mar 14, 2013, 03:14 PM   #11
tekboi
macrumors 6502a
 
tekboi's Avatar
 
Join Date: Aug 2006
Location: New Orleans ✈ WesŦward
Quote:
Originally Posted by Dal123 View Post
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.
__________________
PowerMac G4 | iMac 27" | Macbook Pro | iPad | iPhone | Thunderbolt Display
---
My Site | Facebook | My Twitter
tekboi is offline   1 Reply With Quote
Old Mar 14, 2013, 04:12 PM   #12
olup
macrumors regular
 
Join Date: Oct 2011
Quote:
Originally Posted by tekboi View Post
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.
olup is offline   1 Reply With Quote
Old Mar 14, 2013, 05:09 PM   #13
m00min
macrumors 6502
 
Join Date: Jul 2012
Quote:
Originally Posted by tekboi View Post
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.
__________________
Obligatory dick waving: 2012 i7/8GB/256SSD MBA; 2010 i7/8GB/256SSD MBP; 2006 Mac Mini; iPhone 4S; iPad 3
m00min is offline   1 Reply With Quote
Old Mar 18, 2013, 03:07 AM   #14
Laird Knox
macrumors 65816
 
Join Date: Jun 2010
Quote:
Originally Posted by MarcelV View Post
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.
Laird Knox is offline   0 Reply With Quote
Old Mar 18, 2013, 10:44 AM   #15
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
Quote:
Originally Posted by Laird Knox View Post
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.
__________________
concretestairslondon.co.uk
Dal123 is offline   0 Reply With Quote
Old Mar 18, 2013, 03:01 PM   #16
Laird Knox
macrumors 65816
 
Join Date: Jun 2010
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.
Laird Knox is offline   0 Reply With Quote
Old Mar 18, 2013, 04:01 PM   #17
m00min
macrumors 6502
 
Join Date: Jul 2012
Quote:
Originally Posted by Laird Knox View Post
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.
__________________
Obligatory dick waving: 2012 i7/8GB/256SSD MBA; 2010 i7/8GB/256SSD MBP; 2006 Mac Mini; iPhone 4S; iPad 3
m00min is offline   0 Reply With Quote
Old Mar 18, 2013, 06:11 PM   #18
Laird Knox
macrumors 65816
 
Join Date: Jun 2010
Quote:
Originally Posted by m00min View Post
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.
Laird Knox is offline   0 Reply With Quote
Old Mar 18, 2013, 06:53 PM   #19
m00min
macrumors 6502
 
Join Date: Jul 2012
Quote:
Originally Posted by Laird Knox View Post
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.
__________________
Obligatory dick waving: 2012 i7/8GB/256SSD MBA; 2010 i7/8GB/256SSD MBP; 2006 Mac Mini; iPhone 4S; iPad 3
m00min is offline   0 Reply With Quote
Old Mar 18, 2013, 11:21 PM   #20
Laird Knox
macrumors 65816
 
Join Date: Jun 2010
Quote:
Originally Posted by m00min View Post
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.
Laird Knox is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Best fan control app nowadays? sneak3 MacBook Pro 1 May 18, 2014 03:56 PM
How much is a PDQ worth nowadays? DaKKs PowerPC Macs 2 Aug 21, 2013 04:41 PM
Hacking Pretty Easy Nowadays bernuli Apple, Industry and Internet Discussion 9 Feb 16, 2013 08:30 PM
Lack of manners nowadays simsaladimbamba Wasteland 35 Jun 23, 2012 04:40 AM

Forum Jump

All times are GMT -5. The time now is 10:08 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC