Highlighted

Adobe Dreamweaver—Responsive Web Design Issues

New Here ,
May 09, 2018

Copy link to clipboard

Copied

Good afternoon,

I am a graphic design student and I am working on a web design project using Adobe Dreamweaver.

I am fairly confident using Dreamweaver to create fixed layouts.

However, for this particular project, we need to create a fluid/responsive layout.

My professor indicated to use percentages as the measurements for width in order to make everything in our website responsive.

I have tried this approach for my body (where all my content goes) as well as my header area (a box), which was responsive.

However, trying this approach on imagery (i.e. logos, other imagery) did not work—it did keep my whole page proportionate as it is on the full page screen, but it really squished all my images so that the actual imagery was not proportionate at all.

I also tried using vw (varied width), but this also created the same issue as stated above.

My question is what is the simplest and most efficient way to create a responsive website? I have about a week and a bit to create a 4 page site and I need the most efficient and quickest way possible to create a beautiful responsive website.

Thank you in advance!

Views

822

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Adobe Dreamweaver—Responsive Web Design Issues

New Here ,
May 09, 2018

Copy link to clipboard

Copied

Good afternoon,

I am a graphic design student and I am working on a web design project using Adobe Dreamweaver.

I am fairly confident using Dreamweaver to create fixed layouts.

However, for this particular project, we need to create a fluid/responsive layout.

My professor indicated to use percentages as the measurements for width in order to make everything in our website responsive.

I have tried this approach for my body (where all my content goes) as well as my header area (a box), which was responsive.

However, trying this approach on imagery (i.e. logos, other imagery) did not work—it did keep my whole page proportionate as it is on the full page screen, but it really squished all my images so that the actual imagery was not proportionate at all.

I also tried using vw (varied width), but this also created the same issue as stated above.

My question is what is the simplest and most efficient way to create a responsive website? I have about a week and a bit to create a 4 page site and I need the most efficient and quickest way possible to create a beautiful responsive website.

Thank you in advance!

Views

823

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 09, 2018 0
Adobe Community Professional ,
May 09, 2018

Copy link to clipboard

Copied

Unfortunately, your teacher is giving you incomplete information. Simply slapping % or vh/vw (Viewport Width/Height) settings on all of your containers won't make the site responsive. It will make it "fluid" but that's only a portion of Responsive Website Design.

% can work for images, but typically not on a width setting. Using it on the max-width property is generally better since the image won't be able to grow past its natural size.

What you've likely run into are one or more "break points", where using percentage settings just doesn't work by itself anymore. That is where CSS Media Queries come into play for RWD. Media Queries, essentially, give the browser a new set of CSS rules to follow when the viewport reaches the defined size. That allows you to move things around, change padding, margins, sizes, completely reorder elements (in the case of flexbox) and much more, basically change any and everything available via css, so your site makes more sense on small screen devices.

Here is some good, basic info on MQs Responsive Web Design Media Queries to get you started.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 1
Mentor ,
May 09, 2018

Copy link to clipboard

Copied

If you can post a comp drawing of your desired layout, then I can tell you how to make it. I'm pretty good at it, too

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 1
Mentor ,
May 09, 2018

Copy link to clipboard

Copied

LOL, or you can listen to the "experts" here. You are in an unenviable position and will have to decide who sounds more earnestly willing to help steer you down a path you can handle.

Good luck.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
Adobe Community Professional ,
May 09, 2018

Copy link to clipboard

Copied

The OP said:

My question is what is the simplest and most efficient way to create a responsive website?

There are lots of ways to skin the proverbial cat.   You can use Bootstrap *my example*,  or code manually with CSS media queries, or use commercial templates from 3rd party companies like Projects Seven.   You have lots of options. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
Mentor ,
May 09, 2018

Copy link to clipboard

Copied

Sorry, Nancy. I know you mean well and that you believe what you say to be true. I simply believe that the worst possible way for a novice to approach responsive design is to use a framework. The words unwieldy and bloated kind of assault my sensibilities. And with a project due date hanging over the person's head, the timing for such a decision could not be worse.

I will bow out, as I do not want to create a debate. If the person wants my help, she is welcome to contact me directly. I would, however ask her what version of Dreamweaver she is using, the credentials of her instructor, and whether her "professor" has requirements she must adhere to for the project (such as using Bootstrap).

Good luck... again

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
New Here ,
May 09, 2018

Copy link to clipboard

Copied

The professor only went over using percentages for responsive website design and that is all—he suggested this is what we use, but it is sadly not working out properly.

I have never had the time or opportunity to experiment with Bootstrap.

I am using Dreamweaver CC, but have not updated yet to the most recent version.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
Mentor ,
May 09, 2018

Copy link to clipboard

Copied

If you can give me an idea of the layout in terms of rows an columns, I can probably get you started. You are also welcome to email me directly if it is convenient. It can sometimes get a little noisy around here. If you click on my name, you should be able to message me and I can provide you with an email address.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
Adobe Community Professional ,
May 09, 2018

Copy link to clipboard

Copied

Hello there,

this seems to me a problem more related to strict web design rather than software issue. By the way, maybe the best thing you can do for kickstarting your responsive web project, is trying frameworks like Bootstrap, Pure.css, Unsemantic and so on.

Most of them use css grids designed for mobile-first approach, so that you have responsive element at your fingertip.

If you use Dreamweaver, you may want to prefer Bootstrap, which is already into Dw with some useful templates.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 1
LEGEND ,
May 09, 2018

Copy link to clipboard

Copied

italosan  wrote

Most of them use css grids designed for mobile-first approach, so that you have responsive element at your fingertip.

Just so no one reading this gets the wrong impression, NO framework currently available uses css grids. They may use a grid for layout but that has nothing to do with css grids, (css grids is a w3c layout spec, just as flexbox and css tables are a w3c layout spec).

To the OP -

As your instructor told you to use % values, it may be that he/she means for you to produce a fluid layout and not a responsive layout, (they may not know the difference, as many posts in the Muse forum illustrates). Before proceeding further it may be worth clarifying.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
Adobe Community Professional ,
May 09, 2018

Copy link to clipboard

Copied

Copy & paste the following code into a new, blank document in Code View.

Save as test.html and preview in browsers.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4 Starter Page</title>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<!--Bootstrap 4 CSS-->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<!--Google Web font, serif-->

<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">

<style>

body { padding-top: 3.5rem;  }

.nav-link {font-size: 1.55rem; font-family: 'Frank Ruhl Libre', serif;}

.active {border-top: 4px solid #fff;}

/**placeholder image**/

.jumbotron {

    background: url(https://placeimg.com/1200/500/arch) no-repeat center center fixed;

    background-size: cover;

}

.jumbotron > .container {

    background: rgba(0,0,0,0.5);

    padding: 5%;

    color: #FFF;

}

</style>

</head>

<body>

<nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center fixed-top"> <a class="navbar-brand" href="#">Brand / Logo </a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">

<ul class="navbar-nav ml-auto">

<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

<li class="nav-item"><a class="nav-link" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>

<li class="nav-item"><a class="nav-link" href="#">Resum&eacute;</a></li>

<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

</ul>

</div>

</nav>

<main role="main">

<!-- Main jumbotron for a primary marketing message or call to action -->

<div class="jumbotron">

<div class="container rounded-circle text-center">

<h1 class="display-3">Hello, world!</h1>

<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>

</div>

</div>

<div class="container">

<!-- Example row of columns -->

<div class="row">

<div class="col-md-6 col-lg-3">

<h2>Column 1</h2>

<img class="img-thumbnail" src="https://placeimg.com/400/400/nature" alt="placeholder">

<p>Donec id elit non mi porta gravida at eget metus.  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>

<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>

</div>

<div class="col-md-6 col-lg-3">

<h2>Column 2 </h2>

<img class="img-thumbnail" src="https://placeimg.com/400/400/arch" alt="placeholder">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, placeat laboriosam! Incidunt dolorum doloribus nobis, ad, quisquam dicta ea et, quaerat. </p>

<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>

</div>

<div class="col-md-6 col-lg-3">

<h2>Column 3</h2>

<img class="img-thumbnail" src="https://placeimg.com/400/400/tech" alt="placeholder">

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. </p>

<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>

</div>

<div class="col-md-6 col-lg-3">

<h2>Column 4</h2>

<img class="img-thumbnail" src="https://placeimg.com/400/400/people" alt="placeholder">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, placeat laboriosam! Incidunt dolorum doloribus nobis, ad, quisquam dicta ea et.</p>

<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>

</div>

</div>

<hr>

</div><!-- /container -->

</main>

<footer class="container-fluid bg-dark">

<div class="row">

<div class="col text-center text-light">

<p>&copy; Company Name 2017-2018</p>

</div>

</div>

</footer>

<!-- Bootstrap core JavaScript

Placed at the end of the document so pages load faster -->

<!--latest jQuery Core-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--latest Bootstrap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 1
New Here ,
May 09, 2018

Copy link to clipboard

Copied

Good evening! Thank you for everyone who put in their input—but I received clarification.

I am looking to create a FLUID website!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
Adobe Community Professional ,
May 09, 2018

Copy link to clipboard

Copied

Add this to your CSS code.

img {

vertical-align: baseline;

display:block;

max-width: 100%;

}

Be sure to remove img height and width from your HTML code.

<img src="your_image.jpg" alt="description">

What this does: It down scales images on smaller devices but does not upscale them beyond their native size.   If the image is 400px wide, it will never be more than 400px wide.   There's less chance of distortion that way.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
New Here ,
May 09, 2018

Copy link to clipboard

Copied

Hi Nancy,

Will this apply to all images even though in CSS I have various class or id names for my various images and/or graphics?

So on all my images/graphics I take out both the height and width from within the coding (where the images are imported and there is the default height and size).

But am I still able to specify the height or size needed in the CSS for my various images/graphics (in the class or id name)?

Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
Adobe Community Professional ,
May 09, 2018

Copy link to clipboard

Copied

The img selector applies to all images unless you have done something to the contrary in your  ID or Class selectors.

Ideally you should optimize all images for the web in Photoshop before you insert them into your HTML documents.     Images should be cropped and resized to fit the largest target device.

As you gain more web experience, hopefully your instructor will introduce you to Retina-ready images with 1X, 2x, 3x  sized images and the SRCSET attribute.  In case s/he doesn't, you can read more about it below.

Responsive Images in CSS | CSS-Tricks  

Al Sparber's company, Project Seven, has a new commercial extension to help to take the sting out of this.

Responsive Images Toolkit for Dreamweaver

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
New Here ,
May 09, 2018

Copy link to clipboard

Copied

Thank you Nancy for informing me.

And yes I do optimize my images for web in Photoshop.

I make my images slightly larger than the largest target device or find issues with my images being not as clear due to them being 72DPI for web.

Thanks again!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2018 0
New Here ,
May 10, 2018

Copy link to clipboard

Copied

What about for the rest of my layout? My container as well as my type? Would I need to apply this same css too?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2018 0
LEGEND ,
May 10, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Ukie+princess  wrote

Good evening! Thank you for everyone who put in their input—but I received clarification.

I am looking to create a FLUID website!

Fluid layouts are not responsive layouts as one thinks of them when creating a responsive web design, (rwd) which may or may not require the use of media-queries.

Fluid layouts are more of an 'intermediate' stage, a brief overview of the difference between a fixed and a fluid, (sometimes called a 'liquid' layout) is described in this article -

https://theblog.adobe.com/creating-fluid-layouts-images-with-css/

If you are only creating a fluid layout, it is often necessary to specify a min and max width for the layout. This is because unless you use a css layout technique that allows your layout to 'flow' it will at some point 'break'. That point, (in both min/max width) is when one would normally start to use a media-query.

I suspect that your instructor will tell you to convert your fluid layout to a responsive (rwd) layout at some point in the future, once he/she has covered the use of media-queries.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2018 0