Any web designers in the house? - Departing from Wix.com

[Pete]

Here's what I got from the www.portal.qb64.org site, when viewed on a mobile device simulator at brickandmobile.com. I'm hoping that isn't what it really appears as on a mobile device. I know Wix is supposed to provide  responsive content, but as you can see by the image, all it did in the iphone simulation is cut off the right side of the webpage, and move the three scrolling dots over to the left. That's not very "responsive" in my book. So you have to use the horizontal scroll bar, at the bottom, to view what is to the right. Well, maybe the simulator isn't presenting it properly. Is that how it actually functions on a mobile device?

  [ You are not allowed to view this attachment ]  

If so, I think it would be better to do a mobile redirect to something like: m.qb64.org There are software packages available that help convert desktop to mobile layouts, but rally it is just a matter of adjusting to screen size, using some table or divider collapsing tricks, or just repositioning and size adjusting content. Anyway, it's a programmers forum, and I doubt there will be a lot of people coding on their iphones. ipads are a bit wider, but even so, I can hear Steve cursing all the way from Virginia when he has to bang out something on his ipad. You can always count on Steve for some good down-home, ol' fashioned "farm"iliar ones.

Pete

[FellippeHeitor]

I'm hoping that isn't what it really appears as on a mobile device.

Not at all. It does really look intentionally different.

 [ You are not allowed to view this attachment ]  

[ You are not allowed to view this attachment ]    [ You are not allowed to view this attachment ]  

[Pete]

Better! What I noticed is a lot of simulation sites are not up to date. For instance, many just have up to iphone5. I checked it on my LG Aristo (2-year old now) and the site appeared as in your photo; but, since I was curious about older devices, I dug up a Samsung galaxy notepad (5 years old) and it wasn't able to display the site correctly...

  [ You are not allowed to view this attachment ]  

So that one misses the menu button, and for some reason, picks the footer of the site and places it near the top. I guess this is one reason I have avoided working with all but the basics of mobile website programming. Apparently, new devices need a lot of consideration. I'd still like to find a simulator, online, that display sites correctly. I almost had one, where the .org site did display correctly, but I couldn't get the links to simulate. That site also did not offer the most modern devices to display the website.

Anyway, the easiest tricks I know is not nesting tables, and using a collapsing format, to go from a horizontal to vertical orientation without changing the order of the content. Basically, it's just harder to make great looking sites when the have to be manipulated that much, but it does avoid the horizontal scrollbar.

One new thing that impressed me on the Wix layout was how the social media images, in the footer of the right side of the desktop webpage, appeared as an inline display, completely and uniformly across the bottom of the cell phone display, and the choices were changed so the forum and chat image links could be included. That is a cool effect. Maybe there is some routing script that acts like an if/then statement and changes out the footer when a mobile device is detected.

Pete

[FellippeHeitor]

Here’s the thing with Wix: It gave me a basic layout which I edited as I wanted. After that I saved my changes and it offered me to view it as mobile. It did a very good job repositioning things but I still had a say in lots of parts of the layout. All of that means that what you see was not entirely automatically generated.

[luke]

Mobile formatting is achieved using a combination of thoughtful CSS rules and media queries, which are CSS conditionals based on screen size.

Naughty developers will rely on JavaScript as well, but it's very possible to achieve responsive design just with CSS.

[Pete]

Well gang, I roughed out some more code to include making it "responsive" and added a hamburger menu. It also adds a mobile footer for social media links. That's all new stuff to me, which is why I decided to give it a go and continue working on the project.

https://www.qb64.org/forum/index.php?topic=1941.msg111703#msg111703

Go to the link above, re-download the zip file for the html and the old and newly added images, unzip (copy) them all to a new test folder, open that folder, and drag and drop the "qb64-responsive-webpage18.html" into your (hopefully) FireFox browser. That's the only browser I used for the markup, and other browsers might not play well, yet...

So I might want to make a couple of my sites mobile in the future, and working on this project has been a big help to that end. What I haven't done yet is upload it to a server to test the mobile appearance and the usability of the "hover" code, which should translate to a touch screen click via the via :active and :focus placed in the coding. A few other considerations I have are looking into support for all browser. IE and Edge, Microsoft products, seldom conform correctly. They usually require interesting hacks to get them to play nice. Since this responsive style is new to me, I haven't looked up any hacks or how to implement them. I'm just presuming either some hacks will be needed, or compromises will need to be made. Anyway, this was a blast for me to create, and maybe it can even be of some use to you guys here. Feel free to use any part or all of it if, it helps in anyway. BTW - I have no ego invested in it. I state that because I  know Fell pretty well, and I don't want him to spend even a New York minute on thinking about how I'm going to feel about whatever Team Odin decides to use when "we" leave Wix.

Pete 

[RhoSigma]

Hi Pete, hi all,

for me it's amazing to see, that we're a almost self maintaining community at qb64.org.
We have people involved in BASIC develpopment, some other (like myself) even in C++ development to advance the language itself. More than that we have specialists in Gfx (eg. bplus), in sound (eg. Petr) and in _MEM usage (Steve McNeill), we also have Pete (almost known from the "Off Topic" section;)), but now I see, he's a specialist in Web-Design too.

Also to mention the young and very talented members (thinking of names like Ashish and Prithak), who are probably the next generation of BASIC developers. (Ashish, I really like your "Hunters Revenge")

Not forgetting all the others, who enjoy and use QB64 (quietly) every day, but only write a post, if they have a problem and need some help (you're always welcome).

I'am proud to be a part of this community, and I wish everybody the best for the upcomming Christmas season, doesn't matter, if their respective religions celebrate Christmas or not. Here we are all the same, and I'm already looking forward to the next year of QB64.

[TempodiBasic]

Pete
let me say wonderful!
it lacks only of a tool to come back to specific sections  in the main page like the three circle on the Wix version (for this Wix version I found that the impossibility of coming back to the top of the webpage is a significant lackness) but the game is reached.
Cool your demonstration of how to go along a new way and reach the goal.

[TempodiBasic]

PS here results of my test loading the Pete webpage into different browser...

    Browser       results
    Opera GX       the <> buttons are wrong displayed
    Chrome          All Ok
    Opera             All Ok
    Microsoft Edge  the QB64-1-3-logo is not displayed ---> <img class="img-link" style="margin-top: 20px;" alt="QB64-1-3-logo" src="QB64-1-3-logo-transparency.png">[/url] and the <> buttons are wrong displayed

as you can see

  [ You are not allowed to view this attachment ]  
  [ You are not allowed to view this attachment ]  
  [ You are not allowed to view this attachment ]  
  [ You are not allowed to view this attachment ]  

[FellippeHeitor]

Pete, thank you so much for going the extra mile with this! It really does replicate the experience of the wix site and the responsiveness factor having been taken into consideration was a very welcome plus.

I'll be testing/tweaking this and likely getting it uploaded to our servers soon.

Again, thanks a million.

Fellippe.

[Pete]

@Tempo: Thanks for checking it on multiple browsers, and especially for taking the time to do the illustrated screen shots!

@Fell: I'm still wondering if "hover" will translate to a menu click in mobile screen resolution. If you load it up to your server, you can check that easily enough. Also, the "grey" background for the cell phone menu can be lengthened easily enough, but please note it is positioned to the top left corner with position:absolute, so unlike the other elements, it's not in a container or a table cell.

Good luck with the tweaks. I'm not big on commenting the markup, so if you need some help finding your way around, let me know, but let me know soon, because these days, anything I don't refresh my memory on within a week, starts looking foreign to me.

Now if you will excuse me, all of this coding nonsense has taken its toll, meaning my off-topic duties have been piling up, big time! :D

Hey, glad to help the endeavor, and many thanks to you, Bill, and Luke for keeping QB alive through this site, further development; and everyone else for their help with development and code contributions. It's a real pleasure still being part of the Q-munity.

Pete

[Pete]

Good news! I downloaded Opera, and it displays just fine. No problem with slide show buttons, but wait, that's not Opera GX, their new gaming browser. My hunch is that's a glitch on their end, which they will probably work out, along with whatever other bugs a new system usually has. More good news, the IE problem is actually not so much a browser issue as is is an image issue. I had copied the images from the site, but get this... when I tried to open the logo in Paint.net, it threw an error about the format! So I copied the image from the site, directly to Paint, and then saved it. The freshly re-made image displays just fine now. I made changes to all the other images with this "IE" non-display problem and I re-uploaded the zip file, so Fill, please get the latest revised copy before tweaking anything.

https://www.qb64.org/forum/index.php?topic=1941.msg111703#msg111703

OK, Last bit of good news. Since IE was not able to handle inline-flex, which is why the display looked different in IE in full screen, I changed to inline, and it works just fine now in IE and FF. I had some previous issues with inline in Firefox for some other types of displays, which is why I changed to inline-flex. I'll have to double check on this later, but the preliminary results look favorable and I changed this in the revised zip file and posted code, too.

I hope Opera will fix what I perceive to be a bug in their new gaming browser. If so, we have ourselves a good start at cross-browser compatibility. Of course the touch screen stuff still has to be checked out by somebody. My cell doesn't have a view screen. See image... Anyway, so far so good with the reported browser display issues.

Well, it's bedtime for Bonzo. And like my wife always says back... Goodnight Bonzo!

Pete

  [ You are not allowed to view this attachment ]  

[TempodiBasic]

Great Pete!
Where do you bought that fantastic cellular phone?
I like it so much! I hope that the vendor sell it online.

[bplus]

LOL I am imagining an old (don't tell Pete) VHS recorder in place of camera on top of phone.

[Pete]

LOL I am imagining an old (don't tell Pete) VHS recorder in place of camera on top of phone.

Oh thank God, off-topic at last!!! Well, there actually is a vendor that sells these phone CASES (in other words, no it isn't an actual phone, it's only a case to hold your phone.  They are pretty reasonably priced, but no, I don't actually own one. I posted it as a prank reply to TheBOB, in our QBasic Community forum.

https://www.tapatalk.com/groups/qbasic/viewtopic.php?p=213047#p213047

Find the link to zazzle.com, on the forum page 3rd post down,  and follow. Zazzle has a few different phone case models to choose from, and you can even personalize the dial number, but again, be warned, it's only a case, it's not an actual working phone. No one needs that kind of a Christmas expectation letdown... Oh wow dad, you got me a car!!! No son, it's only a car cover. Merry Christmas!!!

Hey, again, thanks for your research into the display of the webpage on different browsers. I was able to use that ifo to fix the issues, except the Opera GX, which I'm assuming is on their end and will be fixed in time.

Pete