Welcome to WebmasterWorld Guest from 3.81.29.226

Forum Moderators: not2easy

Making dynamic php site responsive

advice appreciated how to make our non-profit sites reponsive.

     
9:18 pm on Aug 24, 2019 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 19, 2008
posts: 52
votes: 0


Our Czech non-profit is running 6 websites for regional development and cultural development. Technically, the sites work good but are outdated in design and not responsive or mobile friendly, and we do not reach our new target group interested in cultural tourism and heritage events.

I understand coding, but am not a coder and not very creative. Once I know a coding trick or have a nice layout, I can extend on it.

The sites are all dynamic php coded with css; no java, no tables, no flash. Still using a fixed width of 800 px. The design is maybe a bit unconventional. The index page is the ONLY page that has any coding on it, and includes the header, side navigation bar, and footer. The side navigation activates a "get"-order that inserts a simple page with content into the body content area.

One of the sites still has old URL's like ..../?act=111. The other sites work with a <?php string in the index file and rewriterules in htacess that gives each individual page its own friendly URL, keywords, etc. Works perfect, and the pages load quick, also with low speed internet.

Several of the initial problems with the coding of those sites I solved with help from members here in 2008, to give you an idea how up to date the coding of our sites is.

We now really have to redo our sites. Three of them are "long read" background information - picture sites, so aimed at desktop-laptop users. The other three are project and tourism sites which should be responsive. In addition, for our WW I commemoration project, we are making bicycle and hiking trails using QR codes using mobile content.

The main question now is, is there a simple way how to make the sites responsive without redoing everything, preferably through css coding?
10:53 pm on Aug 24, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 362


Yes.
The main idea is to have the page contents in a "container" div and use a few basic responsive changes. Many elements can be sized with "max-width: 100%" so they can expand or contract to fit the space. You can experiment with layout and by using media queries, change layout for various widths.

If you are familiar with css, some time sketching and calculating can help. If you are not very experienced with css, I'd suggest some of the free courses at w3schools to help with basics.
12:37 pm on Aug 25, 2019 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 19, 2008
posts: 52
votes: 0


A container div. never worked with that, will look it up. It would mean I would have to change my index file layout considerably. My header and footer are part of the index file, that is, they are full width 800px. The page content is a separate file called up in the "body content" space with a fixed 600 px width.

Another problem is the navigation: I am using side bars everywhere. However, side bar navigation probably is a bad idea for mobile phones eating up valuable screen estate. One option I am looking into now is a "burger" menu icon with hidden side bar navigation.
2:04 pm on Aug 25, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 362


The hamburger type menu is one option to offer a menu when the sidebar is removed from narrower widths. A container div is just a div that wraps the page content to control the overall page width. It is commonly called a wrapper and is set with a max-width in px. for the various screen widths. It would contain your header, and footer along with the main body and sidebar.

To get some ideas ov how pages change to fit various widths, you can use browser tools to see how pages change from full desktop width to narrower widths. Most browsers offer developer tools that include responsive sizing view. That way you can look at your own and other sites at various widths to help you decide which elements changed with media queries.
9:42 am on Oct 15, 2019 (gmt 0)

New User

joined:Oct 15, 2019
posts:5
votes: 0


I think that you need to remake the website to update it.
If the design will look boring and old, you will lose visitors and traffic. Plus, in order to make it responsive, you have to review code to delete useless or buggy one.