: Hero Banner - Responsive Design Is there a "best-pattern" for responsive banners? I see this one all over the place: ...in fact, I haven't seen much else on responsive websites. Essentially,

@Shanna688

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.

Vote Up Vote Down

@Si6392903

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:
stephencaver.com/ foodsense.is/ www.bk.com/ www.timhortons.com hogash-demos.com/kallyas_joomla/index.php?option=com_content&view=featured&Itemid=156


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.

Vote Up Vote Down

@Hamaas979

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.

Vote Up Vote Down