i'm designing for web since 2006. i waste a lot of time ignoring things like bootstrap... i understand how grids(and the specific bootstrap) work. But i have a "theorical" question about it: How to take decision like "width of a element" in design step(e.g. drawing in sketch app). I can't handle this questions without struggle with bootstrap grid system. This problem completely dissolves when i'm directly "design in browser". But persists when i'm on a graphic software like sketch or photoshop. Sometimes i've to formalize some pages and drawn its UI's in these softwares. (english isn't my first language, sorry)
Asked
Active
Viewed 469 times
1 Answers
3
Anytime you're designing something that's going to be responsive, it helps to design multiple viewports. If it's for an existing site, look at analytics to find the most common resolutions people use when viewing your site, and grab the top 3 along with some sample images and text so you can decide when things need to reflow.
If you're designing a new site, you can always check StatCounter's global statistics or since you are planning to use a framework stick with their definition of small, medium, and large. Design even your wireframes at these top breakpoints and then as you are actually coding and adding real content, you can make minor adjustments rather than trying to determine breakpoints while you are in the midst of coding.
Personally, I like to design in Illustrator and use multiple artboards - I use the top 3 most common viewport widths and design at least a couple of pages. If you create a pattern library and reusable components, you can become even more efficient.
All that said, Bootstrap is becoming a bit dated and I'd encourage you to begin looking into CSS Grid instead, if your users are using modern enough browsers that you won't have to code everything with a ton of fallbacks. You'll likely save a lot of lines of code.
WebElaine
- 1,910
- 7
- 7