Responsive Website Sizes?
- Started
- Last post
- 18 Responses
- CuriousGeorge
Responsive question.
Am I safe if I design to 1024, 768 and 320 for the three states?
Thanks!
- hotroddy0
I would also consider 1280
- why only 3 states?hotroddy
- I would go further and say 1280 has more use than 768hotroddy
- 1280, 1024 & 320 then?CuriousGeorge
- A bit more info. It's not a full site, just a one page sign up page with some images and a map on it. No nav.CuriousGeorge
- if not full site remove 1280hotroddy
- 480px as wellETM
- hotroddy0
If it's just a landing page than not necessary to optimize for 1280. 768 makes more sense since it's sandwiched and your client will want to see it. But at the end of the day 1280 will get more views than 768.
Keep 768 and remove 1280
- hotroddy0
980 seemed to be the oldschool width for 1024 since you had to account for old school scrolling bars
- CuriousGeorge0
OK, so 1024, 768 and 320 I'm good for landing page yeah?
- mg330
Let's say your creating specs for desktop and mobile site dimensions at the start of a project to make sure everyone knows the guidelines for creating concepts. It's easy on desktop to say things like:
- Header background - 100% width
- Header content area - 11440px max width
- Page content area - 1280px max widthOn mobile, is it better to use percentages to dictate things like this? For example, on mobile:
- Header background - 100%
- Header content area - 90% (to ensure 5% margins on left and right)
- Page content area - 90% width, 5% left and right marginsDoes this make sense? Is there another way to set guidelines for mobile when there are numerous mobile devices with different widths and resolutions?
- doesnotexist1
so old school to use pixels.
i do really big, laptop (1280), then vertical/horizontal tablet, mobile.
- nbq1
Have a look at this:
- nbq4
You don’t need to write mediaqueries for every possible screen resolution.
To keep things simple you could target four groups:
• smaller than or equal to 768 px (smartphones)
• larger than 768 px (small devices, tablets)
• larger than 992 px (medium devices)
• larger than 1200px (large devices)Those are the breakpoints as used by the very popular Twitter Bootstrap framework.
- yup, keep it simple, ensure that between breakpoints things are handled responsivelyprophetone
- yupdoesnotexist
- good advice. i'm not a big fan of bootstrap, though and using their breakpoints (which are based around their grid sizing) without using the grid would be daft.kingsteven
- prophetone0
Check out how Facebook deals with its responsive site, covers off everything via super elastic ui https://m.facebook.com
I personally would apply the same approach but have special considerations at some bp's like 320, 375+, 768, 1024 so it looks 'perfect' on common device widths, responsive between those widths
- prophetone2
I'm amazed when I see a <insert fortune 500 company> site that looks fine on desktop but starts to traffic jam, fall apart, look goofy on mobile and tablet widths, like the dev didn't bother to play with their browser window widths to see how it all collapses/expands, or view it on a tablet... when the simplest of media query tweaks could solve some big ui problems in those widths
- thumb_screws1
I use this a bit, also helps to get some clients head around breakpoints and device sizes
https://material.io/guidelines/l…
https://material.io/devices/
https://material.io/resizer/- +1Gnash
- i never get this technical with clients. it's usually a conversation about desktop and mobile, for them.doesnotexist
- shapesalad0
Anyone know of plugin for Sketch or a standalone app that allows wysiwyg editing for CSS Grid:
https://www.w3schools.com/css/cs…
Sure I can write by hand the css/html myself, but it's 2018, surely a simple editor has been developed that generates lovely html+css using the new CSS Grid commands?
- < along with responsive break pointsshapesalad
- this is the only thing I could find, but it's too basic: https://www.layoutit…shapesalad
- haven't used and have no idea if any good:
https://www.cssgrid.…fadein11 - ^ just downloading that as you posted.shapesalad
- cool, let me know how it is please, as I could do with somethingfadein11
- ^ css grid builder is pretty decent. Not sure the limits of the free version.shapesalad
- I will have a lookfadein11
- ^ hmm... in principle it's a good app, but its too fiddly, probably works well for the developers who know It inside out.shapesalad
- oh that's a shame, the others I have looked at do seem too simplisticfadein11
- yep. either too simple or far too complex.shapesalad
- detritus0
I haven't myself tried it, but perhaps this might be of use?
An interactive CSS Grid code tool and generator
- hmm simple and similar to https://www.layoutit…shapesalad
- dude...it's faster to just type the code.uan
- That may well be the case, but if you're starting out, this sort of thing can help visualise what you're trying to achieve.detritus
- wes bos explains it all:
https://www.youtube.…uan
- mandomafioso0
There is no magic number. It's better to judge by content. When I start making this layout smaller, when does it become too jammed and need a change? It could be 1000 or 1100, or whatever.
- dbloc2
We use quite a few, but as previously stated it depends on your content and how it breaks.
$screen-xs: 350px; // Your phone is too small...
$screen-sm: 640px; // iPhone
$screen-md: 768px; // iPad
$mq-md-lg: 845px;
$screen-lg: 1024px; // Laptop
$screen-xlg: 1248px; // Desktop
$mq-xxlg: 1500px;- too manyplash
- this is what makes web design so time consuming, if you want to have complete control over your design.hotroddy
- I don't necessarily use all of them all the time. These are the sizes that we have come up with over time.. They work great for us.dbloc
- $screen-md is where the majority of the breaks take place.dbloc
- plash0
Small: 480px
Medium: 767px
LargeMedium: 979px horz med
Large: 1200px
- shapesalad0
Aside from https://framer.com is there any other design tool - or some hidden feature in Ps / Ai - that allows you to design for responsive?
Like that in Framer I can set constrains and resize the canvas/component and it works as expected. Don't like it's a web browser app.