- Last post
- 18 Responses
Am I safe if I design to 1024, 768 and 320 for the three states?
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
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
980 seemed to be the oldschool width for 1024 since you had to account for old school scrolling bars
OK, so 1024, 768 and 320 I'm good for landing page yeah?
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 width
On 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 margins
Does this make sense? Is there another way to set guidelines for mobile when there are numerous mobile devices with different widths and resolutions?
so old school to use pixels.
i do really big, laptop (1280), then vertical/horizontal tablet, mobile.
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
- 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
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
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
Anyone know of plugin for Sketch or a standalone app that allows wysiwyg editing for CSS Grid:
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:
- ^ 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
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:
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.
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
$screen-lg: 1024px; // Laptop
$screen-xlg: 1248px; // Desktop
- 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
LargeMedium: 979px horz med