making dynamice php site suitable for mobile phone - responsive

[McDuff]

Anybody here has experience with making a hard-coded php site (no CMS) suitable for mobile phones as well, better known as a responsive site?

looking into that now for a next round of webdesign, our sites are really too much stone age.

[Arthur]

Not sure what kind of advice you're looking for. The backend (PHP) isn't really relevant, RWD is all done in your markup (HTML+CSS), although that may be intertwined with your PHP code (try to separate the two, use HTML templates as much as possible).

I would suggest working off of a CSS framework as your foundation. There are many you can choose from, like Bootstrap, Foundation, Bulma. Here's a more complete list;
Awesome CSS Frameworks

-Arthur

[McDuff]

Arthur, thanks.

Some more background. Mostly, our target group is somewhat older interested in history or crafts who would still use desktops as main internet access. The second group is people interested in "cultural tourism" and is at home looking in quiet for some alternative tourist destinations.

We now are running an EU project about WWI heritage and should include modern ICT tools as well.

We made a new website The Forgotten Front for the project and as (for later this summer) virtual tour of our WWI museum exhibition. In coding, that site is a copy of all our sites.

For the project and for our conferences, we have to have something that is easy accessible by modern mobile phones as well, which our sites are not.

So my first thoughts are to figure out -like with video's- how to make a media query, and if the site is being accessed by mobile phone, to switch to a sub-site under forgottenfront.com/m/... that is designed for mobile phones. However, I am lazy/smart and hate inventing the wheel when there is enough info out there. Problem is, there is now soo much info out there, and I am in time pressure for the conference in 10 days. Hence the question

[manfred]

I would recommend switching to a simple CMS (for example Joomla) and use a responsive template. I'm using templates from https://www.joomla51.com/ and I'm very pleased with them. The basics of Joomla are very easy to handle

Greetings from Austria,
Manfred

[McDuff]

I don't know why but I don't like working with CMS. Besides, the system I have working in more than 7 websites works nice in coding. Any front-end design flaws are my lack of creativity in this and lack of time/incentive to keep the sites updated.

[Arthur]

Originally Posted by McDuff

So my first thoughts are to figure out -like with video's- how to make a media query, and if the site is being accessed by mobile phone, to switch to a sub-site under forgottenfront.com/m/... that is designed for mobile phones.

That's not how media queries work. Media queries in CSS set break points based on the screen size. "On a wide screen use this CSS, on a medium screen this, on a small screen this". Responsive web design (RWD) means having one layout that adapts to the screen size. Creating a separate site for phones is double the work and unnecessary. Most RWD layouts are based on a 12-column grid, where the column size varies with the screen size and/or columns are shown/hidden for certain screen sizes.

By setting the viewport and adding some media queries/breakpoints would make your design go a long way. Then add a basic grid and you've got the basics of a RWD. And like I said, adding a (minimal) CSS framework will take care of the nitty-gritty for you.

-Arthur

[hobbes]

Not sure I'd call Joomla a simple CMS...

If you just want a simple responsive layout, search for: responsive HTML5 template. Add the word free if you don't want to pay for it. There are many decent options out there both free and non.

Frameworks are a good way to rely on someone else to maintain usability as browsers change and have access to additional functionality, although if you don't go for too fancy a template, it can likely last many years without updates. Depending on the framework, however, you may still need to stay on top of security as you would with a CMS.

[McDuff]

Arthur, great,

Now I will try figure out what the ... you said, then what it means, and will get too it.



Fun besides, thanks.

I will keep posting here on the progress and problems I encounter, as much as getting feedback as being a help for other amateurs who try to figure this out in the future.

[Jarrod]

If you haven't already go to understand responsive web design. Try https://www.w3schools.com/Css/css_rwd_intro.asp for an introduction to the topic in general.

And then go back to Arthur's recommendation on CSS framework. Personally I use Bootstrap a lot and it will get you a long way there. The frameworks create a whole load of pre-canned CSS so that you don't need to understand everything to make a site look good on a variety of devices and browsers.

[McDuff]

I am looking into is, already looked a bit to the site you mentioned.

However, I see some problems. Or maybe my sites are so simple that making it RWD is a peace of cake but all the explanations about RWD are for complicated sites confusing me (probably).

Around 2003, when the template of our first site was designed, we tried to avoid two things as much as possible:
- tables or columns.
- java script.

So everything works with CSS and php.

How it works is quite simple, best explained on our ecomuseum ruze site

The index page stays permanent on the screen, is not refreshed during navigating with the site. The index page consists of the navigation side bar and header and footer. and a body-content area. Height of the header, footer, and total page width and navigation bar width are given with CSS. The green border lines are repeating background images.

The index page is the ONLY page that has any coding on it. The side navigation activates a "get"-order that inserts a simple page with content into the body content area.
The ecomuseum site has dirty URLss, so you see the ..../?act=111 in the URL

The forgotten front website is in coding completely identical. The only difference is that, with some extra php coding and rewriterules in htaccess, the ?act=111 is replaced by friendly URL. For the rest, in css and set-up, the two sites are identical in coding.

So we do not have grid-views, do not use tables or columns or boxes or whatever. This week we have a conference, so I have little time, but in between I will look at it, so people can see conference updates on their phones as well.