• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

I am trying to make a 1 column responsive website...?

Explorer ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

In continuation from my topic last month, since no one was able to help me solve that problem (although if possible it will still be even more useful to me), I have made the decision to create a responsive website.

With a 1-column website, if I start with making it a static website, what would I need to add to the code to make it completely responsive? Basically, I have a website that is static. 1-column, everything neatly arranged, basically designed entirely for mobile usage. The only problem is, it isn't prepared to act responsively. My content consists mainly of text and images. Images should fit %100 of the width of my site, as should my text, I suppose.

What do I need to add to my code to make this a responsive website?

I am a beginner, more or less. Please explain in detail if you can.

The reason for starting with a static website first (although, I was designing it for mobile) was to create copies of the pages with and without a responsive design. That way I could serve the responsive site to mobile devices and the static version to desktop computers.

Now, is their any drawback to adding the responsive code to a 1-column website afterward? That being, as opposed to using a responsive/bootstrap template from the beginning?

Basically, do I risk it not being compatible with all devices for any reason?

Thank you to anyone who can help me solve this problem I am having.

-Lizzie Jo

Views

908

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

correct answers 1 Correct answer

LEGEND , May 20, 2017 May 20, 2017

Lizzie_Jo_Websites__11  wrote

You told me the forum wasn't the place to learn responsive design in your first post, so where do you recommend that I go?

I will attempt the code you provided os_good. I will return with the results. hopefully that is something that will suffice. I am starting to look into some other "responsive/bootstrap" possibilities as well. I am a very fast learner, all I need  is someone willing to teach me.

The place to learn rwd is, (only my opinion) a good book on the subjec

...

Votes

Translate

Translate
Community Expert ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Designing for mobile, tablet and desktops is a complicated process that entire books and multiple hours of online tutorials will describe in depth.   That's beyond the scope of this forum. 

If you want your 1 -col layout to be responsive, use % width.  But it's going to look really terrible on ultra wide displays. 

I prefer to make multiple columns on wide displays that reduce down to 2 columns on tablets and 1 column on mobile phones.  It's a better user experience for everyone.   See image below for a demonstration of what I mean.

https://www.w3schools.com/bootstrap/imgdefault.jpg

And this is achieved with CSS Media Queries either custom coded or using a responsive layout system like Bootstrap.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

I think there must be a misunderstanding here. From what I have heard/seen, this is really not that difficult at all. Difficult for me to understand, yes, but not for someone who knows what they are doing and can teach me. Online web builders such as Wix and Weebly have easily accomplished what I am talking about, but I want to try this myself, as I do not trust such website builders servers.

Why would it look terrible on ultra wide displays? Could you give me an example...?

Votes

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
community guidelines
Community Expert ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Show us your current code.

Weebly and Wix use very sophisticated backend programming and scripts to make their web sites responsive on all devices.  You never see the code they use because it's all done on their end.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

That is not entirely true... Weebly allows you to edit their HTML/CSS in full. Unless you mean something else, but you have complete access to that, and the ability to export your site. I have played with that before, and it makes too much of a mess with Dreamweaver, but from what I tested it is very possible.

I don't have that code, outside of my last topic where we left off. As far as we need to be concerned, I have an image of 1920x1080 dimensions, and plain simple text. When taken to the internet, it displays naturally at a 1920 x 1080 ratio. I can zoom in and it gets bigger. I can zoom out and it gets smaller. It does not do any adjusting whatsoever.

A basic Dreamweaver HTML file with a 1920 x 1080 image inserted, and a paragraph of text beneath that.

Votes

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
community guidelines
LEGEND ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Lizzie_Jo_Websites__11  wrote

That is not entirely true... Weebly allows you to edit their HTML/CSS in full. Unless you mean something else, but you have complete access to that, and the ability to export your site. I have played with that before, and it makes too much of a mess with Dreamweaver, but from what I tested it is very possible.

I don't have that code, outside of my last topic where we left off. As far as we need to be concerned, I have an image of 1920x1080 dimensions, and plain simple text. When taken to the internet, it displays naturally at a 1920 x 1080 ratio. I can zoom in and it gets bigger. I can zoom out and it gets smaller. It does not do any adjusting whatsoever.

A basic Dreamweaver HTML file with a 1920 x 1080 image inserted, and a paragraph of text beneath that.

if you insert your image with the width/height declared like below it wont be responsive

<img src "my_image.jpg" width="1920" height="1080">

You need to remove the width/height :

<img src "my_image.jpg" >

Then set the width of the image using css

img {

max-width: 100%;

height: auto;

}

So your 1 col page code might look like:

<div class="page_wrapper">

<img src "my_image.jpg" >

<p>Some text goes here. Some text goes here.</p>

</div>

<!-- end page_wrapper -->

with this css:

.wrapper {

width: 90%;

margin: 0 auto;

}

img {

max-width: 100%;

height: auto;

}

Votes

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
community guidelines
Explorer ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

I will try out that code, and I will come back with the results. This will cause the website to be responsive on mobile and otherwise, correct? At least in theory?

Votes

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
community guidelines
Explorer ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

I actually do not understand, Nancy... I have seen absolutely horrid responsive designs akin to what you are showing me. A website can benefit from artistic talent and creativity just as much as responsive design, I suppose...

The worst part I can see is the banner image on the mobile layout. Bigger text would accommodate some of the terrible design on the desktop. Being creative is my intention.

Votes

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
community guidelines
LEGEND ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Lizzie_Jo_Websites__11  wrote

The worst part I can see is the banner image on the mobile layout. Bigger text would accommodate some of the terrible design on the desktop. Being creative is my intention.

If you know some simple jQuery you can swap out an inline image on mobile or if you use a background image you can swap it at mobile size using css.

I think what we are saying is a 1 column website is not going to look good at desktop size.

Votes

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
community guidelines
Community Expert ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

When you design a room, you build the structure first.  Then add paint, furniture and accent pieces..

It's exactly the same in web design.  If your structure isn't built right, all the paint and decor in the world isn't going to make it good.

As I said at the beginning, percentage widths alone will not make a good responsive web site.  You need to learn how to use CSS media queries with breakpoints for different layouts (manual coding) or use a responsive framework like Bootstrap where your layout and content is reshaped to fit the intended devices.

See this Lynda.com tutorial by David Powers.

Dreamweaver CC 2015: Responsive Design with Bootstrap

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

We will agree to disagree, Nancy, this isn't going anywhere. I completely disagree with your analogy, I do not think it fits what I am implying whatsoever. Yes, obviously, you build a structure first, but in this particular situation, the "structure" is not really representative of "a room." I am a designer. I'm not a coder, but a designer. Trust me, I know what art is.

The code seemed to work for what I was going for. Could you further explain how I would swap out an image. What I would do with my website is this...

On a desktop I would have a banner, but I would probably switch that out for another image that fits better than Nancy's above example, or simply get rid of the banner altogether, as it doesn't add anything to the experience, other than something to scroll past on the mobile.

How could I do this?

Votes

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
community guidelines
Community Expert ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Trust me, I know what art is.  Been doing it for a long time.  And I also know what works and doesn't work on the web because I've been doing that for a long time, too.   Suffice it say, having a coding discussion with a person who doesn't understand  how to design with code is not productive.  So at the risk of sounding cynical, and I really don't mean to be, you should be using Muse for your web projects.  DW is aimed at coders who can think like coders.  I don't think you have made that leap of faith yet and not sure you ever will.  Muse is aimed at designers who want nothing to do with code.  IMO, you'll be much happier using the visual interface, templates and plugins in Muse than you will ever be with DW. 

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
LEGEND ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Lizzie_Jo_Websites__11  wrote

Could you further explain how I would swap out an image.

You start off with an inline image for desktop - desktop_image.jpg :

<div class="my_image"><img src="desktop_image.jpg" ></div>

Then you can add some jQuery to the <head></head> section of your page to change the image src at a set window width. In the example below once the window width goes below 768px the image with the name - mobile_image.jpg - is presented:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

$(window).resize(function() {

if ($(window).width() < 768) {

$('.myImage').html('<img src="mobile_image.jpg" >');

}

});

});

</script>

You could also swap the images using css and media queries if you use background images.

Votes

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
community guidelines
Community Expert ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Or you can use the <picture> element (without need for scripting) so the right image appears at the right viewport size...

<picture id="logo">

  <source media="(max-width: 768px)" srcset="small-logo.png">

  <source media="(min-width: 769px)" srcset="large-logo.png">

  <img src="large-logo.png" alt="Logo">

</picture>

Votes

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
community guidelines
Explorer ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

For real, Nancy, all I can do is laugh at this point. I wasn't trying to cause a problem. As far as coding goes, trust me, you are certainly more knowledgeable than I am, and I do trust your experience is far more than mine. However, undermining my "taste of art", which I'm sure I have been doing longer than you have, coding or not, which is irrelevant either way, is what is making this far less professional than it needs to be.

I call myself a beginner, but as far as that is concerned, I am a beginner to this specific topic. Responsive web design. I have been "coding" for a while, and I understand the concept. I have done styling, designing, and everything necessary to gain a good foundation in this field. I came here to learn. I came here to learn from people who know more than me. I can take your advice and your constructive criticism, but I will not tolerate being insulted. Not even in a passive sense, as I can see what your implications are.

In my last topic, Nancy, you were one of the more helpful users, and the first one to understand what my intention was. I would rather not have a problem with you. I like using Dreamweavr, and it has more functions than a website builder and Muse is capable of. I wish to learn. If you want to teach me the proper ways to do everything, and what a more professional site would be like, than feel free, but as you said, it would take hours of tutorials would it not? You told me the forum wasn't the place to learn responsive design in your first post, so where do you recommend that I go?

I will attempt the code you provided os_good. I will return with the results. hopefully that is something that will suffice. I am starting to look into some other "responsive/bootstrap" possibilities as well. I am a very fast learner, all I need  is someone willing to teach me.

Votes

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
community guidelines
Community Expert ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

EbaySeller marked Lizzie_Jo_Websites__11's reply on I am trying to make a 1 column responsive website...? as helpful.

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

Marked as helpful:

We will agree to disagree, Nancy, this isn't going anywhere. I completely disagree with your analogy, I do not think it fits what I am implying whatsoever. Yes, obviously, you build a structure first, but in this particular situation, the "structure" is not really representative of "a room." I am a designer. I'm not a coder, but a designer. Trust me, I know what art is.

The code seemed to work for what I was going for. Could you further explain how I would swap out an image. What I would do with my website is this...

On a desktop I would have a banner, but I would probably switch that out for another image that fits better than Nancy's above example, or simply get rid of the banner altogether, as it doesn't add anything to the experience, other than something to scroll past on the mobile.

How could I do this?

and

EbaySeller marked Lizzie_Jo_Websites__11's reply on I am trying to make a 1 column responsive website...? as helpful.

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

Marked as helpful:

For real, Nancy, all I can do is laugh at this point. I wasn't trying to cause a problem. As far as coding goes, trust me, you are certainly more knowledgeable than I am, and I do trust your experience is far more than mine. However, undermining my "taste of art", which I'm sure I have been doing longer than you have, coding or not, which is irrelevant either way, is what is making this far less professional than it needs to be.

I call myself a beginner, but as far as that is concerned, I am a beginner to this specific topic. Responsive web design. I have been "coding" for a while, and I understand the concept. I have done styling, designing, and everything necessary to gain a good foundation in this field. I came here to learn. I came here to learn from people who know more than me. I can take your advice and your constructive criticism, but I will not tolerate being insulted. Not even in a passive sense, as I can see what your implications are.

In my last topic, Nancy, you were one of the more helpful users, and the first one to understand what my intention was. I would rather not have a problem with you. I like using Dreamweaver, and it has more functions than a website builder and Muse is capable of. I wish to learn. If you want to teach me the proper ways to do everything, and what a more professional site would be like, than feel free, but as you said, it would take hours of tutorials would it not? You told me the forum wasn't the place to learn responsive design in your first post, so where do you recommend that I go?

I will attempt the code you provided os_good. I will return with the results. hopefully that is something that will suffice. I am starting to look into some other "responsive/bootstrap" possibilities as well. I am a very fast learner, all I need  is someone willing to teach me.

makes a mockery of the feature.

Similar brainless marks have been given in the past and well by the same person.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
LEGEND ,
May 20, 2017 May 20, 2017

Copy link to clipboard

Copied

LATEST

Lizzie_Jo_Websites__11  wrote

You told me the forum wasn't the place to learn responsive design in your first post, so where do you recommend that I go?

I will attempt the code you provided os_good. I will return with the results. hopefully that is something that will suffice. I am starting to look into some other "responsive/bootstrap" possibilities as well. I am a very fast learner, all I need  is someone willing to teach me.

The place to learn rwd is, (only my opinion) a good book on the subject. The main problem with rwd is that everyone is still learning, and finding for them the best way to do everything that is involved. Anything more than about 2 years old on the subject is in many cases already out of date, plus there is the pitfall that if you decide on one method, as for example bootstrap and the use of a pre/post-processor, you may be buying into something that you do not really require for the future, and indead may be replaced in the future.

If you read some older discussions you will see that using bootstrap vs using flexbox is often discussed. Both arguments have there plus and minus points, but if you then consider that the next version of bootstrap uses flexbox as its default for layouts, it becomes obvious that flexbox is the future even in the opinion of those developing the bootstrap framework. This though may itself change in 3-4 years time, as css grid layouts may become the recommended method, and as people gain more experiance in its use, it becomes easier to use.

How you decide which to learn, and how to learn is your decision, but i doubt that anyone in any forum can actually teach you rwd, without you yourself learning what is required first.

BTW - Go for a good book that uses flexbox, no sass/less usage and is not program specific.

Votes

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
community guidelines
Community Expert ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Lizzie_Jo_Websites__11  wrote

Why would it look terrible on ultra wide displays? Could you give me an example...?

Sure.  Basic 1-column layout on an average hi-def display.  Note: this is not a 4k or 5k display which would be much worse.

Same layout on a mobile width display.

Do you understand now why percentage widths alone look terrible?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Incidentally, here's the code I used.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Percentage Width</title>

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

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

<style>

html { background-color: antiquewhite; }

body {

    background-color: white;

    width: 80%;

    margin: 0 auto;

    padding: 0;

    border: 5px solid silver;

    border-radius: 10px;

    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";

    font-size: 20px;

}

header { text-align: center }

.banner {

    max-width: 100%;

    height: auto

}

article { padding: 5%; }

footer { text-align: center }

</style>

</head>

<body>

<header>

<h1>My Awesome Website</h1>

<h2>Some Pithy Slogan</h2>

<img class="banner" src="http://dummyimage.com/1920x400" alt="banner placeholder">

</header>

<hr>

<article>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias mollitia assumenda autem adipisci eveniet eaque molestiae saepe nulla quibusdam, odio soluta ex, error ducimus repudiandae tempore temporibus sit inventore!</p>

</article>

<hr>

<footer> <small>© 2017 all rights reserved, My Awesome Website.</small>

</footer>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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