(WAS Re: Any good responsive, modern themes?)

Started by drewactual, December 11, 2018, 08:41:58 AM

Previous topic - Next topic

drewactual

Quote from: drewactualsomething the great oracles only know?  something that is mysterious and vague to everyone but those who seek profit?  something that, unless presented with a signature by one 'in the club' is disturbingly yet not explained but with 'broken'?
If you were actually looking to improve yourself, I could take screenshots and point out the (many) broken to visually poor problems in your site. But I have the impression that probably would only serve to make you even angrier for pointing it out.


The short of it: Don't spread misinformation.
[/quote]

your impression is incorrect and demonstrates the folly of assuming.  insofar as presentation, everything i've done on that particular site is my own- suggested by users? yeah... but done by me.  i don't have near the institutionalized learning you people do- i taught myself.  can it be done better? likely so (duh) but by the standards i have knowledge of required to get the job done, it works.   it changes a little all the time, and as i discover and change issues... this differentiates me how from anyone else here?

 

Gwenwyfar

Glad to be incorrect on that one then ;) But then don't call it "close to perfect" if you're aware of what you just said.

Everyone started somewhere, no one is born knowing programming. The difference is how you're acting about it.

For starters then: How do you test what you have done?
"It is impossible to communicate with one that does not wish to communicate"

drewactual

Quote from: Gwenwyfar on December 11, 2018, 02:56:26 PM
Glad to be incorrect on that one then ;) But then don't call it "close to perfect" if you're aware of what you just said.

Everyone started somewhere, no one is born knowing programming. The difference is how you're acting about it.

For starters then: How do you test what you have done?

'how' am i acting about 'it'?  are we stuck on coding css as a skill?  We'll have to agree to disagree if so- it is not hard.  a reference book and an example, while looking at impacts of alterations, and no more than a week and just about anyone can be efficient enough with it is my position. 

but.... to the question:  I make a change and then view it on multiple devices, and ignoring antiquated browsers and devices.  as soon as it is settled, which will no doubt be some time, i'll stop h2 pushing it on every arrival, and cache it instead.  i know no other way than to see what it looks like through different browsers/devices... fortunately, google analytics allows me to see what devices the vast majority (97+%) use to view the site- so it reduces how much effort to be cross-browser/device consistent. 

i have issues with forms- not their function but their presentation.  i was also told by users they prefer to scroll right and have more room to reply or make a thread than be constrained in a form field where they can't easily look back.  these are buried in the templates for most parts.

what images are broken for you?

Gwenwyfar

No, css really isn't hard to learn the basics. That's not what I was referring to.

That is helpful to do, but it is very limited. The amount of different devices and sizes is enormous, even if just for the sheer limitation of "you can't own them all", it's not a good way to test it.

Try going to the browser's "mobile mode" and going through all sizes slowly (not the preset sizes, resize the window and go through all of it, somewhere in the range from 320px to 900px is enough for most cases). You should already notice problems in many different width ratios doing this. It is also going to be easier to fix problems than testing on a real device, since you have the inspector and all that.

I haven't looked at how are the forms, but maybe they're just too small?
"It is impossible to communicate with one that does not wish to communicate"

Arantor

You might want to research BrowserShots or Selenium...

drewactual

I will do this, Gwenwyfar, as it is something i want to be 'right'.  thank you for your offering.  right now the css is set to 650px- and i've attempted to use fluid constraints to manage it- and with varying results.  most recently i've started to use view points (view-width [vw] and view-height [vh]) and abandoning percentages.... it's a mix (aka mess) right now.  i should complete that hopefully after the Christmas, where some time may appear. 

and for the record... as i went back to look- I don't mean to say MY site response is 'perfect'... i get my hack up and go into defense mode and give people exactly what i think they expect of me... what i DO want to say is that a responsive action decided by CSS is 'perfect'.  there is a lot of things outside css than need to be addressed to make it truly 'responsive', but using CSS to make a page respond IS the 'perfect' solution, even if not practical in the case of 2.x (with lots of embedded style). 

Gwenwyfar

#26
Quote from: Arantor on December 11, 2018, 03:16:28 PM
You might want to research BrowserShots or Selenium...
It doesn't replace doing the basic tests above though. It's more to check browser compatibility. And for mobile the companies that do live testing are paid.


@drewactual: I see, that wasn't what it looked like. Good luck with it :)
"It is impossible to communicate with one that does not wish to communicate"

Arantor

It can be a useful alternative, and Selenium lets you automate all kinds of things...

Gwenwyfar

#28
I never actually used selenium. I looked over it a couple times and I could never figure out what's the point compared to other browser tests like BrowserStack. I can't imagine what use is there to automate something you can do in the browser.

Maybe I'm missing something, but I can only think of it being useful to companies who are going to run all sorts of tests :P What would you say is the use of it in this case?
"It is impossible to communicate with one that does not wish to communicate"

Arantor

Writing tests! Consider the situation of telling the browser to resize and be able to verify what was visible and what wasn't, so you could change it and know you hadn't broken things.

Gwenwyfar

#30
While that is interesting, that is the least of my concerns as it is not a common problem to happen. What if it is all visible but looks mangled?

What about simultaneously testing many pages all at once? That would be very useful. The same but telling you everything that has changed at which width would be nice too.
"It is impossible to communicate with one that does not wish to communicate"

Arantor

Mangled is a thing you do have to do by eye, but it certainly wouldn't be that hard (at least not for me, I've done it) to set up a setup whereby a Selenium server farms out requests to browsers to generate a set of screenshots at different sizes. So the cycle becomes "tweak some code, run a script, observe all the screenshots".

That mostly depends how far down the rabbit hole you are - I do a fair amount of test automation at work so adding tools for resizing browsers for responsive mode checking is no big deal on top of automated functionality testing. (I already have it capable of screenshots or videos of test runs as required)

drewactual

now that my 'season' is over and i don't fear diving into the site again, I've made a lot of changes to the templates and css, and using the tools you guys have offered.  can i get one of you to give a cursory look at it and give me your impressions?  i would really appreciate it. 

and Arantor: I'm not letting it go, Sir, you gave me something you worked on and i at least owe you funds to buy yourself a lunch... please send address.

Gwenwyfar

Huh, I completely missed this, probably due to the edit marking this as read.

Quote from: Arantor on December 12, 2018, 03:18:19 AM
Mangled is a thing you do have to do by eye, but it certainly wouldn't be that hard (at least not for me, I've done it) to set up a setup whereby a Selenium server farms out requests to browsers to generate a set of screenshots at different sizes. So the cycle becomes "tweak some code, run a script, observe all the screenshots".

That mostly depends how far down the rabbit hole you are - I do a fair amount of test automation at work so adding tools for resizing browsers for responsive mode checking is no big deal on top of automated functionality testing. (I already have it capable of screenshots or videos of test runs as required)
Yep, exactly why something automating screenshots and comparisons would be more useful. And multi-page testing would actually be pretty handy too, but if something does it I didn't find anything (even better if it's like the browser itself, and resizing one resizes all pages as they display side by side).

If you were to go all the way on it, you could also compare images themselves and scan for differences and highlight them... now whether someone out there already did that is another story. As for me, I don't have the skills and I would not use it that much to be worth the time investment, so I'll keep dreaming someone invents something similar out of the box >:D

Quotenow that my 'season' is over and i don't fear diving into the site again, I've made a lot of changes to the templates and css, and using the tools you guys have offered.  can i get one of you to give a cursory look at it and give me your impressions?  i would really appreciate it. 
I'll take a look later :)
"It is impossible to communicate with one that does not wish to communicate"

Arantor

Quote from: drewactual on January 25, 2019, 10:44:07 AM
now that my 'season' is over and i don't fear diving into the site again, I've made a lot of changes to the templates and css, and using the tools you guys have offered.  can i get one of you to give a cursory look at it and give me your impressions?  i would really appreciate it. 

and Arantor: I'm not letting it go, Sir, you gave me something you worked on and i at least owe you funds to buy yourself a lunch... please send address.

I gave it away for free in the hopes it would be useful, and I got something out of it along the way, you honestly owe me nothing :)

Mick.

Wow. Didnt know the turn this thread took. Look man, I first dabble in smf responsive themes in 2013. Some can say I was one of the few in that area but took a 5 year leave due to personal reasons. Now I'm back and I have 3 responsive themes here in the theme site. Are they perfect? Hell no, and I'm pretty good at html and css but lack in php knowledge but i read and search a lot here on smf to help me learn. I suggest you try the 50 or so responsive themes and adapt them to your purposes. My themes as well as others are mobile friendly and get the job done. Chill out man, we're not here for the money. My themes are free. Period.

Btw, I too wrench and can install a blower.

drewactual

#36
i was having a bad day and vented some of that here, to which i apologize.  no excuses. 

'perfect' is a purely CSS responsive presentation, by my reckoning.  I've achieved a good portion of that.  You're right, I could use 'one of the many available and adapt it to my needs', but that isn't the point... the point is doing it myself and having something unique. 

I have four (validator) errors on my page currently- mostly from where i drag WordPress into the foray.  Google's pagespeed rates the page a 100 for desktop and a 97 for mobile.  The presentation isn't bad, but there are plenty of loose ends around.  the most challenging things to me are rooting out inline style and extracting it so i can make things work with the external file exclusively.  That is my intent, and I think it can be accomplished with persistence... I stand by the solution being the 'perfect' solution, though a lot of html adjustments have to be made to prepare that solution. 

As a for instance, i played with flexbox's, column/cell display, and all kinds of other more localized notions- just to return to basic relative div's for layout framework 'bones'... I screwed myself while doing that by leaving a lot of tags laying around buried in the various templates... there is nothing more frustrating to me than struggling with rules i know should behave one way yet don't, and end up just making a note of it and slapping a band aide on it.... just to circle back around and discover the reason the rule didn't behave, and realize i didn't note the 'band aide' adjustments.... it's a running firefight, but one i enjoy.  it keeps my mind occupied.   

by the way, you wouldn't be the Mick that wrote Bella Citta premium theme would you?

edited to add:  I've made a @media rule with a break point of 1024px, and one for screens excess of 1800px i think it was- once i get this one as close to perfect as it'll get, i'll start on screens <450px..... as it is, i'm fortunate to find the vast majority of my users are in the US and 'predictable' in what they use to browse... the vast majority of phones being actually being used will support the design as is, and best i can tell there is not a single one that triggers the 1800+px so far.  my parameters are likely a lot more defined than many who try to do this.  it gives me wiggle room to focus on things and figuring the rest is 'okay for now'.   

drewactual

IT IS YOU!!!!! Check your PM's, I've sent you at least two from here... https://www.idesignsmf.com/index.php?topic=357.0

this theme in question began life as YOURS... your Bella Citta theme.  I snatched it a few years ago, and found myself working with it when it was the only theme in my collection remaining on the server. 

please check it out- long story short, I have the lions share of your theme adapted, and ready for you to take over.  I DID use the majority of your assigned divs, spans, ect, but added a bunch of my own.  what remains of your theme is very little, at this point insofar as even the index.template is concerned.  I will gladly hand it over to you as a start if you were to consider making that theme responsive as well. 

the folder/directory that theme is in remains named 'bellacitta', and the lions share of the 'js' directory is intact.  the images aren't, where icons are concerned. 

I've never butchered a theme like i did yours in this instance- but the theme DID begin as yours (very little remains, though, except for what is described above)... long story short: your theme was in my directory and available for 'chop' while i used the smf editor to edit it (was in a sandy hot place at the time and couldn't load applications like filezilla or access cpanel due to big brother's network policy)... I will gladly offer you credit back for it and post it if you request- and as stated, you're a good ways ahead by taking the @media css rendering it responsive. 


Mick.

Quote from: drewactual on January 25, 2019, 07:30:32 PM
IT IS YOU!!!!! Check your PM's, I've sent you at least two from here... https://www.idesignsmf.com/index.php?topic=357.0

this theme in question began life as YOURS... your Bella Citta theme.  I snatched it a few years ago, and found myself working with it when it was the only theme in my collection remaining on the server. 

please check it out- long story short, I have the lions share of your theme adapted, and ready for you to take over.  I DID use the majority of your assigned divs, spans, ect, but added a bunch of my own.  what remains of your theme is very little, at this point insofar as even the index.template is concerned.  I will gladly hand it over to you as a start if you were to consider making that theme responsive as well. 

the folder/directory that theme is in remains named 'bellacitta', and the lions share of the 'js' directory is intact.  the images aren't, where icons are concerned. 

I've never butchered a theme like i did yours in this instance- but the theme DID begin as yours (very little remains, though, except for what is described above)... long story short: your theme was in my directory and available for 'chop' while i used the smf editor to edit it (was in a sandy hot place at the time and couldn't load applications like filezilla or access cpanel due to big brother's network policy)... I will gladly offer you credit back for it and post it if you request- and as stated, you're a good ways ahead by taking the @media css rendering it responsive. 


Yup, I did Bella Cita in 2013. Its non responsive and pretty much generic. My own site uses Pixel theme and has been responsive since 2013 including SimplePortal mod (landing page). Many edits that quite frankly i wouldnt know how to share my edits. I was gone for 5 yrs and picked it up again this past July. No changes on my site since other than colors. That Bella Cita theme I dont even offer it for download on my site, I forgot all about it lol. Anyways, these days Im a lot better at themeing. That theme is yours to do what you want. Chop it, cut it, burn it, its yours. But I still think you should try todays themes and adapt them to your needs. I use Deluxe theme as a boiler plate. Its a default theme knock off non responsive back in 2013 that i still use today to build new themes but Dani theme is my go-to theme making boiler plate as of late. Every theme i make, gets better and better but Deluxe started it all.

drewactual

I don't want to be a pain or beg, but... I'd truly appreciate a review from the crowd here..

the site scores higher than most 'responsive' themes found in the themes section here, and it is burdened with a lot of mods those aren't.   but machines reviewing isn't human interaction or eyes of design experts.  I could ask folks who don't know anything about this to critique, but... that isn't productive.  the score is dependent largely by the stories the aggregate drags in (imports via WP and is shown on the forums index sidebar) from time to time it will be lower, but i've not seen pagespeed score it lower than 85-mobile or 94-desktop. 

thoughts?

Advertisement: