Responsive break points?
- Started
- Last post
- 16 Responses
- omahadesigns
Is there any good guide out there to help teach me about breaking points and how to design for them and how to communicate them with programmers? I know what I want a site to look like on a big screen and then on a phone, but have trouble with the mechanics of it and any inbetween size screens.
- bklyndroobeki0
Yes! Noble desktop has a really good/free webcast on Responsive Design where the teacher breaks down Break Points. It's actually excellent.
Aquent's Gym (tutorial) on Responsive Design also goes into + breaks down BreakPts (and you can test it out over in CodePen.io, good stuff.
- dbloc0
everyone has their own opinion on this. You just need to figure out what works best for you.
- omahadesigns0
That video is awesome. For those who only design sites and have other people code, how much technical information do you give programmers and how much do programmers have to calculate?
- doesnotexist0
kind of depends on your ui on how many breakpoints you need. i've seen some sites that have 1, just for mobile.
- and some with 8doesnotexist
- yupprophetone
- why respond, if you don't answer the question? the question was, are there any good guides out there to help teach OP. Your response is redundant. now fuck off.rabbit
- benfal990
btw, nice website http://responsivedesign.is/
thanks!
- rabbit0
Three breaks.
Desktop + tablet landscape
Tablet portrait + mobile landscape
Mobile portraitI would recommend goldilocks approach, responsive.is is your friend for testing.
Source: i do this shit all day long for a living for some of the largest companies in the world
- doing something all day for big companies isn't a merit badge for authoritydoesnotexist
- you are right. it makes me an expert. you fucking git.rabbit
- but do you make 190K with benefits?? :)OSFA
- rabbit0
Also, your developer would ideally receive pad for all three layouts.
Thats all you need to give them, go!
- Uhh PSDrabbit
- developers from india need PSDs, good ones can use JPGs that are annotated.doesnotexist
- yea sure. until we need that PNG for that logo on the gradient background. fuck off.rabbit
- your responses are so fucking retarded.rabbit
- orrinward20
I'm with rabbit with 3 breaks.
I also use an adapted version of this SCSS for making responsive stuff sexy and simple.
- orrinward20
- This pairs breakpoint stuff much more logically.orrinward2
- SigDesign0
Play around with http://webflow.com ... it's a good tool for showing what needs to happen in development / design as you go from one device to another.
- 5timuli0
Can anyone clearly explain the differences in terms of dimensions of mobile portrait/landscape, tablet portrait/landscape, and desktop? I'm talking layman
If I'm looking at having a responsive design with snapping layouts at larger scale (960, 1280), and fluid below, say, 768 or 800, then how are the breakpoints of each defined? i.e. mobile portrait is 320–4979, landscape 480–767, tablet portrait at 768–X, etc.?
Am I making sense here?
- fadein110
You really shouldn't have to discuss breakpoints with a programmer - they shouldn't be bothered by front-end issues. Use a framework to build the site on - plenty of tutorials out there - frameworks handle all this stuff for you.
- Nathan_Adams0
Find a developer who "gets it", rather than just beavers away taking everything literally.
Because the reality is that every project is different, and even different elements may have different break points (say your navigation might reflow or change at different points than the content does). If you have someone who is on a similar wavelength to you then you can trust them on making the right decisions.
*of course, all easier said than done.
- bklyndroobeki0
- Breakpoints every pixel, plus an extra breakpoint every second pixel (for Retina) up to max screen size.nb
- It should work out to about 5800 break points.nb
- lolset
- Just go with the bootstrap breakpointsset
- my fucking developer left the project a mess. now i'm picking up the pieces. BOOTSTRAP learning here i come.bklyndroobeki
- bklyndroobeki0
By the way I'm using WP ^ for this particular project
- Shouldn't make one iota of a difference which CMS you're using.Nathan_Adams
- Good to know. I have ABSOLUTELY no idea. Just learning. I @media'd everythingbklyndroobeki