Making WordPress Web site available to smart phones

  • Welcome to Christian Forums, a Christian Forum that recognizes that all Christians are a work in progress.

    You will need to register to be able to join in fellowship with Christians all over the world.

    We hope to see you as a part of our community soon and God Bless!

DanielGarneau

Member
Apr 19, 2014
101
21
18
Quebec City, Province of Quebec, Canada
Faith
Christian
Country
Canada
The purpose of this thread is to get feedback on my web site when viewed from a smart phone. It just recently became "responsive," which means that when it is viewed from a smart phone, the text should stay the same size, and the navigation items should be moving down at the bottom of the page, yet working normally.

Following is the current site which is supposed to work on smart phones, followed respectively by the 2014 WordPress and 2013 html-css that could not as far as I know be read from a smart phone:
All I need really is for a number of you to click on the 2015 version using a smartphone, and tell me if the text can be read, and if the navigation tools at the bottom of the page are working properly.

For those who want to know more, my Web Site started out as a fixed width site strictly based on html and css. I later migrated to a fixed width WordPress site based on the TwentyTen theme, which I chose because of its backward compatibility with older Internet Explorer browsers.

I discovered recently that there existed a plug in called "Responsive TwentyTen" which could transform my fixed-width site into a variable-width site that moved my top-menu and side-bar menu to the bottom of the page when viewed on a narrow screen such as a smartphone.

So, again, as I said above, I would greatly appreciate it if some of you accessed my site with smart phones and told me if the text is readable (instead of shrinked tiny so the entire site is visible), and if the language switching and navigation widgets at the bottom of the page work properly.

I would also be interested in learning from other webmaster's experience in making their websites smart phone friendly... I am currently working at reshaping my site a little through using a different theme, and also I would like to add some interactive functionalities to it, bearing in mind that I want my site to be available from smart phones and small devices.

For those interested in yet a little bit more background history on how I was helped by Hammer Stone to move from css-html to WordPress site, read the thread titled Technical Platform for Web sites.
 

DanielGarneau

Member
Apr 19, 2014
101
21
18
Quebec City, Province of Quebec, Canada
Faith
Christian
Country
Canada
pom2014 said:
Your menu is not responsive.

Look at this site to get some ideas.

http://www.menucool.com/ddmenu/create-mobile-friendly-responsive-menu
I hate to admit it, but you are absolutely right.

On my PC the plug-in appeared to make my site adjustable in width and the menus nicely and politely went down below the text whenever the window did not allow full display. But this is not working on smaller devices.

Thank you for your input...
 

pom2014

New Member
Dec 6, 2014
784
72
0
No worries.

Menus are the bane of existence on mobile. CSS 3 can do it but you need to add in so many extra lines of code to support non compliant CSS 3 browsers.

Then there are media queries to detect device resolution and set standard font sizes and image display.

Honestly I think going back to browser sniffing and then sending the user to a site made only for them is easier than hacking CSS for days only to find some variant of ie or old Mozilla Dev won't render the site the way you want.

It's a never ending struggle.
 
  • Like
Reactions: DanielGarneau

DanielGarneau

Member
Apr 19, 2014
101
21
18
Quebec City, Province of Quebec, Canada
Faith
Christian
Country
Canada
pom2014 said:
Your menu is not responsive.

Look at this site to get some ideas.

http://www.menucool.com/ddmenu/create-mobile-friendly-responsive-menu
Could you please test my site again, as I have implemented a different approach as of today April 12, 2015, to make my site truly responsive for smart phones.
The more input I get the better it is, whether positive or not. Thank you!
 

pom2014

New Member
Dec 6, 2014
784
72
0
Ok the menu works but needs to not take up all the screen.

Looked up your CSS and realised the issue is that all of it is still being designated as pixel widths.

To be fluid to any browser you need to put it in percentages. So all widths need to go to percents.

All margins should be percentages, all fonts percentages but borders you can keep on pixels.

Also your mobile section is only safari based. You'll need to add a section for Mozilla/gecko browsers and one for windows/ie phones. Or you can use media queries that detect the view size that way everything from portrait viewport phones to 1080 p screens are supported. Google media queries and viewport for more info.

But so far so good. Just tweaking to percentages will help a lot to start and then adding media queries will make it really function nearly perfectly.
 
  • Like
Reactions: Doug_E_Fresh