Responsive Design

Six months ago I purchased Dreamweaver CS6 to have my site more interactive, i'm new to Web Development. I currently ran into a slight IE 7 & 8 comp ability issue with DWCS6 and CSS3.
My computer system is Windows 7 with IE9, so when testing my new site all went well, until I uploaded and learned about Internet Explorer Developer Tools, which has cross browser mode to test IE 7 & 8 versions.
Unfortunately my site shows phone view first, I’m using Dreamweaver Fluid Grid Responsive Design System, which gives 3-layouts, phone-tablet-desktop.
For the past month my reasearch is circling to no avail, I have tried many methods on the net , but none seems to be working.
I have learned that “html5shiv.googlecode.com/svn/trunk/html5.js" and "respond.min.js”
are not working properly with my site ( in IE 7 & 8).
May I humbly request your assistance with resolution to these issues?
www.angelsbyangels.com
Thank You,
mlfa

It's really a waste of time to make a site responsive for old browsers.
The hacks required are not simple and tend to add to an already bloated
approach by Adobe. Concentrate on modern browsers and, of course, mobile
devices.
Unfortunately, there is little consensus on best practices for
responsive design - primarily because the methods are evolving
constantly. It is very easy to happen upon an out of date article, which
is probably how Adobe developed their Fluid Grid monstrosity
But if you have a problem with a particular page, you really need to
post a link to a live page or it will be nearly impossible for anyone to
help you.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Tools
Since 1998

Similar Messages

  • How to add multiple presets to responsive design view without having to resize the screen each time

    I want to be able to add multiple screen size presets to the responsive design view capability but don't want to have to resize the screen and add each one individually via the custom preset function.
    Have seen that some posts on the internet (http://g-liu.com/blog/2013/08/firefox-rdm-presets/) that say this can be done but cannot find where the config is held in ver 26.0?

    You can also do the opposite and create custom settings in the responsive design mode window.
    You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
    This will add the preset to the devtools.responsiveUI.presets pref.
    See also my post here for a bookmarklet.
    *[[/questions/957590]]
    You can paste the current value of the pref in the prompt to see a list of currently defined presets.<br />
    You can add a new preset by entering the width,height,name values in the prompt.<br />
    Copy the new preset list to the pref.
    <pre><nowiki>javascript:(function(){
    function rdObj(w,h,n){with(this){key=w+"x"+h;if(n)name=n;width=w;height=h;}}
    rdObj.prototype={key:"",name:"",width:"",height:""};
    var n={},p='<width>x<height> <name> OR width,height,name',rd=[];
    while(p!=null){
    p=prompt(p,JSON.stringify(rd));
    if(/^(\d{3,4})[,x](\d{3,4})([, ](.+))?$/.test(p)){
    n=new rdObj(RegExp.$1,RegExp.$2,RegExp.$4);rd.push(n);
    }else{try{rd=JSON.parse(p);}catch(e){}}
    }})()</nowiki></pre>

  • Responsive design project not working in Opera or Chrome

    My Captivate project in responsive design is only previewing in Internet Explorer. I have also uploaded the projects to my server and am having the same problem. Why is this?

    Hi,
    Chrome 36 has some issues with captivate  html5 output. Please find the following workaround to fix the issue.
    http://blogs.adobe.com/captivate/2014/07/update-on-captivate-html-5-content-playback-issue -in-google-chrome-browser.html
    Let me know if this fixes the issue.
    devraj

  • Slideshows in responsive design

    Making responsiv designs in Dreamweaver has become easy but if you want to make a webpage with a full page slideshow optimized for ordinary screens and high resolution screens (Retina) you must have images of a rather large size. So if you have images that fit eg. the new 30" Apple Retina display an Iphone must download the same images and downsize them to fit the phone display. What I'm concerned of is the pageload time. I know that Muse automatically downsize images in the different layouts but Muse doesn't do true responsive design.  My question is then - is it possible to have the same slideshow pointing to different folders with images of more appropriate sizes?
    Or is the solution that you make 2 or 3 slideshows on the same page and then in CSS hide (display: none) the slideshow that is not needed? But if an element is hidden, isn't it loaded anyway?
    Or are there other solutions?
    Best regards Jørgen

    Never tried this myself but I guess appending the images using jQuery based on screen width might work: If screen width is more that 500px the appropriate 'desktop' img is appended to its <li></li> container, else a smaller image is appended to it.
    Might be a good reason this won't work just thinking off the top of my head. (I don't know if all the images are download when the document is ready or just those that conform to the screen width.) Someone will have a view.
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta ="charset=UTF-8">
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function() {
    if ($(window).width() > 500) {
    $(".slide_1").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_2").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_3").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_4").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_5").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_6").append("<img src='desktopImages/slideshow_1.jpg' />");
    else {
    $(".slide_1").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_2").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_3").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_4").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_5").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_6").append("<img src='mobileImages/slideshow_1.jpg' />");
    </script>
    <style>
    ul {
        margin: 0;
        padding: 0;
    li {
    margin: 0;
    padding: 0;
    list-style: none;
    </style>
    </head>
    <body>
    <div id="slideshow">
    <ul>
    <li class="slide_1"></li>
    <li class="slide_2"></li>
    <li class="slide_3"></li>
    <li class="slide_4"></li>
    <li class="slide_5"></li>
    <li class="slide_6"></li>
    </ul>
    </div>
    <!-- end slideshow -->
    </body>
    </html>

  • Responsive design mode is showing part of pages and is not showing any optomized pages even in safe mode.

    I need to check multiple websites everyday for responsive design. When I open Responsive design mode I am getting full pages on every site, even ones I know are mobile opt. No matter how I scale it everything remains exactly as it is. I have to scale it to the far right to get the whole page. Basically the pages are always in full screen and I'm getting a window that only allows me to see part of a page. It is very frustrating.
    Win xp
    firefox V28.0
    I am not a coder so please keep solutions simple.

    From your screenshot, it seems to be working, as that grey bar has appeared at the top (with a link to the mobile version of the site). This only appears when the viewport width is 800px or less. This support website doesn't shrink dynamically (as the viewport gets smaller), but remembers whether your machine has a small screen or not (probably by storing a cookie which is changed when you click the link in the grey bar).
    If you are having trouble with other sites, have you tried refreshing the page after resizing? When I have created responsive websites I often have to use JavaScript for a few features, and it simply isn't worth the processing power to make the code run every time the window size changes. Other than that I can't see what would be causing the problem (unless there is other important information you may have missed out)

  • Chain of Responsibility Design Pattern

    Is there any java api which helps in implementing Chain of Responsibility Design pattern by parsing a XML file?. Can I use XML file to do this in Apache Commons Chain API?

    A quick look at the javadocs for that project suggest that, yes, indeed they do provide a way to specify a chain of command using XML.
    In fact I'm kind of confused why you even asked this question, since you already seem to know the answer.
    I've never heard of such a thing in the standard API, if that's what you're asking, probably because it's a simple pattern to implement, and most of the pain of any implementation is likely to be due to details specific to the problem domain, not the pattern.
    If you're really eager to use XML, you might want to check out Spring. You could configure a bunch of beans in a chain, if you like.

  • Advice sought re converting existing Bc site to a responsive design

    Hi,
    I read today that Google is shaking up its search rankings to favour mobile-friendly sites.
    I have an existing e-commerce Bc site (fixed width) that I'd like to convert to a responsive design. At the moment I don't have the time to do it myself because I'm working on another business, while running the existing one, and wondered if anyone could offer any advice?
    What I'd like is not a whole redesign (I'm happy with the look and feel) but simply to convert it to make it responsive (and to include an elegant solution for making the tables on the site responsive too).
    I was thinking of using 99designs, or something similar, but maybe there's a better way?
    Site: http://tinyurl.com/mtknz5b
    Kind regards,
    Frank.

    Hi Frank
    i see you are in Sheffield I'm just south of Glasgow
    i can quote you on this if you're open to it
    Would recommend foundation framework.
    We are a partner with a lot of site development and do BC exclusively.
    www.platonik.co.uk
    regards
    Fraser

  • How do I make my text centered when making a site have responsive design?

    My text can be responsive with screen size in the font automatically adjusting its size when you make the window different sizes and everythng flows nicely. The only problem is that no matter what size the window is, the window only shows a corner of the website, having part of the website cut off, making the viewer scroll right horizontally to read the rest of the text. I am new to responsive design. (I am a college student that haven't taken web design since last year, just to note).
    I try to change the padding and margin of where I have my text yet nothing changes and I still have the same problem.
    Below is the CSS style for where I have my text located:
    .textboxinfo {
        background-color: #FFFFFF;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        height: 100%;
        width: 100%;
        right: auto;
        margin-left: 260px;
        margin-right:300px;
        float: left;
        padding: 15px;
        color: #333;
        padding-right: 500px;
    Am I looking in the right spot?

    You cant have a box width set to 100% and left and right margins set as well as that makes the box wider than 100% which means it's wider than the browser width;
    What happens when you remove - margin-left: 260px; and margin-right:300px; from the css selector below?
    So you are just left with:
    .textboxinfo {
        background-color: #FFFFFF;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        width: 100%;
        float: left;
        padding: 15px;
        color: #333;

  • Cannot Import PowerPoint into Responsive Design Template

    Hi,
    I have a PowerPoint which needs to be converted to a Responsive Design Project. I notice that when I create a new Responsive design project, the Import PowerPoint is greyed out.
    Is this normal?
    Also if I create a basic Captivate Project, is it possible to convert it to a responsive project if a client decides they require this, without a complete rebuild?
    thanks

    It is not possible to import Powerpoint slides in a responsive project at all, seems logical to me but will not bother you with an explanation. The technique, programming is so different. The provided themes are responsive, PPT is not.
    Same negative answer for your second question, for the same reason. You can use the assets from PPT, but will have to create your own responsive project.
    Lilybiri

  • Why can I export (and import)the different sizes that I put in the "Responsive Design View"?

    Hello
    I have troubles when try to import or export the different sizes of the Responsive Design View, I manage at least 13, and it's a little preposterous to add one by one. There are a method that export/import them?
    Thanks

    There is a way to store custom settings for responsive design.
    You can create custom settings in the responsive design mode window.
    You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
    This will add the preset to the <b>devtools.responsiveUI.presets</b> pref that you can inspect on the <b>about:config</b> page.
    Those settings are stored in JSON format.
    <pre><nowiki>[{"key":"360x640","width":360,"height":640},{"key":"768x1024","width":768,"height":1024},{"key":"800x600","name":"8x6","width":800,"height":600},{"key":"800x1280","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]</nowiki></pre>
    See this thread for some JavaScript code to add extra sizes:
    *[[/questions/957590]]
    You can paste the existing JSON value of the devtools.responsiveUI.presets pref in the prompt and click OK.
    Extra values can be added by typing its dimensions (<width>x<height> <name>).
    You can paste the resulting JSON value back to the devtools.responsiveUI.presets pref or save it.

  • Getting an error when working with Responsive Design Output: MasterThemeSchema.xml

    When generating a Responsive Design HTML 5 output, I'm getting this error:  "MasterThemeSchema.xml file has invalid data." I am unable to  access the manage layout features now to continue my customizations.  I had imported a customized font before seeing this message. I'm moved the project to my harddrive, where the software is installed, and and still getting it (I know RH doesn't always do well on a network drive).  Any ideas?

    I searched this blog for similar posts and found posts that described similar issues.  I ended up moving my RH project file to my local drive, deleting the masterthemeschema.xml, and replacing it with another masterthemeschema.xml from another project via Windows Explorer.  I will recreate my customizations and hope for the best.  Any ideas on what causes this corruption of the mastertheme schema files in the first place?  Does this masterthemeschema.xml error only occur when working on a network drive and not local?

  • All or None Responsive Design

    Here's the thing - when you have some objects (text boxes) that are responsive, but the webpage they are built upon is not, you can end up with some seriously frustrating issues, such as objects moving from their X/Y coordinates from design to preview to published. If I put something at nX and nY, I wanted it right there in relation to the the page I placed it on. I don't want it moved by x pixels because on page A there was a scroll bar and on page B there was not.
    The issue also causes objects to randomly resize and shift even when a scroll bar is not at issue, skewing carefully laid design elements and causing no end of frustration.
    So, if, as I've read here and elsewhere, Muse has no intention of creating responsive design for whole pages, then the responsive elements within static pages need to be an option, not the default with no way to create a static design.
    Thanks!

    Intractable,
    Kind of in a rush today, but I promised a rationale for why iTunes U is working as intended…why what you get is really more of a feature and less of a bug.
    Consider a site that is private and has content that should only be viewed by people who first authenticate to a portal website. For example, at your school, you might want to limit the content for a particular course to the people who are enrolled in it. If you could interrupt a download, and later restart it, then it would, conceivably, be possible to get access to content that you are no longer entitled to have. A public (non-iTunes U) podcast is different. People who podcast that way have absolutely no control over who may access content and for how long that access can persist. That is why such sessions do not time-out.
    iTunes U sessions have fixed durations in order to protect your content…the content that you want to keep private. The downside is, of course, that if you cannot get content after a fixed time, you will have to reestablish an authenticated iTunes U session. This is similar in concept to what a lot of banking websites do…if you let any web session go unattended for five minutes or so, the bank's website invalidates your web session so-as-to protect your account.

  • Responsive Design Help

    Hi. I have a website called e okul dostu. The adress for my site is http://eokuldostu.com Currently I would like to know how it looks on iPhone. It is responsive design but I am not sure if it is the right choice. Your opinions are valuable for me. If you say that the site does not look good as responsive then I will change the look. Thanks in advance.

    Pretty sure you probably have an empty box or text box or other element that is off the page causing the shift.
    On the pages that have a problem (templates too) do a select all to highlight all the content and see if there is any empty elements outside the design.

  • Reset defaults to responsive design view

    I have mistakenly removed presets in the "responsive design view" option found under "Web developer" option in menu. Is there a way to bring them back. I don't wan't to reset my firefox to factory settings.
    Any help shall be appreciated.
    Thanks

    Resetting is the best way to restore what you lost.

  • CP8 Can responsive design projects be saved as a template?

    Can I build layouts in the responsive design three views that contain branding and formatting and then save it as a template for other designers to use?

    No, the option Save as template is only available for normal projects, not for responsive projects.
    Formatting, objects on master slides, skin editor can be saved in a theme, you don't need a template for that. Be sure to start from one of the included responsive themes.

Maybe you are looking for

  • Windows XP crashes and system restarts when I try to open Itunes 6

    I tried to ask the people at Apple support what was going on. But they didn't seem to know. My system restarts when I try to open Itunes. It does it with the factory software I recieved with my 5g Ipod Video. It also does it with any updated version

  • Is there a way in LR to tell what color space a photo is stored in?

    I have a lot of 16 bit Tiff files in my Lightroom library.  I am looking for an easy way to determine what color space has been assigned to them.  The only way I know to find out is to open them in Photoshop.  Does Lightroom have a way to tell me?  T

  • Substitution in PS

    Hello Experts, I am creating a substitution in PS for network activity using transaction OPSN.  Whenever we create a step, a popup comes up with fields which are available for substitution. I need to substitute network activity field AFVGD-ARBEI with

  • Add to Favorites Email Font Mystery

    I deleted a bunch of font 'favorites' -- by dragging them off the list in the email fonts screen -- but although their names are gone there is a Blank Space where they use to be; if I click on that blank space the font (the font I thought I deleted)

  • Problem in editing drawn shape...

    Hi. I have to complete my project. The work is to create drawing tools graphical editor. I'm new to java and I have some problems with this job, so I'm looking for help where it is possible... I created basic shape and fiiled shape.the problem is i d