Responsive DIY Template Default for v1.5.x

rbarbour:

Looking for a few testers.....

The below link includes some of the 2.0 responsive code.

I have tested using several user agents and all appear to work correctly. I want to simply test devices.

Please visit www[.]zcadditions[.]com/new_default/

Desktop users will see nothing special
Tablet users (the div#headerWrapper background should be BLUE)
Phone users (the div#headerWrapper background should be RED)

device = desktop, color = default
device = tablet, type = brand, color = blue
device = phone, type = brand, color = red

Any help is appreciated and Thank You!

device = tablet, Samsung Galaxy Tab 2 (landscape) , color = default
device = tablet, Samsung Galaxy Tab 2 (portrait) , color = black

device = phone, LG Optimus G Pro (landscape), color = default
device = phone, LG Optimus G Pro (portrait), color = default

DivaVocals:

device = tablet, Samsung Galaxy Tab 2 (landscape) , color = default
device = tablet, Samsung Galaxy Tab 2 (portrait) , color = black

device = phone, LG Optimus G Pro (landscape), color = default
device = phone, LG Optimus G Pro (portrait), color = default

device = tablet, Samsung Galaxy Tab 2 (portrait) , color = black

This tells me I was updating the code at or around the same time.

If you have time, do you mind re-testing? Only you Diva. LOL

device:laptop, HP TouchSmart (Windows 8.1, IE-11), color: default

rbarbour:

device = tablet, Samsung Galaxy Tab 2 (portrait) , color = black

This tells me I was updating the code at or around the same time.

If you have time, do you mind re-testing? Only you Diva. LOL

I do have a knack for finding obscure things.. LOL.. Testing again now.. then I have to run to get groceries.. It's RACE WEEKNEND!!!! WHOO HOO!!!

rbarbour:

device = tablet, Samsung Galaxy Tab 2 (portrait) , color = black

This tells me I was updating the code at or around the same time.

If you have time, do you mind re-testing? Only you Diva. LOL

Hmmmmmm.. still black..:dontgetit

Now here's something interesting I did find..

Using the tablets's default browser, There's a setting "Request Desktop Site". With this setting on and the tablet in portrait mode the header turns red, but in landscape it's still the default color.

BUT WAIT THERE'S MORE!!!:laugh:

Using Chrome, the header is still black in portrait mode, and the default color in landscape. When I select "Request Desktop Site", the view the colors in landscape and portrait are the default colors.

lat9:

device:laptop, HP TouchSmart (Windows 8.1, IE-11), color: default

Thank you

DivaVocals:

Hmmmmmm.. still black..:dontgetit

Good thing, I added black for tablets (orientation : portrait)

DivaVocals:

Now here's something interesting I did find..

Using the tablets's default browser, There's a setting "Request Desktop Site". With this setting on and the tablet in portrait mode the header turns red, but in landscape it's still the default color.

Not so good - shouldn't return red at all

DivaVocals:

BUT WAIT THERE'S MORE!!!:laugh:

Using Chrome, the header is still black in portrait mode, and the default color in landscape. When I select "Request Desktop Site", the view the colors in landscape and portrait are the default colors.

Request Desktop Site = should return default

Thank you

rbarbour:

Request Desktop Site = should return default
Understood.. reporting ALL findings, not just the odd things (as a good QA tester should do :smile:) Wanted to highlight how the "Desktop" setting behaved differently in two different browsers..

DivaVocals:

device = tablet, Samsung Galaxy Tab 2 (landscape) , color = default
device = tablet, Samsung Galaxy Tab 2 (portrait) , color = black

device = phone, LG Optimus G Pro (landscape), color = default
device = phone, LG Optimus G Pro (portrait), color = default
I am now seeing your popup on the tablet.. the popup informs me that I will see black in portrait and blue in landscape.. I am happy to report that this is my result on both the native browser and in Chrome..

DivaVocals:

I am now seeing your popup on the tablet.. the popup informs me that I will see black in portrait and blue in landscape.. I am happy to report that this is my result on both the native browser and in Chrome..

WHOO HOO!

Thank You

DivaVocals:

I am now seeing your popup on the tablet.. the popup informs me that I will see black in portrait and blue in landscape.. I am happy to report that this is my result on both the native browser and in Chrome..
On the smartphone, the popup says I will see orange in portrait and red in landscape.. In the native browser I see red in both views.. In Chrome I get the expected result..

DivaVocals:

On the smartphone, the popup says I will see orange in portrait and red in landscape..

This is good, at least it is recognizing your device as a mobile device. These popups are device targeted.

DivaVocals:

In the native browser I see red in both views..

Do you know what the native browser is?

DivaVocals:

In Chrome I get the expected result..

We all know Chrome is awesome to begin with.

rbarbour:

This is good, at least it is recognizing your device as a mobile device. These popups are device targeted.

Do you know what the native browser is?

We all know Chrome is awesome to begin with.the native Android browser.. not sure of the version though..

DivaVocals:

the native Android browser.. not sure of the version though..

OK, thanks for all the testing. Really helps putting together 2.0 and it's improved functions.

rbarbour:

OK, thanks for all the testing. Really helps putting together 2.0 and it's improved functions.

I'm very happy to help.. Looking forward to 2.0..

2.0 being uploaded today!

Some great new functions, get excited.

2.0 Takes a new and improved direction!

1.) 2.0 minimizes and cleans up the responsive code from 1.0
2.) 2.0 adds 98 new (px & %) column calculations.
3.) 2.0 adds side column width flexibility in (10px increments).
4.) 2.0 allows ADMIN controlled side column widths using the existing ZC stock Column Width - Left and Column Width - Right configurations
5.) 2.0 allows alternate layouts (Examples Included).
6.) 2.0 eliminates breakpoints (min-width and max-width) media query expressions in device specific CSS files.

What, no breakpoints? 2.0 now includes the use of the php-mobile-detect code! utilizing the php-mobile-detect code, we can call mobile or tablet specific stylesheets, template files and javascript files.

7.) The php-mobile-detect code now allows for DEVICE SPECIFIC javascript. (Examples Includeds)
8.) The php-mobile-detect code now allows for DEVICE SPECIFIC module or template files. (Examples Includeds)

We now detect UA's (user agents), if it detects a tablet, the only thing we need to determine is if it is in landscape or portrait mode and provide it with the best possible layout.

All we really need to do is add common breakpoints to the responsive_default.css file as a fallback for when the php-mobile-detect code doesn't detect the UA of a device. (Examples Included)

rbarbour:

2.0 being uploaded today!

Some great new functions, get excited.

2.0 Takes a new and improved direction!

1.) 2.0 minimizes and cleans up the responsive code from 1.0
2.) 2.0 adds 98 new (px & %) column calculations.
3.) 2.0 adds side column width flexibility in (10px increments).
4.) 2.0 allows ADMIN controlled side column widths using the existing ZC stock Column Width - Left and Column Width - Right configurations
5.) 2.0 allows alternate layouts (Examples Included).
6.) 2.0 eliminates breakpoints (min-width and max-width) media query expressions in device specific CSS files.

What, no breakpoints? 2.0 now includes the use of the php-mobile-detect code! utilizing the php-mobile-detect code, we can call mobile or tablet specific stylesheets, template files and javascript files.

7.) The php-mobile-detect code now allows for DEVICE SPECIFIC javascript. (Examples Includeds)
8.) The php-mobile-detect code now allows for DEVICE SPECIFIC module or template files. (Examples Includeds)

We now detect UA's (user agents), if it detects a tablet, the only thing we need to determine is if it is in landscape or portrait mode and provide it with the best possible layout.

All we really need to do is add common breakpoints to the responsive_default.css file as a fallback for when the php-mobile-detect code doesn't detect the UA of a device. (Examples Included)

I am very excited about these improvements :D They solve a lot of issues that came up with the media query only road. I am working on updating the Bradford Pure template package to be responsive using this framework. Great work Raymond, thank you so much for contributing such important work to the community :hug:

Thanks,

Anne

picaflor-azul:

I am very excited about these improvements :D They solve a lot of issues that came up with the media query only road. I am working on updating the Bradford Pure template package to be responsive using this framework.

That they do :smile: and I wanted to thank everyone for their Q&A's while testing 2.0 and the input given, as well as in other threads in regards to looking ahead.

picaflor-azul:

Great work Raymond, thank you so much for contributing such important work to the community :hug:

Thanks,

Anne

Thank you Anne, looking forward to seeing the Bradford Pure template package using 2.0.

I also forgot to mention, I added the code for the pop image to expand to it's full width & height in 2.0 also.

Thanks a bunch for this! I just have a question and a suggestion regarding the Mobile_Detect.php script:

Question: Why did you choose to put the class file in the store's root directory instead of /includes/classes?

Suggestion: For a future release, only load the class file if it hasn't already been loaded. There might be other plugins that need the mobile-detection script loaded during page-header processing.

if (!class_exists('Mobile_Detect')) {
  include_once 'Mobile_Detect.php';
}