Is there a "best-pattern" for responsive banners?

I see this one all over the place: enter image description here

...in fact, I haven't seen much else on responsive websites.

Essentially, the common theme seems to be a faded image behind centered text.

Is there a reason other text positions, imagery, and other elements aren't commonly used on responsive pages? This design seems a bit dry.

Some examples: nest.com sofi.com apple.com

  • What exactly do you mean by "best pattern" are you referring to the layout of the banner? Jun 26, 2015 at 13:25
  • is there something you have better in mind?
    – SaturnsEye
    Jun 26, 2015 at 13:26
  • 3
    This is what people do... Something looks good or what ever and they want to use it too. This style just became popular and that's pretty much why you see it everywhere. Go ahead... I'm not going to call the police if you want to design something original.
    – Joonas
    Jun 26, 2015 at 13:34
  • 1
    I think this answers this as well as anything else: graphicdesign.stackexchange.com/questions/24757/… There is no "best". What's popular in 2015 may be completely different than what people copy in 2017.
    – Scott
    Jun 26, 2015 at 13:58
  • 1
    No, there is no 'best' pattern. Use what works for your particular need.
    – DA01
    Jun 27, 2015 at 0:36

3 Answers 3


Responsive "design" by its very nature needs to be extremely minimalist so things can easily realign and relocate.

It's also fair to say that those that could do the best responsive design are not (yet) at all interested in it. The tools simply aren't ready.

So it's being done by those without a lot of creativity and problem solving ability in design, more code oriented folks playing with layout. Therefore it is (at this stage) both incredibly simple and simplistic.

In all fairness to those that are attempting to do responsive "design", there's not a lot of tools available for doing any form of serious responsive layout and experimentation unless you know how to code. And coding and instinctive design capabilities are nearly mutually exclusive properties.

CLARIFICATION: Those sufficiently competent with code to be significantly experimental and exploratory through the medium aren't generally inclined to visual design, nor instinctively capable of good design. And vice-versa.

Perhaps the best current tool is Storyboards in the new Xcode 7, but it's got a learning curve far beyond the interests and passions of most designers, and isn't designed for web work. It's designed for making responsive apps for varying screen sizes and sections in the iOS and OS X worlds, but for experimenting with layout ideas it's probably the best tool of the moment, barring actually learning to code.

It's almost better to pick aspect ratios and sizes you'd like to design for, and go from there, manually. Greater initial pain for a much easier completion run.

  • 2
    "And coding and instinctive design capabilities are nearly mutually exclusive properties" = that's not true at all. The best developers I've met understand visual design and vice versa.
    – DA01
    Jun 27, 2015 at 5:38
  • 1
    'Responsive "design" by its very nature needs to be extremely minimalist' - no it doesn't. Jun 27, 2015 at 13:42
  • 1
    Care to provide some proof?
    – Confused
    Jun 27, 2015 at 16:15
  • 2
    Responsive design tends to be minimalist because a) it gained popularity while flat design is/was in fashion, b) it's much, much easier that way and c) it tends to be implemented by UX-oriented design teams which err towards minimalism (every flourish or decorative element needs to be able to prove its objective utility). In theory, you could have a design that was both perfectly responsive, and highly decorated/complex... but you'd be swimming against the tides of fashion, technology and the decision-making processes of most responsive design teams, for little benefit. +1 Jun 29, 2015 at 10:22
  • 1
    Why did flat design gain popularity, again? This is not the first time the aesthetic qualities currently known as "flat design" have been popular. What you're describing are symptoms of the trend, not the things that brought the trend into play.
    – Confused
    Jun 29, 2015 at 10:47

If by "hero banner" (5) you mean the header of a website, then it's mainly a matter of CSS and wanting to load the same image for all devices; your example looks like using CSS and not a simple web banner. There's a few reasons why a dev would use the same exact hero banner for all devices besides being faster to implement (1, 2) but each device can easily have its own hero banner and there aren't many design limits in this case. It's a matter of possibility, time/budget, and priorities.

But if you mean a section with CSS and HTML for example, the reason is time and budget, dev often use Bootstrap, and in other occasions, some of them prefer to not use jquery to resize their galleries for example (1, 2).

Already you can get a lot of different ways to create a responsive layout. AND ideally, the design shouldn't be overcharged with images. (2) It's normal the layout are minimalistic and doesn't have too many large images; it loads faster.

It simply takes more custom CSS code for each device if you decide to use another way to implement a responsive design but there is no "best" way, and anything can be done. And since solutions like Bootstrap exists, it's a nice shortcut to use that has already pre-defined ways to make the content "flow"; lotof dev will use it because it saves a lot of time, but a lot of websites end up having a similar style too. The important is that it fits well on each device, loads fast and if possible, looks nice too. It also has the benefit for dev of having only one website content to manage.(3)

The other way to not be limited by this is to create a website with a laptop, tablet and mobile version, with a distinct layout for each. Corporations will often use this if their priority is to present the design in the best way possible for each device (eg. promotions, contests.) On this level, it's a bit less of a puzzle to create a version for each device independently. But this could also be done by using different stylesheets. (3, 4)

You certainly see a lot of websites with a different responsive layout.

These are some examples of different responsive layouts:






Some references:

(1) The strategy is an evolution of a previous web design strategy known as "graceful degradation", wherein designers would create Web pages for the latest browsers that would also work well in older versions of browser software. Graceful degradation was supposed to allow the page to "degrade", or remain presentable even if certain technologies assumed by the design were not present, without being jarring to the user of such older software. Unfortunately, upgrading is often not possible due to IT department policies, older hardware, and other reasons (eg. government websites.) The "just upgrade" attitude also ignores deliberate user choices and the existence of a variety of browser platforms; many of which run on handhelds or in other contexts where available bandwidth is restricted, or where support for sound or color and limited screen size, for instance, are far different from the typical graphical desktop browser.

(2) "Although many publishers are starting to implement responsive designs, one ongoing challenge for RWD is that some banner advertisements and videos are not fluid. However, search advertising and (banner) display advertising support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices."

(3) Jody Resnick, President of Trighton Interactive stated in his interview with Forbes, “Responsive websites simplify internet marketing and SEO. Instead of having to develop and manage content for multiple websites, businesses with responsive sites can take a unified approach to content management because they have only the one responsive site to manage.

(4) "Different landing page URLs can be used for different platforms, or Ajax can be used to display different advertisement variants on a page. CSS tables permit hybrid fixed+fluid layouts".

(5) Hero image is a term used in web design for a specific type of web banner. A hero image is a large banner image, prominently placed on a web page, generally in the front and center.

Edit: Added reference for hero banner in case the element has been misnamed in the question. Added some Wikipedia references that have already been approved by professional developers and quoting experts on the topic.

  • 2
    Bootstrap is certainly the most common responsive CSS grid framework (which, BTW, usually requires jQuery if you want to use the JS that comes with it) but this doesn't really address the specific question about a banner design.
    – DA01
    Jun 27, 2015 at 5:41
  • The question is mentioning hero banner but quite frankly, a banner is usually an image... I don't know for you, but the samples and description look like what someone would do with CSS... including me. Bootstrap can be used with or without jquery, I fail to see why you're mentioning this. I probably forgot a comma somewhere or I should have used bullet points for clarity, obviously.
    – go-junta
    Jun 27, 2015 at 6:33

In my opinion, this pattern was made famous because of so many responsive themes available over the Internet. Also, many beginner designer, this one I have seen it personally, follow common patterns to design a website quickly, and this one is simple, easy and quick to create.

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