website responsive

Bakaka
Bakaka used Ask the Experts™
on
Hi,

I have a website that i would like to convert to website responsive.

The website is built with html and css (a little of javascript).

I want to convert it to website responsive so that it can be accessed on other devices (ie: tablets, phones, etc).

I know bootstrap can do this.

Can someone guide me in the right directions and suggest some ways for me?

Regards,
Bakaka
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2011
Top Expert 2016

Commented:
This has so many moving parts that you might get a better result if you posted it in Gigs.  Just a thought.
I would say "convert" really means  "create a new website".
so create an empty bootstrap website ( pages with menus connected to pages etc.) based on a style that you're happy and then  recreate the content from the existing site by cutting and pasting.
so
1) go to this site and choose one of the free themes you like  (there are others if you google free bootstrap themes)
http://startbootstrap.com

2) download it and install and set up the site
3) create the same pages and menus that are in the existing website  and populate with the content from the existing website

personally I would
download WordPress and use that to create the website and populate with the content

Author

Commented:
Thanks,

Will i be able to write my html and css code within boostrap?

There might be a few tweak which I might need to adjust (ie: colour adjustment, fixed width, etc). Will I be able to have that ability to do so within Boostrap?

I am familiar with HTML and CSS really well.

I used Dreamweaver as my editor.

So i hope i could use boostrap to manipulate and adjust a theme just like how i would do it within Dreamweaver

Advise please
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

greetings Bakaka, , there is a very large difference in the factors and considerations for a MOBIL responsive (adaptable to width) web page (site), and the OLD (out of date) no change at all for width or any other, desktop web page. If you are not one to use your bar phone every day to do web surfing (touch may links), , , , , or be in a store, and use phone to do web research for a product you are going to buy, then you may not even know what ease of use touch factors are productive in a Mobil web page. There are several responsive add on's, and you mention bootstrap, a very very popular addition for a grid layout setup, to have element placement and width conform to width changes in the page view.
You ask - "I might need to adjust things, Will I be able to have that ability to do so within Boostrap?"
Since you are going to write all of the page HTML code, then every thing can be "adjusted" by one means or another. Of course most bootstrap factors can be quickly changed in many, many ways ( if you are knowledgeable in bootstrap), but there are some things that are difficult to adjust.

chilternPC has told you already, that the best thing to do is to just begin again with a NEW web site page organization, and I agree with that very much, start with a new attitude for the small screen touch factors, and set up your site for pages you would want to use yourself on the go, with a bar phone.

The current web design usually begins with a start page as a bar phone narrow "portrait" mindset, instead of starting with the wide "desktop" page mindset. It is faster development to add side elements later, when you change to design for wider tablets, and then later still you add other factors for wider laptop view.

in responsive design, you can show and hide things as the page is wider, or smaller. You can also change "Arrangement" of things, from "over and under" to "side by side", and other changes , like combining (mix together) separate elements as the view gets more narrow.

I can not recommend  that you start on bootstrap by trying to just jump in and convert your current site, you may do better to start by learning CSS responsive factors using percentages like -
    width: 25.32%;
    margin: 0.51% 1.44% 1.7% 4.11%;

max and min width
        max-width: 973px;

and then learn bootstrap maybe from a book or a tutorial, here's one site to help you learn -
         http://www.w3schools.com/bootstrap/

good luck

Author

Commented:
thanks for the help guys and advise.
in answer to editing using dreamweaver - yes   and actually Dreamweaver allows you to build Bootstrap websites from its own built in templates.
check out Adobe's free tutorials on how to do this

https://blogs.adobe.com/dreamweaver/2015/07/build-responsive-websites-with-built-in-bootstrap-templates-in-dreamweaver.html

Author

Commented:
ok will try that. thanks again

Author

Commented:
thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial