0

I've come to find a love for UI design, and I really do enjoy it more than most other aspects of the Graphic Design field. But an issue I have encountered is designing for responsiveness.

I know the old standard used to be to use the 960 grid system, but I feel as if this is not nearly as applicable today due to the requirements that go into responsive design.

Is there a standard when it comes to responsive and adaptive design, or do you simply design for separate sizes individually, without any standard adaptation?

Improve this question
2
  • @AndrewH I feel like that focuses more on the code aspect, I'm talking purely from a design perspective.
    – Infinitylsx
    Feb 6, 2018 at 23:58
  • With responsive web design the design is about the code and the breakpoints. Devaluing one surely means the end result will be inefficient at best.
    – Scott
    Feb 7, 2018 at 1:07

1 Answer 1

Reset to default
1

If there is a standard, it would be that 0 to 440 pixels wide would be for mobile, 440 to 760 would be for tablets, 760 to 1200 is for computers and above that for wide screens. However it's not really a standard, more a general guideline as a specific design might "break" at different widths, for example 790px. Those are the widths used by most responsive WordPress themes.

You need to consider the way the site is used; mobile is generally used more vertically and tablets horizontally, but both will use a touch screen, which you need to consider when sizing and spacing your elements. Of course, both orientations have to work regardless of the size.

As for designing separate sizes individually, it hasn't been done this way in a few years. Do you remember at the beginning of smart phones when a mobile site was m.example.com? That required separate sites that both needed to be updated individually at every change or post. Nowadays, the recommended method is to use css media queries to make sure that the design is optimized and will adapt no matter what width the site is viewed at. For example, you could make elements lined up horizontally change to be vertical on smaller screens, change the font size, remove sliders or other bandwidth demanding elements, make the buttons bigger, and so on, and make to changes below a certain width.

Improve this answer
4
  • What about when working with others? I tend to be the one who focuses on design, but others focus upon the code. In this case would I still create a mockup for a mobile design for them to base their work off of?
    – Infinitylsx
    Feb 7, 2018 at 1:27
  • Yes absolutely, that doesn't change; a mocup is always better to know where you're going in terms of design. The more you work with people that do the code (or if you do it yourself), the more you'll know what works and what doesn't, what is easy to do, what makes sense and what doesn't as well as how to think outside the box (for lack of a better expression because I hate that one). A full mockup would be mobile horizontal and vertical, tablet horizontal and vertical, and screen. This way the coders know the end result and can tell you if it makes sense.
    – BenoitLussier
    Feb 7, 2018 at 3:31
  • Awesome, thank you so much! You provided all the information I needed.
    – Infinitylsx
    Feb 7, 2018 at 4:29
  • Sure! Glad I could help!
    – BenoitLussier
    Feb 7, 2018 at 14:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.