Responsive Design
- Started
- Last post
- 12 Responses
- nylon
Just out of interest what width cut offs should I be using?
I have been working with a developer who uses 4 different cut off points.
Just wondered what you guys thought?
- utopian0
- nice. Do you do a smaller grid when you zoom on details? subgrid each section for detail work?yurimon
- No, I just stick to the 4 columns, the columns auto expand equally when viewed in a larger display.utopian
- Keeping the copy, images and layout simple really helps when viewing or rescaling in all the different screen sizes.utopian
- They do a great of this:
http://en.ony.ruutopian - I'm hoping to have my new site up in a couple of months. Very similar to structure to that site in my previous post.utopian
- that site you link to is a bought theme - have seen it.fadein11
- < yes, it's a pretty basic formula that works on all platforms and supports various content types.utopian
- < including: images, video, text, etc...utopian
- monkeyshine0
Here's some good advice here. Generally, Luke Wroblewski is a good resource for all things mobile.
- jtb260
I like to (don't always get to) design for mobile first. I'll put together a basic prototype. I'll pull the browser wider and watch for a point when the design looks strained and that determines my first break point. I adapt the design, implement it in my prototype and start over. The point is to add breakpoints where the layout starts to break down. You may only need one, you may need five.
- monkeyshine0
^ well said. Thinking about breakpoints in terms of specific devices is really an illusion. There are so many different screen sizes out there, it's important to be more fluid in our design.
Also think this is a great time to break away from static PSD comps. I'm an advocate for designing in the browser...just so much easier.
- ^utopian
- that is a terrifying idea ... but you may be on to something for the future.ohhhhhsnap
- nocomply0
I've found that some sites need more breakpoints than others. It really depends on the design and the content.
But generally speaking, I obsess the most over the following sizes:
1024px or greater (desktop, ipad landscape view)
768px (ipad in portrait view)
320-568px (mobile)For stuff that comes in between those areas I add breakpoints only as necessary, and as dictated by the content and design of the website.
- wagshaft0
Per Monkeyshine's comment. I've been playing with the free trial of Adobe Edge Reflow. A decent combo of a code and PS capabilities. If anything it's a great tool to prototype your design at breakpoints you set.
- instrmntl0
Build a different page entirely for mobile.
- monkeyshine0
Here's another great article from Luke on multi-device patterns:
- ohhhhhsnap0
SEE:
"Responsive Web Design"
http://www.nobledesktop.com/semi…
scroll down to the Online Seminar below*0:16 minutes in he talks about this topic + breakpoints, and misunderstandings surrounding it.
- utopian0
Templates and themes are the future.
And the future is now!
- Stugoo0
for the 'client' people i work with like to have 2 or 3 major breakpoints.
a 'mobile' site is used as a base, then a 'tablet' breakpoint at say 600px, and then a 'desktop' breakpoint at say 960px. From there you can set a max-width of say 1600px or whatever.
personally I like to resize the page until it looks like shit and then add another.