We help IT Professionals succeed at work.

website responsive

151 Views
Last Modified: 2016-05-16
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

Most Valuable Expert 2011
Author of the Year 2014

Commented:
This has so many moving parts that you might get a better result if you posted it in Gigs.  Just a thought.
CERTIFIED EXPERT

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

Commented:
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.
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
ok will try that. thanks again

Author

Commented:
thanks
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.