CSS Responsive Layouts Responsive Patterns Responsive Design Patterns

Sereta Baldwin
Sereta Baldwin
3,122 Points

What are design patterns?

At around 1:54 he says the following:

“You may even want to switch between two different design patterns if one might work on mobile like this [referring to the vertical navigation] and one might work better on desktop like this [referring to the tab style navigation]”

Which, to me at least, seems to imply that a ‘design pattern’ is just the way you ‘design’ your layout. But in the video description it says the following:

"A design pattern defines a generic approach to a common problem in design."

This is also the definition I found when googling ‘design pattern’, and I still don’t 100% understand what a design pattern is, but I get the concept at least.

I’m just very confused by the use of the term in the video, cause it seems to be implying a different definition altogether. Every definition I found online (including the one in this video’s description) mentioned solving some kind of problem, but I don’t see what the problem is that’s being solved here. Isn’t he just saying something like ‘When there’s a smaller viewport, use a layout that’s good for those, and when there’s a bigger viewport, use a layout that’s good for those’? I don’t see how his use of ‘design pattern’ is related to, for example, the wikipedia definition:

In software engineering, a software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. Rather, it is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.


Can anyone explain?

1 Answer

MFrank Johnson
MFrank Johnson
4,920 Points

If you consider the given definition for design pattern ("... defines a generic approach to a common problem in design.") as you watch the video, you'll see him use the term as defined -- i.e., as an approach to solving for the common differences in viewport sizes. In this context, a design pattern can be described as the approach you choose.

Example: In the wide screen viewport he chose to use a tabbed, horizontal navigation design pattern. In the narrow screen viewport he chose to use a tabbed, vertical navigation design pattern.

Hope that helps.

Best, Frank