Is it possible to make a responsive site without using Bootstrap or other similar frameworks?

Hello everyone! I’ve been researching this topic and I’m still a little confused… I’m building a website for a company and I’ve pretty much made it look good for an average desktop computer screen (and cross-browser compatible). Now the client wants it to be fully responsive for mobile/handheld devices. So what should I do? Make several other variants of the same site using responsive frameworks like Bootstrap? What is better - using Bootstrap or media queries? What would be the best way to do it! Thanks in advance for your patience and expertise!

1 Like

It is certainly possible to make a responsive site without any framework.
Is that the right choice?
That is not such a straightforward question. It depends on your own css abilities and the nature and needs of the site. There are pros and cons to both. Ryan has done an article about this choice.

1 Like

Here is a good place to start : http://webdesignerwall.com/tutorials/responsive-design-in-3-steps1.5k

Then, once you’ve read that, try this: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

1 Like

Oh great! Thanks a lot! As for my css abilities, they’re pretty modest, to be honest, but, realizing I’ve got a lot to learn, I’m doing my best to educate myself using all possible media. I will check this article out and give you feedback.
The site is on maritime surveyor services/superintendant services. That’s a rare topic to build a site about, compared to the fact that I was previously involved with makeup projects. :sweat:

@SmithKelvin11
Great! Thanks a lot, I’ll have a look at the resources above and get back to you if I have questions! :grinning:

Use “Bootstrap” and they will probably stay that way. :mask:

coothead

1 Like

It’s an interesting point. I have never used a framework myself, but I see many posts here by people struggling with them. I always find the css very confusing, but then I never took the time to try and learn Bootstrap. I assume some people choose a frame work because they are not confident enough in their own css/rwd skills to “do it them selves”. They then try and customise the framework to their needs and create an unholy mess of css and get into trouble.

Thing is I don’t want to use Bootstrap because I don’t like the way the Bootstrap sites look, honestly.
I am eager to learn CSS and I am learning it. The thing is that I’m in search of the most appropriate and fast solution now, this is why I’m asking for advice…

It’s perfectly possible to go responsive without any need to resort to a framework like Bootstrap. Take a look at https://micah.codes/, that doesn’t even have any CSS and it’s perfectly responsive. Admittedly, that kind of look won’t suit everything, but it works. It really depends of the site design you want to make responsive - the more complicated it gets, then the more compelling use of a framework ‘may’ become. Personally, I favour reading Ethan Marcotte’s work on RWD and developing your knowledge from there.

I understand where you’re coming from… I’ve tried a Bootstrap tutorial and I understood how it works and how I can make changes to it. I admit it IS easy, besides everything is done by the script, so you just have to edit certain parts. It is useful to know what is on-trend now, so that you can always follow the stuff… But this whole Bootstrap thing just doesn’t fit the concept of what I need, I’m afraid…

Practise CSS, practise CSS, practise CSS. :sunglasses:

Take a short break, then practise CSS until you’re. :ok:

coothead

3 Likes

That’s good. So you need to study, and more important, practice.
It’s big subject, but some pointers based on your comments.

That goes against the principles of RWD. Create one version which is flexible enough for any device.

It’s easy to think that media queries are the backbone of RWD. But IMO they are not, fluidity is. That’s not to say media queries are not a very important tool. But if you can keep them to a minimum, the chances are you are doing it right.

Thanks a lot! I need to have a look at all the resources you guys supplied me with and I 'll get back to ask questions, because I’m sure I’ll have plenty!

No doubt about that!)

I’ve been researching the topic of responsiveness/adaptability for the past couple of hours and I found a blog post where the difference between static/liquid/adaptive/responsive design is explained… I personally knew there was static, liquid and responsive design. Turns out I’ve been in the dark thinking that adaptive/responsive is the same… Just wanted to make sure I got everything right - adaptive and responsive DO differ?

Generally adaptive has come to mean adjusting the page in a set of various fixed widths to suit the device where responsive is more device agnostic and adapts to any width in a fluid way.

They can both use media queries and have breakpoints but adaptive sites could have breakpoints that target specific devices and thus miss other devices (this is not always the case and adaptive site may just be a series of arbitrary fixed widths that gradually get smaller as the browsers window gets smaller.).

Adaptive can also mean targeting specific features of the device with a progressive enhancement approach but that’s not really anything to do with laying out the page as such.

I tend to steer away from specific terms as they only confuse and the easiest way to design a responsive page is to open and close your browser window slowly and if at any point the design doesn’t fit or look odd then throw in a media query and make it look better.

At this stage, you’re better off not trying to grapple with a framework, because you really need to start from scratch with that. As others have said, you certainly don’t need a framework. (They just represent pre-written code, rather than an approach in itself.) Frameworks may be convenient to an extent, but they also bind you into a web of complexity that you don’t need. They can also bury you in confusion if you haven’t learned how to use them well. Best to learn CSS first.

With some careful CSS modification, the site you have already can be made more adaptable to various screen sizes.

Thanks so much for your explanation! And that whole thing just raises a question on if it is possible to check the way a certain website looks on a specific device without having to open it on any possible handheld /desktop device there is… Like maybe there’s a tool or a software that imitates the difference in screen proportions and resolutions?

The easiest way is to drag the right side of your browser window.
Also most modern browsers have dev tools which can emulate different devices and screen sizes.

Thanks for your advice! I guess this is why I got so confused about this framework stuff.

I was recommended to use at least online display resolution emulators…

For the most part you can get away with doing that during development.
But you should also test on an actual device/s as there can be issues that go unseen on the desktop.