Hi, this is my first time posting on Upcase.
I would appreciate some input into how to tackle the following. Hopefully it is also a useful question, case study for others to learn from. Just for context, my abilities and understanding are around the ‘just enough to be dangerous’ point. ‘Dangerous’ meaning I can often get something done, whilst equally being capable of going down the wrong path! Also, whilst I have tried to explain the challenge clearly, it is possible that due to my lack of knowledge, I have not explained it with the correct terminology, or am plain wrong.
I would like to improve and simplify the process between design and development. Generally I would like to make collaboration easier and understanding clearer. The main tool we use for design is Sketch, and our front end framework is Bourbon with Neat.
Both Sketch and Neat have a good grid system where it is easy to see your design and the grid columns. I feel both a designer using Sketch and the developer/person using Bourbon with Neat, should have shared understanding, and both should be using the same grid system to implement their layout. The challenge I am struggling with is getting to this shared understanding whilst working on a responsive website design.
Sketch has the following templates for responsive web design. The width is the important number and in pixels:
- Desktop HD 1440 width x 1024 height
- Desktop 1024 x 1024
- Tablet Portrait 768 x 1024
- Mobile Portrait 320 x 1024
These are the questions I am trying to learn more about:
- Are the Sketch templates good widths to work with when deciding on your starting breakpoints for a responsive design?
- If we implemented these 4 sizes as an early scope for a website, would this get us most of the way to the site looking reasonable on a mobile, tablet, laptop and desktop. The site would then squash between these sizes.
- Assuming deciding on the website’s breakpoints, how would you work with columns in each size? For example would you use 16 columns for 1440, 12 columns for 1024, 8 for tablet and 3 or 4 columns for 320?
- Am almost certainly missed something in my thinking. What am I missing?
It would be great to find out more how people think about responsive designs when they are making a start. What patterns have you found in practice to be useful? I appreciate there is more to a great implementation for responsive design. Where is the 20% knowledge that will get a responsive design 80% of the way.
We are working on the designs currently, and will add them to this thread later. Appreciate that the answer might depend on the design, and that an actual example might be helpful in talking the issues through.
Thank you in advance for the kind input.
Stefan