Template for mobile browsers

Come here for help or to post comments on Sphider
Post Reply
User avatar
captquirk
Site Admin
Posts: 299
Joined: Sun Apr 09, 2017 8:49 pm
Location: Arizona, USA
Contact:

Template for mobile browsers

Post by captquirk »

Sphider 2.2 is under development. One of the coming features of 2.2 is the ability to detect a mobile browser when doing a search and presenting a search page which is easier to read on a mobile.

Worldspaceflight.com is on the bleeding edge of Sphider 2.2.0.

You can compare the search page on desktop vs. mobile at https://www.worldspaceflight.com/sphider/search.php.

Comments are always appreciated. You don't have to be a forum member to comment. Simply do so at
https://www.sphider.worldspaceflight.co ... ontact.php.
User avatar
ReddWebDev
Posts: 13
Joined: Fri Nov 23, 2018 3:09 pm
Location: Great Falls, Montana
Contact:

Re: Template for mobile browsers

Post by ReddWebDev »

The main trick here is to remove the tables and write positioning via CSS --

Here's a mock-up of tables removed as opposed to tables not being removed:

Tables removed:

Image

Tables not removed:

Image

Adding a viewport tag in the header will only do just some of the job. RWD requires the complete removal of all of the tables and unfortunately this is where the physical writes come into play.
Continental breakfasts should be served on tectonic plates
Image
User avatar
captquirk
Site Admin
Posts: 299
Joined: Sun Apr 09, 2017 8:49 pm
Location: Arizona, USA
Contact:

Re: Template for mobile browsers

Post by captquirk »

It's a work in progress. I had forgotten the meta tag in the header.html, so I added that for the mobile template. Then tweaked two values in css.

The current result (remember, still a work in progress) can be seen at https://worldspaceflight.com/sphider/search.php.

Now WorldSpaceFlight has no need for RSS or Image searches, so I am using an older version of search.php (with mobile detection added).

In the current version of Sphider, users are provided both the search.php and a copy of the older version as search-160.php. If they don't need the tabbed search, they just rename search-160.php to search.php and that's that. NOT the ideal solution!

So in the development of Sphider 2.2, search-160.php will be gone, and in its place a new setting on the configuration control panel allowing tabbed search to be toggled on or off. Already in the control panel is the option to toggle advanced searches. On my WorldSpaceFlight search page, advanced search is toggled ON! If I were to toggle it OFF, the search screen would have only the text box and Search button.

Currently, I am working on a css solution to show tabbed search capability in a readable/usable fashion on mobile. Coupled with the ability to toggled tabbed search on or off, depending on user requirements, should make the version easier for someone to work with.

Anyway, that is what testing is for. LOL!

Sphider 2.2 will also fix a security vulnerability, and a couple other improvements. We used to call changes like thats "scope creep."
User avatar
ReddWebDev
Posts: 13
Joined: Fri Nov 23, 2018 3:09 pm
Location: Great Falls, Montana
Contact:

Re: Template for mobile browsers

Post by ReddWebDev »

Yes, it's all a work in progress for sure --

Here is the search form with "all" of the table elements stripped out of it:

Image

When Im done with the css for the top search selections, i.e. web, rss, images, I'll pass along the edited php pages and the css to you.

I may even go so far so as to write a real footer.php (for the standard templates folder) as well if I can find the time -- and I could also write in some optional sidebars as well for the search_results. We'll see tho' ...
Continental breakfasts should be served on tectonic plates
Image
User avatar
captquirk
Site Admin
Posts: 299
Joined: Sun Apr 09, 2017 8:49 pm
Location: Arizona, USA
Contact:

Re: Template for mobile browsers

Post by captquirk »

I have similar results. No table elements.
All css. The differences are simply in css item settings.
I have a border, you don't. Change the css to suit taste.
My controls are more grouped. Change the css to suit taste.
Different button style. Change the css to suit taste.
Same for font style, color, size... all css.
Screenshot_20181128-172932.png
Screenshot_20181128-172932.png (136.76 KiB) Viewed 19729 times
I have the tabbed search (classic text, RSS, and Image) working, too. Still need to test, tweak, test,...
User avatar
ReddWebDev
Posts: 13
Joined: Fri Nov 23, 2018 3:09 pm
Location: Great Falls, Montana
Contact:

Re: Template for mobile browsers

Post by ReddWebDev »

Looks good -- Now just write the body into a container of roughly 85-90% and/or give it some margins so that the text doesn't hug the left side of the screen so tightly at a 1920x1080 resolution like it does now. I wouldn't worry much about the footer because right now there really isn't one to worry about LOL
Continental breakfasts should be served on tectonic plates
Image
User avatar
captquirk
Site Admin
Posts: 299
Joined: Sun Apr 09, 2017 8:49 pm
Location: Arizona, USA
Contact:

Re: Template for mobile browsers

Post by captquirk »

Thanks! I believe the container is at 95%. I'll scale it back to 90% and add margins. Nice thing now is all that can be done by only editing a single css file.

Obviously I'm not experienced at developing for mobile, so thanks for the help. My IT roots are not only pre-mobile, they are pre-cellphone, pre-Windows. When I retired, XP was new!

But never too old to learn...
User avatar
captquirk
Site Admin
Posts: 299
Joined: Sun Apr 09, 2017 8:49 pm
Location: Arizona, USA
Contact:

Re: Template for mobile browsers

Post by captquirk »

Making some progress... I think.

First is the search page with tabbed search ON, advanced search ON, and categories ON.
Screenshot_20181129-113107.png
Screenshot_20181129-113107.png (43.89 KiB) Viewed 19716 times
Then we disable tabbed search in the admin panel.
Screenshot_20181129-113155.png
Screenshot_20181129-113155.png (38.61 KiB) Viewed 19716 times
The page with advanced search and categories also turn off.
Screenshot_20181129-113236.png
Screenshot_20181129-113236.png (48.11 KiB) Viewed 19716 times
Here is a page with results showing, tabbed option and categories off.
Screenshot_20181129-113334.png
Screenshot_20181129-113334.png (89.84 KiB) Viewed 19716 times
User avatar
ReddWebDev
Posts: 13
Joined: Fri Nov 23, 2018 3:09 pm
Location: Great Falls, Montana
Contact:

Re: Template for mobile browsers

Post by ReddWebDev »

Looks good -- That whole web 2.0 thing really was a bust in my opinion .. but the Responsive Web Design really sorta took off -- I remember when .mobi came out and everyone was scrambling to have two websites, one for phone, and one for everything else. It's grown up quite a bit since 1995 I'll say -- I still keep a local box around so I can look at the stuff I built in 1999 on occasion.

We do wraps all the time .. I build to the point of if it reduces on my panel and it appears like it would on a phone, then I know the phone will be fine. I still eventually test on phone, tablet, laptop, and PC tho' because sometimes you never really know for sure if there's a glitch somewhere in any of them.

I might suggest that once you've written the template(s) to be fully RWD, that you just offer those exclusively in future builds and set the originals back on a backup disc or flash drive for old times sake. All of the stuff coming out of production now these days is all RWD by default anyway.

I've been familiar with Ando's work for about 12 years now, and I've always had a version of his laying around somewhere. I tried what his ex-partner put on and it was the same thing, but worse -- Slower than slow I think because he didn't really know what he was doing with it. (sphider-plus) -- And in adding insult to injury, he was, and might still be, wanting to charge money for it.

Back in the day, someone had written a mod for this thing that would go out and find mp3 files -- I used it and it was pretty slick. You had to basically let Sphider run wild on the net so it could locate the files on it's own (or point it to a site with known mp3 files), but the only downside of that was when it parsed and listed an altered mp3 file (url) that led to a high-jack or adware - Another downside was if your server was short or weak, running Sphider wild would bog it down (similar to DDoS) ... Be sort of cool tho' to get it where one could parse and list video locations in the index (video search) --

I don't think image search works on this 2.01 build however - I looked around a bit (in the parsing code) and I don't think Sphider is asking the right questions (but don't quote me on it) - I'll look server side and make sure it's not a local issue.
Continental breakfasts should be served on tectonic plates
Image
User avatar
captquirk
Site Admin
Posts: 299
Joined: Sun Apr 09, 2017 8:49 pm
Location: Arizona, USA
Contact:

Re: Template for mobile browsers

Post by captquirk »

Thanks.
Yes, SphiderPlus is still a charge.
And I have an archive of EVERY build I have done. I wish I had a CMS like back in my SYSTEM V days!
Any changes I have made, like RWD, stay... unless I find a good reason to back them out. Early on, I made a security improvement at someone's suggestion that proved to cause a lot of other problems, so that one got backed out. I would like to believe Ando would approve of what I've done...

Version 2.2 is about ready. I'm just doing more testing. There are times one improvement breaks something else. Somewhere along the line, I broke autocomplete! Have that working again.

Testing the image search seems to be working. But then again, maybe the right questions aren't being asked. As it is, the default search by name looks at the end of the url, everything after the final "/". The url search looks at the entire url, and the tag search (duh!) in the alt tag. Unlike a normal wildcard search, entering an '*' literally looks for an '*'! Entering absolutely nothing and hitting Search brings up the entire database. If you have any ideas on improving this, I am definitely open to suggestions. I considered changing the wildcard to an asterisk, but sometimes entering just an asterisk returns a specific result!!!

The image spider and search was tricky. Not everybody has Imagick installed, so I had to prepare for either scenario. Also, the database doesn't actually store the images, just the links and information about images. I considered storing them, but the db could grow to a HUGE size and that didn't seem advisable. (The db that ate Cleveland!) I also learned that there are people who do real crazy things with image url's, image names, and image tags. I'm not positive I even found all the odd ways as I haven't tested the entire internet.
It is possible I broke something in 2.01, but it seems to be okay in 2.2...
Post Reply