Participating Frequently

Question

Adobe Dreamweaver—Responsive Web Design Issues

Forum|Forum|7 years ago
May 9, 2018
5 replies
2808 views

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!

This topic has been closed for replies.

Ukie princessAuthor

Participating Frequently

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

I am looking to create a FLUID website!

Nancy OShea

Adobe Expert

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— Product User, Community Expert & Moderator

Ukie princessAuthor

Participating Frequently

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!

Nancy OShea

Adobe Expert

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

Save as test.html and preview in browsers.

<!doctype html>

<head>

<title>Bootstrap 4 Starter Page</title>

<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>

<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é</a></li>

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

</ul>

</div>

</nav>

<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 »</a></p>

</div>

<h2>Column 1</h2>

<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 »</a></p>

</div>

<h2>Column 2 </h2>

<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 »</a></p>

</div>

<h2>Column 3</h2>

<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 »</a></p>

</div>

<h2>Column 4</h2>

<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 »</a></p>

</div>

<hr>

</div>

</main>

</div>

</footer>

<!-- Bootstrap core JavaScript

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

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

italosan

Adobe Expert

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.

pziecina

Brainiac

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.

ALsp

Brainiac

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

ALsp

Brainiac

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.

Nancy OShea

Adobe Expert

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— Product User, Community Expert & Moderator

Jon Fritz

Adobe Expert

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded