Responsive website banner

Hi
I am being told by a website designer that it is not possible to build a responsive website with banners which can be conditioned with different text heading positioning on these banners and same for the buttons. For example in ipad and mobile the designer mentioned that they are unable to control the text positioning. This causes the text on the banner to be situated in areas which are disturbing the picture (e.g. Text on a persons face etc) and the positioning of the banner buttons to be placed in areas which do not make sense.
Is this correct? I have seen many other websites such as ubank.com.au, commbank.com.au which have a responsive website for ipad and mobile which are able to customize the banners, banner headings and buttons.
They have said that my only option is to remove the buttons completely (desktop/ipad/mobile) and then they can control the text by hard coding this to the banner.
Any information would be great. thanks
Vincent

It's possible if you know what you're doing.  Example with different banners for desktop, tablet and mobile devices inside CSS media queries.  Resize viewport to see it work.  View source to see the code.
Alt-Web :: Fluid Grid Test
EDIT: I think it's best to keep text and navigation separate from re-scaling images both for design and usability reasons.
Nancy O.

Similar Messages

  • How do I set my background for a website banner in these colours?

    Hi guys, I am a complete beginner when it comes to Photoshop and I have just downloaded Adobe Photoshop CC 2014.
    If you please refer to the picture I have uploaded, I want my website banner to be these shades of green. I do not want the white writing in it. So how would I create a website banner with the background as these shades of green without the writing?
    PS I did not choose pick these colours, it was mum who want's the website created

    You're looking for a Gradient
    Photoshop Help | Gradients
    Honestly, I would use a CSS Gradient instead of an actual image.  Why?  Because a CSS Gradient is Responsive (scalable) in % width layouts.  And the code takes up very little bandwidth which is kinder & gentler to mobile data plans.
    Your HTML & CSS code would look something like this:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Your Site Name</title>
    <style>
    header {
        margin: 0;
        padding: 0;
        font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
        font-size: 32px;
        min-height: 150px;
        text-align: center;
        color: #FFF;
        text-shadow: 4px 3px 3px #666;
        /**CSS Gradient**/
        background-color: #00a855;
        background: -moz-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #00a855), color- stop(100%, #bcd800));
        background: -webkit-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
        background: -o-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
        background: -ms-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
        background: linear-gradient(135deg, #00a855 0%, #bcd800 100%);
    </style>
    </head>
    <body>
    <header>
    <h1>Your Awesome Headline</h1>
    </header>
    </body>
    </html>
    Nancy O.

  • How can I create a responsive website based in Adobe Muse?

    I already created a website with Adobe Muse but I just find out that it doesn't support Responsive Websites. What can I do now? Is there a way to make my website responsive or do I have to redesign it?

    Hi there! I`d recommend you to try create website from a ready-made template rather than from very start-up. It`s much easier. I like website templates based upon Joomla http://www.templatemonster.com/joomla-templates.php . Feel free to address it and convience yourself it`s as simple as rolling off a log. Good luck!

  • What do I convert my swf website banner file to so it will work in websites displayed in mac and windows browsers?

    what do I convert my swf website banner file to so it will work in websites displayed in mac and windows browsers?

    If its animated you'll want to convert it to an FLV file and embed it in your webpage.
    http://www.ehow.com/how_6881535_embed-flv-video-html.html
    Otherwise a standard JPEG or PNG image file should suffice.

  • Is it possible to create Responsive websites with Adobe Muse?

    Hello,
    The question is in the Subject line.
    I would like to create Responsive websites in Muse so that they can flow to adjust to desktop > tablet > smartphone screen sizes, and I wondered if this is possible with Muse.
    Thanks,
    Chris.

    A little rant on this topic:
    "Responsive" works only so well. Very often a "responsive" web site can look like it wasn't designed for any screen at all; instead it ends up looking like a Microsoft Excel spreadsheet with a little better color and graphics. Nothing is ever really proper or composed. It's a page being Jack of trades and King of none. I look at a lot of those pages and just go "blah."
    We have very extreme differences in display resolution from one device to the next, both in terms of absolute pixel count and pixel density. There really is no way to accommodate them all properly unless you specifically design pages for each resolution -all with assets sized specifically for each resolution setting. Some people are still using old, outdated displays like 320x480 on an old iPhone or 1024x 768 on an old CRT monitor hooked up to some old WinXP system on its last legs. 1280x720 is common on a lot of older Android phones and old HDTV sets. 1920x1080 has become very common for new desktop computer monitors and laptops. 2560x1440 had been the highest pixel count one could see in a monitor, but that is now getting surpassed by 4K and even 5K displays. One of Dell's 15" notebooks has a 3200x1800 display. 4K UHDTV sets with 3840x2160 resolution are hitting affordable price levels now; most have built in web browsers. The newest 27" iMac has a 5120x2880 display. Add in the additional factor many desktop and notebook users don't have their web browsers filling the entire screen. I just don't see how someone can create a "one size fits all" approach to cover all of those different screen settings.
    Here's one thing I would like to see in the future: the computer industry settling on some screen resolution settings, screen orientation and aspect ratio. We wouldn't need "responsive" so much if various device makers would stick with some well established standards. We don't need oddball settings, like what Apple put out in its last two iPhone generations (640x1136, 750x1334 and 1242x2208). It's bad enough mobile devices capture a lot of vertical video. Too bad they're not designed to encourage users to hold the devices horizontally.
    I wouldn't mind seeing Muse add new features to help designs be more responsive. But I'd like to see more done in the way of improving SVG support (vector graphics scale up and down to any resolution). I'd also like to see Muse support HiDPI in more than just the 2x setting.

  • New to CS6 Dreamweaver, creating a "Responsive Website" having trouble getting fluid divs to behave

    Trying to create a "Responsive Website" and I'm having trouble getting my fluid divs that I create to "break" their link from the "Boilerplate" .
    I'm using a "Fluid Grid layout Div" to create a section that has a transparent background of rgba(0,0,0,0.3) and that's perfect, then I add two more "Fluid Grid layout Div's" inside the transparent one to create a 2-column part in the section and that's where the trouble is.
    None of the "formatting" I've set for the text in my ID's or Classes are being used - just reverts to what's in the "Boilerplate" i.e. "p,h2,h3" and I can't get it to "break" it's link the "Boilerplate" so I can apply my formatting.
    I have been able to select my formatting at times but it is ignored and uses what's in the "Boilerplate".
    Kept trying different ways to get it to work and now I've so many of both the ID's and Class's that their not all showing up as an option to be able select them.
    I'm missing something basic and after two days it still escapes me.
    Please somebody, tell me what I'm missing.
    Frustrated

    FluidGrid Layouts are not easy to learn.  You need a good grasp of fundamental RWD concepts including CSS Media Queries.  Keep your layout simple and be patient.  The first time I used FGLayouts, I had to start over 9 times before I got acceptable results.
    Responsive Web Design
    http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Best advice for beginners:
    Build Mobile Layout first.  Everything else is based on this primary layout.  Then build Tablet layout and finally Desktop.  Don't worry about content.  Just build the layout & save often during development.
    DO NOT TAMPER with the boilerplate.css or FGLayout.css code.  Even experts can break the layout in a hurry.  Use a separate external style sheet for content and typography styles.
    If you're using CS6 ver 12.0, you cannot nest divs inside other divs.  Everything must be inside the .gridContainer like this:
    <body>
        <div class="gridContainer">
              <div> </div>
              <div> </div>
              <div> </div>
        </div>
    </body>
    If you care to post a link to your online test page, we can take a look and possibly offer more suggestions.
    Nancy O.

  • Possibility to create full responsive websites with new features

    Hi guys!
    I think that Muse would be incredible and very professional if the develop team include the possibility to create full responsive websites, with no more problem even in the height of a site, expecially if you wanna create an horizontal scroll website.
    Another great fature is the Bootstrap 3, that could be used in some layout and templates... Add more widget, like in a CMS and obviously it would be great if you can use very full-responsive icons.
    What do you think about it, guys?

    Fully responsive would be great. 
    I love the new updates from Muse, especially the library, state buttons, and ability to create mega menus....   However, I've been building more of my websites with Wordpress due to the lack of Responsive design.  If Muse adds that capability, along with at least basic additions to the CMS (clients being able to add hyperlinks, link documents, modify H1,2,p text, etc), I'm likelly to go all in. 

  • Responsive Website Printing Issue

    I have created a Responsive Website in Dreamweaver CC.  I am trying to print a copy of the Desktop Version for my client.  When I print (I used 3 different printers and they all were the same), it comes out "mixed up" for lack of better terms.  It doesn't not look like the Website at all.  Any suggestions?

    Use your Print Screen key instead of printing from browser.  Ctrl+V into your favorite image editor.  From there you can print the screenshot in landscape mode.
    Nancy O.

  • Can you build Flash elements to work with responsive websites?

    Hey everybody,
    Just a quick question ...
    The company I work for is now starting to develop responsive websites and portals. We have several websites that utilize Flash and will continue to do so in the future.
    My concern is that the Flash components will not resize when the screen size shifts. Is this correct? Is there a way I can develop these portals/sites/components to behave responsively as the screen sizes change?
    Any and all advice is very welcome!!! Thank you in advance!!!

    If interested on moving to HTML5 from Flash,check out  this http://www.adobe.com/products/flash/flash-to-html5.html

  • IPad & iPhone not resizing video on responsive website

    On both iPad and iPhones, the video emeded in a RESPONSIVE website does not expand to the appropriate size, it remains at the default size. It was suggested that this is a problem with IOS6 and there is a workaroound using Canvas, which resizes the video screen to the appropriate size. However, when you use canvas to correct the video screen problem on the iPad and iPhone, Internet Explorer which does not recognize Canvas reverts to its default size. Is there a workaround that will solve both of these problems?

    Thanks tried that as well as a full restore of the iPhone.  This seems to be by design.  ITunes will not even sync the files to the iOS7 devices now.  Says the files will not be copied because they can not be played, but my iOS6 devices can sync them and play them.

  • Full responsive websites

    Does Adobe BC have any plans in the near future to include pre-coded responsive website templates built for the BC platform? If so, would that include a fully functioning online shop in responsive format...
    Can anyone shed some insight into how they are dealing with responsive websites integrated with BC modules like webapps, BC's online shop framework etc... any major pitfalls to look out for?

    It seems unlikely that will happen in the short term.  The current templates took a long time and some areas of those are haphazardly integrated.
    Responsive web requires planning on an individual site basis so it's hard to throw anything specific out there.  The majority of BC is fine, especially web apps being you're building them from scratch.
    eCommerce can be tricky in areas (shopping cart, order history, invoices etc.) just because they often need a bit of rebuilding as they're tables and tend to stretch the mobile boundaries.
    Some areas you need to make sure you get rid of the tables entirely by telling BC to use LI's in the module tag.
    Overall you just need to plan it out, perhaps build a couple of frameworks you can start from so the basics are there when you start a site.
    Scott Reynolds just did a responsive presentation on the BC Sandpile: http://www.bcsandpile.com/business-catalyst/resources.htm (Under previous sandpiles).
    Here is a site we finished early this month that is responsive and eCommerce: http://bit.ly/ZKKr1u

  • Using a photoshop image as a website banner

    I'm trying to use an image I created in photoshop as the banner for my website.
    I have it inserted into the header section in Dreamweaver, but the size of the image is fixed regardless of the window size.  I need it to adjust with the size of the header.
    I am very new to this, so I apologize if this is a dumb question.

    By default, images are static and don't resize to fill viewport.  If however, you put your banner into the background using CSS, you can repeat the image horizontally, vertically or both.
    See more on backgrounds:
    http://alt-web.com/Backgrounds.shtml
    Another trick is to surround your banner with compatible colors to make it seem bigger.
    Liquid Header CSS Layout:
    http://alt-web.com/TEMPLATES/I-page-with-floats.html
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • What do I need to learn to make a responsive website?

    Hiya
    Haven't checked in here for a few years.
    15 years ago or thereabouts, I learned HTML4  (from Castro's book) and hand-coded a website. I managed to create one CSS page.   Whoopee!
    Then I got DW4, and later an update. and that was SWELL.  And there's my level.  I'm not cutting edge, am I?
    These days I maintain a site for some friends, and they'd like to upgrade it.  Half an hour on Google learns me the term "responsive."  Looks like y'gotta be good w/CSS, and be doing HTML5.
    First question, is there a DW update, or any other WYSIWYG program that will convert an existing site into Responsive, or build one more-or-less the way DW does the HTML4 ones?
    Second question, if there isn't, what's the list of things I'd have to learn to reboot myself?  And any suggestion as to where/how?  Remembering what my level is....?
    Thanks
    denno

    Responsive Web Design (RWD) has some limitations.  Honestly, some web designers just can't do it because they're not willing to abandon old-school tables and/or compromise on their design ideas.  But if you approach this with an open mind and don't try to build anything too fancy or restrictive, RWD can be very rewarding. 
    Always consider your mobile users first.  They interact with their devices differently than desktop users.  For example, mobile users need less content and bigger, finger-friendly menus, buttons and forms.  There are volumes written about this subject on the web.  Spend some time learning the theory as well as the code before you dive in to your first RWD project.
    Start with these links:
    Responsive Web Design
    http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
    DW CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
    Good luck!
    Nancy O.

  • Website banner is not visible

    Some websites have their banner not visible.  I had an (old) G5 with Leopard that could not view certain banners. Not all, just a rare few.  While on the same network the iPad and Mac Book Pro had no problems, nor were there any with PC's at work.  Got a Mac Mini and, initially, I could see the banner.  Now, I guess after migrating info from the G5, I cannot see the banner again on the Mini.  Cannot seem to find out which setting/preference to change to fix this.  Any ideas?

    This may have something to do with needing to clear the Javascript exceptions log (http://www.tech-kitten.com/2007/08/31/javascript-not-working-in-safari-this-migh t-help/).  At least, it seems to make some sense as I had over nine years of use on the G5 and the Mini seemed to display it until I migrated a bunch of stuff over from the G5.  Unfortunately, I cannot get the debug menu to show up despite following these and other similar instructions.  Not sure I even want to try as this is definitely not my area of expertise and I do not want to make things worse.  Anyone have any suggestions on how to get to the debug menu?  Also, does this seem reasonable or am I going to create more havoc?
    Thanks.

  • Responsive Website Design & ReCaptcha

    Hi all,
    I'm working on a website that features a responsive design. We're currently using ReCaptcha in the Contact Form and on a desktop it appears fine but on a mobile platform, like an iPhone 5S, it's stretching the web form out of the boundaries it's meant to be limited to, causing the rest of the form to extend as well.
    Is there a way to adjust the ReCaptcha module so that it adjusts its size on mobile devices and appears correctly?
    I've found ways to "create" a responsive ReCaptcha (i.e.: http://jaicab.com/responsive-reCAPTCHA/) however that requires access to the code which we don't.
    Let me know if there's anything that we can do.
    Thanks

    That solution won't work as you know because we don't have access.
    You can inspect and override the captcha CSS. I have done that in some cases to make it look correct with a site. Can take some time to do but is possible with BC.

Maybe you are looking for