Skip to main content
Inspiring
May 19, 2017
Answered

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

  • May 19, 2017
  • 1 reply
  • 1495 views

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

This topic has been closed for replies.
Correct answer pziecina

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.


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.

1 reply

Nancy OShea
Community Expert
Community Expert
May 19, 2017

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
Inspiring
May 19, 2017

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

Nancy OShea
Community Expert
Community Expert
May 19, 2017

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