JavaScript, interrupting the delicate design

I added javascript on my site which is great and the site is still the answer, but I have to reload the page to see the site change proportions. Obviously, this is no right from the design point of view that the Web site will look terrible if you had to change your mode iphone portrait to landscape mode and site does not react until it is recharged. I think it might be a problem loading as I know that javascript increases the loading time of the Web sites. Take a look at btccs.co.uk and change the screen size and you'll see what I mean. Thank you

Massive distortion occurs when images are enhanced beyond their original size.  It's even uglier on ultra wide TV or multiple screens.  This is not a good practice.

Let's say you have a banner that is wide of 2000px.  The following CSS rule allows of descenders in proportion to the width of the viewport of the images, but high-end never beyond the native size of 2000px.

IMG {max-width: 100%}

The above rule is the default value in fluid grid Layouts + other executives RWD.  It works fine, I hope you don't ignore it in your HTML with the attributes height and width explicit img.

Nancy O.

Tags: Dreamweaver

Similar Questions

  • Merge the background image for the delicate design?

    Hi again,

    Is it a good idea to merge the background image if I design using delicate design? I notice after as I merge the image in the background the merged image don't like too good after it was merged compared to before.

    Thank you.

    In what context? You want that image to all slides? Use a substance in this case, you can choose an image.

  • How to make the delicate design with IE8 and 9 courses

    I created a course but all users receive errors because IE version. Some people cannot spend 10 or 11 for various issues.

    Hello

    Delicate design means HTML5 output only. And if you look at this link, you will see how the poor support of HTML5 is in IE8 and IE9.

    HTML5test - how well your browser supports HTML5?

  • Removal of the white areas 'gutters '? the delicate design desktop version.

    I used the checkerboard to fluid in Dreamweaver to create a sensitive site. When pages are displayed on your desktop, there is a white area "gutter?" on each side. I tried for hours to have the Web page full screen without the white area of 'gutter '. I included a photo of what is my problem. The questions do not arise on an Android based smartphone or tablet. I am also including the HTML and CSS code for the project. Any help would be greatly appreciated. HTML:

    HTML

    <! doctype html >

    < class html = "" >

    < head >

    < meta charset = "utf-8" >

    < meta name = "viewport" content = "width = device-width, original scale = 1" >

    < name meta = "description" content = "need of towing during normal hours or in case of emergency? Why not contact Mississippi best Noxapater wrecker towing and salvage company? ">

    < META NAME = "ROBOTS" CONTENT = "INDEX, FOLLOW" >

    < title > Noxapater, Mississippi | Towing | Emergency service 24/7. Tow truck & Salvage < /title >

    < link href = "boilerplate.css" rel = "stylesheet" type = "text/css" > "

    < link href = "noxwreck.css" rel = "stylesheet" type = "text/css" > "

    < link href =' http://fonts.googleapis.com/CSS?family=halant:700 ' rel = "stylesheet" type = "text/css" >

    < link href =' http://fonts.googleapis.com/CSS?family=Montserrat:700 ' rel = "stylesheet" type = "text/css" >

    < link href =' http://fonts.googleapis.com/CSS?family=actor ' rel = "stylesheet" type = "text/css" >

    < script language = JavaScript > var message = 'This is a copy-written site.'; function clickIE4() {if (event.button == 2) {alert (message); return false ;}} function clickNS4 (e) {if (document.layers | document.getElementById & &! document.all) {if (e.which == 2 | e.which == 3) {alert (message); return false ;}}}}}}} If (document.layers) {document.captureEvents (Event.MOUSEDOWN);} document.onmousedown = clickNS4 ;} Else if (document.all & &! document.getElementById) {document.onmousedown = clickIE4 ;} document.oncontextmenu = new function ("alert (message);} "return false") < /script >

    < script src = "respond.min.js" > < / script >

    < / head >

    < body >

    < div class = "gridContainer clearfix" >

    < div id = "LayoutDiv1" >

    Salvage and wrecker Noxapater < H1 > < / h1 >

    < table width = "95%" border = "0" >

    < b >

    < th = "12%" scope = "col" width > < a href = "such: 6627242000" > < img src = "images/callme.jpg" width = "100" height = "100" alt = "Click to Call" > < /a > < /th > "

    < th = "12%" scope = "col" width > < a href = "sms:6628038714" > < img src = "images/textme.jpg" width = "100" height = "100" alt = "Click for text" > < /a > < /th > "

    < th = scope '76% ' width = "col" > < FONT SIZE = "+ 6" > < FONT COLOR = "#FF0000" > 24/7 emergency SERVICE < / POLICE > < / FONT > < /th >

    < /tr >

    < /table >

    < br >

    < br >

    < p > the following is the placeholder text. < /p >

    < p > Lorem ipsum dolor sit amet, adipiscing elit our. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus and magnis say parturient go upstairs, nascetur ridiculus MUS Donec quam felis, ultricies nec, pretium quis, pellentesque EU, SEM Nulla MPCs massa quis enim. Donec queer justo, fringilla vel, aliquet nec, fitness eget, arcu. < /p >

    < p > enim justo, ut, imperdiet justo, vitae venenatis lectus. Nullam dictum EU gay of mollis pretium felis. Integer tincidunt. CRAs dapibus. Vivamus elementum semper nisi. Aenean tellus eleifend fitness. Aenean ligula leo porttitor EU, MPCs vitae, eleifend ac, enim. Ante lorem aliquam dapibus in, viverra quis, feugiat a, tellus. < /p >

    < p > Phasellus nulla ut laoreet metus varius viverra. Amongst rutrum. Aenean imperdiet. Etiam nisi vel augue ultricies. Curabitur ullamcorper nisi ultricies. Nam eget dui. Etiam lectus. Maecenas tellus eget, condimentum lectus, sem quam semper libero, sit amet adipiscing sem neque ipsum sed, tempus. Nam quam nunc blandit vel pulvinar luctus hendrerit id, lorem. Maecenas nec odio and ante tincidunt tempus. Donec vitae sapien ut faucibus venenatis libero. Nullam quis ante. Etiam sit amet orci eget tincidunt faucibus eros. Leo DUIs. SED fringilla mauris sit amet nibh. Donec sodales restore magna. SED MPCs, leo eget bibendum sodales augue total curriculum nunc < /p >

    < div class = "footer" >

    " < footer > © Noxapater tow and recovery / All Rights Reserved / this site is designed and maintained by < a href =" http://www.krissiecox.com/HTML/ ' > < color = "#CC00FF" > Benoit Cox < / police > < /a > < / footer > .

    < br >

    < / div >

    < / div >

    < / body >

    < / html >

    CSS

    @charset "utf-8";

    / * Simple fluids

    Note: Fluid requires that you remove the attributes height and width of the media of the HTML

    http://www.alistapart.com/articles/fluid-images/

    */

    IMG, object, embed, {video

    Max-width: 100%;

    }

    / * IE 6 doesn't support max-width so 100% width by default * /.

    . IE6 img {}

    Width: 100%;

    }

    H1 {}

    do-family: "Hauling", serif;

    font-size: 72px;

    margin-top: 0;

    padding-right: 15px;

    padding-left: 25px;

    Color: #000; / * black * /.

    text-align: center;

    background-color: #F90;

    }

    footer {}

    do-family: "Montserrat", without serif.

    do-size: 16px;

    margin-top: 0;

    padding-right: 15px;

    padding-left: 25px;

    color: #C60; / * orange * /.

    text-align: center;

    }

    {p}

    do-family: 'Actor', without serif.

    do-size: 22px;

    margin-top: 0;

    padding-right: 15px;

    padding-left: 25px;

    Color: #000; / * black * /.

    text-align: left;

    }

    /*

    Properties Grid Dreamweaver fluid

    ----------------------------------

    DW-num-CLO-mobile: 5;

    DW-num-CLO-Tablet: 8;

    DW-num-OCOL-Office: 10;

    DW-gutter-percentage: 25;

    Inspiration of "Responsive Web Design" by Ethan Marcotte

    http://www.alistapart.com/articles/responsive-web-design

    Golden by Joni Korpi grid system and

    http://goldengridsystem.com/

    */

    / * Mobile layout: 480px and below. */

    {.gridContainer}

    left margin: auto;

    margin-right: auto;

    Width: 87.36%;

    padding-left: 1.82%;

    padding-right: 1.82%;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    / * Tablet Layout: 481px to 768px. Inherits the styles of: Mobile layout. */

    @media only screen and (min-width: 481px) {}

    {.gridContainer}

    Width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    }

    / * Office Layout: 769px to a maximum of 1232px.  Inherits the styles of: Mobile and tablet. */

    @media only screen and (min-width: 769px) {}

    {.gridContainer}

    Width: 88.2%;

    Max-width: 1232px;

    padding-left: 0.9%;

    padding-right: 0.9%;

    margin: auto;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    }

    kcox.jpg

    Modify the Office css media query to:

    @media only screen and (min-width: 769px) {}

    {body

    margin: 0;

    padding: 0;

    }

    {.gridContainer}

    Width: 100%;

    margin: auto;

    padding: 0;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    }

  • Purpose of having 'Phone' &amp; 'Tablet' put in now the delicate design is an option?

    title asks this.

    I made a model of mobile and office semi-responsive in old Muse (using text boxes 100 %W).

    Now with a reactive full provision finally came (best shot than ever muse) is there a point in having other layouts? A mobile phone dimensionnera just the "desktop" version just sensitive measure?

    Y at - it an easy way to merge the phone and layouts Office together and simply use a reactive trace?

    Thank you!

    PS This is my first question in the Adobe forums

    Hi Larry,

    First of all, welcome to the community forums of Adobe muse.

    There are many differences between the (unfounded) Muse reactive and Adaptive

    However, to put this short a major difference between the two.

    • In sensitive version of Muse, scrolling effects do not work
    • Not all widgets are still sensitive

    because of the above limitations, we have retained two options open.

    And Yes, you can easily convert an existing schema of Muse in sensitive

    Look for this tutorial migrate from replacement for reagent in Muse track of relevant information.

    Best regards

    Ankush;

  • convert a static HTML site in delicate design using the flow layout

    I am trying to shoulder the heavy task of converting my art HTML website to a delicate design especially to appease Google mobile friendly guidelines. I tried first of all to make a new model which was a design liquid three column. I tested successfully, and my editable region has worked very well in the new design. I still have the same problem with Google, it seems that I must do this sensitive technique of fluid page layout. I'll always be able to use my editable region in this technique? It is hard to tell by the tutorials, and I don't understand it as well as the approach of model I used for 10 years. I have over 1000 pages, so I need to know.  My site is http://shawnmcnulty.com

    I mean no disrespect here.  But building responsive web sites is an art.  You must understand the various technical and aesthetic challenges that go into making a good responsive website.

    Mobile users interact differently with their devices.   They need friendship finger and images that are of suitable size for their devices, including the retina / poster of high pixel density.  More important still, mobile users don't need or want to strip excessive bandwidth & too much information.   Content must be streamlined for these devices.   A careful thought and planning goes into a sensitive project.  It is not something simply slap you with widths % & say "I'm done."  It is much more than that.

    You have a wonderful art collection.  Don't short change yourself with a poorly designed, tout-pour-le-amour-de-Google Web site.   You deserve a better product than that.

    Stay away from fluid grid Layouts (inheritance).  They are removed from DW because they are not a good solution.

    Hire a web professional experienced to help you rebuild your site with versicles with databases and a content management system.  IMO, anything less will be a wasted effort.

    Nancy O.

  • If I create a Web site now I will need to redraw it when the new version of delicate design comes out?

    If I create a Web site now I will need to redraw it when the new version of delicate design comes out?

    A sensitive site may be derived from the version of your office, but of course, you will need to put in some work to determine behaviors for other devices. There is no "one fits all", without worrying whether sensitive or selective.

    Mylenium

  • Models of delicate design Landing Page?

    I see the new models of mail electronics delicate design, thank YOU. Is there a date we would expect at reactive we could match the landing page templates?

    We are witnessing a number of our users not only to read the emails, but also refer to the arrival on mobile pages.

    Hi Shane

    I had the same problem, I brought a model of landing page on themeforest who met and transferred then as a model in Eloqua.

    I then removed the shape on the stencil and added an Eloqua shape, the result is a sensitive Eloqua landing page.

  • Muse with delicate design update

    Hi, can someone tell me when the new version of Muse with delicate design is due. I want to build a Web site, but do not want to start until this feature is available. Thank you

    Reactive Adobe Muse CC 2015 is now online. Please install the update of CC > Apps.

    What's new: news summary

    Release notes: https://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html

    Delicate design:

    Adobe help Muse | Create responsive Web sites

    Adobe help Muse | Responsive web design in Adobe Muse

    Adobe help Muse | Migrate existing Adobe Muse Web sites to answer

    Tutorials

    To get started with Adobe Muse (replaces how to make a website with Adobe Muse (coffee of Katie)):

    - https://helpx.adobe.com/muse/how-to/create-responsive-website.html

    Create a sensitive webpage with Adobe Muse:

    - https://helpx.adobe.com/muse/how-to/responsive-web-design.html (more detailed features RWD of Muse demo)

    Thank you

    Sanjit

  • Delicate design seems not... answer?

    Just try new models of delicate design in DW15. I used the template 'About' to create a page and simply downloaded on our test as-is, no change when creating DW server.

    When you view it in DW, it seems to respond very well, for example when I change the view to "iPhone 5" reorganized the page. However, when I look at it with a real iPhone, the phone simply crunches the page down to fit rather than reorganize as it does in the editor.

    You can see the test page at http://dev.Addy.com

    What's not here?

    Hello

    There is lack the following meta tag in your page:

    Add it after the openingtag of your page.

  • ON ADOBE MUSE &gt; &gt; this software has delicate design? Should I pay...

    This software has delicate design? Do I have to pay a fee to use the software and another tax to host the web site? How much it costs to have a website published in Muse and published by Adobe server?

    Hi Leonard,.

    Adobe Muse cannot generate sensitive HTML, but you can create different layouts of the same site for office, tab and telephone.

    You can purchase a single subscription Muse and hosting for 1 Web site on the service of catalyst for business, no need to pay anything more.

    If you will buy creative cloud all the subscription apps, then you're going to get hosting for up to 5 websites on Adobe Business Catalyst.

    Muse app unique monthly a year package would cost US $14.99 in North America.

    Please check the pricing from here: https://creative.adobe.com/join/single_app/year/muse

    Thank you.

  • Impossible to import PowerPoint in the sensitive design template

    Hello

    I have a PowerPoint to be converted to a sensitive design project. I noticed that when I create a new project of delicate design, importation of PowerPoint is greyed out.

    Is this normal?

    Also if I create a Captivate project basis, is it possible to convert a sensitive project if a customer decides they need, without a complete rebuild?

    Thank you

    It is not possible to import Powerpoint slides into a sensitive to all project, makes sense to me but will not bore you with an explanation. The technique, the programming is so different. The planned themes are sensitive, PPT is not.

    Same negative answer your second question, for the same reason. You can use the assets of the PPT, but will need to create your own sensitive project.

    Lilybiri

  • Muse teaching for delicate design?

    I teach a course of autumn where designers (not programmers) will create their own portfolio websites. I want to that they also build as sensitive sites. If I use the Muse for the course, this is on Adobe hosts the site to ensure a reactive capacity? Alternatively, students allows the reception of their choice?

    Reactive Adobe Muse CC 2015 is now online. Please install the update of CC > Apps.

    What's new: news summary

    Release notes: https://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html

    Delicate design:

    Adobe help Muse | Create responsive Web sites

    Adobe help Muse | Responsive web design in Adobe Muse

    Adobe help Muse | Migrate existing Adobe Muse Web sites to answer

    Tutorials

    To get started with Adobe Muse (replaces how to make a website with Adobe Muse (coffee of Katie)):

    - https://helpx.adobe.com/muse/how-to/create-responsive-website.html

    Create a sensitive webpage with Adobe Muse:

    - https://helpx.adobe.com/muse/how-to/responsive-web-design.html (more detailed features RWD of Muse demo)

    Thank you

    Sanjit

  • The use of JavaScript with the desgin-time properties

    Hi all

    I have a form with a few text fields. I would like to be able to update their legends by programming using JavaScript at design time.

    I don't know how to approach the design time objects.

    Any help would be much appreciated.

    Kamil

    At Design time you genrally cannot run JavaScript in the designer.

    The only option would be a macro, that requieres Designer ES2 or the designer of the ADEP.

    A macro is a javascript file, which is stored in a subfolder of the program folder, which can be performed at the time of design.

    Here's a macro with a flex dialog box I designed to manipulate fields at design time:

    http://thelivecycle.blogspot.com/2011/06/field-designer-macro.html

  • Want to make a "new user" form in Acrobat using the Forms Designer, I'm going about this wrong?

    Hi all, I work in a small company and would like to have a generic template that back to new users when they start. He practices the company base on internet usage, storage of base directory, login, etc... I want that last page of a form that I fill to contain their user name, password, telephone etc... I've implemented the shape makes a .pdf file and used the form designer to implement the fields I want to have active. Now I don't know what to do. I deally, I want save a copy of the file for each user in a network folder, with their information on this subject, and the form fields locked after I'm done. I've been playing with the distribution of forms and appear not to do what I want, looks like it creates a single file with all the different updates. I want possible, or can I just keep the shape of the United Nations distributed and open / save for each user and hope that they erase their data?

    Any help would be appreciated to gratly! Thank you!

    Yes, for what you want to do create the form in Acrobat is the best way to go. Here are a few tips.

    1. to flatten the page that contains the form field, use the flattenPages method. It is documented here: http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.466.html

    So to flatten the last page of a document, you should do something like:

    Convert fields on the last page to the other content

    flattenPages ({start: numPages - 1});

    For more information, see the tool flatten Page content that you can download here: http://www.pdfscripting.com/public/65.cfm

    2. to save the changes in a new document, you can do this:

    Trigger the menu item save as

    app.execMenuItem ("SaveAs");

    It will require a location and a name of daughter. More information: http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.143.html

    These two lines of code provide the minimum stripped for what you want.

    For the backup operation, you probably want to eventually create your own routine to SaveAs in a JavaScript file to the folder level which also contains the code that implements a custom toolbar button that implements this.

    For example (method addToolButton): http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.134.html

    and (trustPropagator for example of method w/save as): http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.168.html

    and (method trustedFunction): http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.167.html

    Create your own routine to SaveAs to silently save the file to the desired location by using a file name based on the content of one or more form fields, for example.

Maybe you are looking for