Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive?


sk8zors

Recommended Posts

Sorry not sure where to post this new to the forums....

 

Whats the best way to make oscommerce responsive, have tried using the fluid 960gs however it causes problems with wrappers, background etc.

 

Would it be easier to strip out the grid system and just use classes and divs in pure css instead?

 

if so, where do i start to remove it?

 

Sorry again new to all this oscommerce stuff

 

Thanks Shaun

Link to comment
Share on other sites

If by "responsive" you mean how long it takes for the site to load, the gird system (html) won't make much of a difference either way. That would be due to your server, the number of your products, the size of your images, what addons you have installed and so on.

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

All of My Addons

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

I started my custom responsive (catalog side only) 2.3.x site from looking at the contribution from phpgenie and then I did a litle more and differently. See my store thread in my signature.

As I had issues with my site in IE9, I looked at the different templates available but I didn't think they did a good enough job on phones to justify me switching to one of those templates. As it happens, I just solved my issue and will for now keep on plowing through customizing it just to me (and hopefully other peoples) liking :P

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

Thanks for the replies i will check all suggestions out, @

Jack_mcs

 

i mean responsive as in mobile tablet etc, as in it scales with the viewport i have got it working using media quieries but its throwing my background etc out and is driving me mad trying to fix. I shall plod along today and try get it working properly.

Link to comment
Share on other sites

to the best of my knowledge it is totally NOT responsive, it is a different school of thought

iosc creates a complete alternate set of pages optimized for mobile phone use (small screen).

so you effectively have more code to maintain, possible SEO issues

there is a whole internet debate about what is best, obviously I'm a believer in responsive websites and only think mobile optimized apps make sense in e.g. B2B environments or really intensive use cases

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

to the best of my knowledge it is totally NOT responsive, it is a different school of thought

iosc creates a complete alternate set of pages optimized for mobile phone use (small screen).

so you effectively have more code to maintain, possible SEO issues

there is a whole internet debate about what is best, obviously I'm a believer in responsive websites and only think mobile optimized apps make sense in e.g. B2B environments or really intensive use cases

 

Yeah im with you on this i tihnk responsive is the way to go for the future, with that many devices and resolutions being introduced often makes our jobs as coders easier by having a site that will adapt instead of having to re-code for new devices.

Link to comment
Share on other sites

There is one small problem though which will get more and more apparent from now on.

 

If you use "responsive" design solely based on on screen resolution, users with the latest smart phones will not get an optimal experience.

 

New and upcoming phones like Samsung Galaxy S4, Sony Z (ZL), HTC One, Oppo Find 5 all have a resolution of 1,920×1,080 px.

Link to comment
Share on other sites

  • 5 months later...

"New and upcoming phones like Samsung Galaxy S4, Sony Z (ZL), HTC One, Oppo Find 5 all have a resolution of 1,920×1,080 px."

 

 

So what is your recommendation?

Link to comment
Share on other sites

New and upcoming phones like Samsung Galaxy S4, Sony Z (ZL), HTC One, Oppo Find 5 all have a resolution of 1,920×1,080 px.

For a phone that will fit in your pocket, are these 1920x1080 addressable but only 480x270 physical? I vaguely recall reading something about a 4:1 ratio somewhere. Is it possible to get the physical resolution rather than the virtual resolution? Does CSS3 use the virtual resolution to decide what to do?

 

What is the bottom-line difference between the two? Fuzziness? Loss of detail? Why would they give huge dimensions if they're just going to zoom out 4x anyway?

 

If it really is 1920x1080 physical pixels, the problem is then one of just being too tiny to see the details or read any text? That would seem like a bad design choice (by the hardware makers). It would be better to be an honest 480x270 and let the chips fall where they may for non-responsive web pages.

Link to comment
Share on other sites

"New and upcoming phones like Samsung Galaxy S4, Sony Z (ZL), HTC One, Oppo Find 5 all have a resolution of 1,920×1,080 px."

 

 

So what is your recommendation?

You should still go for a responsive design which is also touch optimized, that is the best way to cover as many devices as possible.
Link to comment
Share on other sites

  • 1 month later...

You should still go for a responsive design which is also touch optimized, that is the best way to cover as many devices as possible.

 

True, responsive design covers many devices. However, it still has several cons and it is not always the best option for online retailers according to a white paper published by Shopgate in September.

Link to comment
Share on other sites

True, responsive design covers many devices. However, it still has several cons and it is not always the best option for online retailers according to a white paper published by Shopgate in September.

shopgate being a provider of mobile optimized apps

"This is a must-read white paper about Responsive Web Design for online retailers who want to offer a

mobile experience that will maximize sales."

I can agree on the maximize sales for mobile use, but that question is at what cost, and the actual $$$ max sale that is feasible/realistic for your lne of business.

I personally tend to base decisions on short and long term ROI, and have difficulty justifying big investments on pure mobile optimizations. Evidently not every business case is the same, and everyone should judge for themselves. Our strategy is to optimize for the tablet couch surfer, not the on-the-go mobile user.

 

 

edit: ROI (Return On Investment = how much more you can earn (revenue - cost of goods) for the amount of money you put in)

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

update on iosC for oscommerce 2.3.3

"now you can have your cake and eat it too"

the latest version introduces a responsive design for a number of pages, but it is still a separate set of files to maintain.

Again, if your projected earnings through mobile (phone) use, it just might be wordt the additional effort or cost if you hire someone for this.

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

  • 3 weeks later...

Making sites responsive is a lot of work, using CSS media queries you can have one main stylesheet for your regular site, and a responsive style sheet to overwrite the style based on the screen size, lookup info about the CSS media query to get started, and use developer tools in your browser to help out with the style settings. Keep in mind IE is ridiculous to try to style for, so you might have to have additional separate styles for versions of IE especially IE8 and lower if you want to even mess with that. A quick example:

 

================================================================

In OsC2.3:

stylesheet.css

 

.container_24 {

margin-left: auto;

margin-right: auto;

width: 960px;

}

 

Second new stylesheet called responsive.css, called by template_top.php UNDER the stylesheet.css

 

@@media (min-width: 768px) and (max-width: 979px) {

 

.container_24 {

width: 850px;

}

 

}

 

 

@@media (min-width: 481px) and (max-width: 767px) {

 

.container_24 {

width: 650px;

}

 

}

 

@@media (max-width: 480px) {

 

.container_24 {

width: 450px;

}

 

}

 

@@media (max-width: 320px) {

 

.container_24 {

width: 300px;

}

 

}

================================================================

 

So you are basically overwriting/cancelling/adding styles based on the width of the container, but it is not for the faint of heart! You would need to change the styles for all of your elements in order to fit into the smaller screens, and use max-width on your images to make them fluid. Again, it's a lot of work.

Link to comment
Share on other sites

Again, it's a lot of work.

or you change the grid system completely into a fluid responsive grid, use less etc

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

there is a mobile solution already around on addons, so, is no need for responsive.

the solution is faster and easier to implement than creating a responsive....

Link to comment
Share on other sites

there is a mobile solution already around on addons, so, is no need for responsive.

the solution is faster and easier to implement than creating a responsive....

 

Thanks Jason. Yes, the iOsc solution is nice. I installed it on a demo and it seems ok. I'm still exploring options - not sure I want to use it. My first choice is a responsive site - for the reasons Bruyndoncx has pointed out earlier in the thread. I would like less code to maintain and be able to change my large screen site design easier --- trying to get away from the 3 column standard oscommerce look as well.

Link to comment
Share on other sites

Using a different set of pages for a mobile design allows you to optimize those pages for mobile devices, You can direct users of mobile devices to those pages by using an external service to detect users on mobile devices. It works by putting a snippet of code high up on a page. One example of such a service is www dot hand-interactive dot com

 

Using a different set of pages allows you to create a unique and simpler flow of pages for the mobile user, and really pare down the size of those pages, even to the point of using a separate images. Google 'mobile oscommerce' and you will see examples of this.

 

As far a being responsive, by using a separate set of pages, you can use a separate, simpler CSS page without the grid system, etc. But to really eliminate what is slowing down a site, use a service like 'pagespeed' on firefox to identify what is slowing things down, and if you have a separate set of mobile pages, you can just be brutal about what you eliminate without affecting your main website.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Well, it's not going to be terribly pretty either way. Either you put up with maintaining multiple code copies, each tuned to a narrow range of screen resolutions (and looking great), or you use responsive design and accept its limitations in/of CSS (a bit clunky, IMO, as you can't do wildly difference screen layouts from what I've seen). Responsive design is still an evolving area: getting there, but not highly polished.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...