OFBiz / BigFish: New client is hooked!
Locked
OFBiz / BigFish: New client is hooked!
 
|
All,
I'm proud to announce another client to the BigFish platform. Checkout: www.eagansemporium.com What was interesting with this implementation was that the client was already an OFBiz platform user. We were able to basically "snap on" the BigFish solution; do some CSS styling; add some BigFish content and the site was done. Products were already loaded, payment gateways setup etc. which made for a very fast implementation time. It's a nice simple site and with a focus on the ultra high-end "indulgence" market! Now that they are on a new platform I know there are plans to add more products and really begin to build up a good business following -- something that was not a priority when content could not be managed quite so easily. -- Best Regards, Nick Rosser [hidden email] O: 516.742.7888 x221 C: 516.901.1720 |
|
|
Nice work Nick
I like your CSS -----Original Message----- From: Nick Rosser [mailto:[hidden email]] Sent: Wednesday, January 23, 2013 12:12 PM To: [hidden email] Subject: OFBiz / BigFish: New client is hooked! All, I'm proud to announce another client to the BigFish platform. Checkout: www.eagansemporium.com What was interesting with this implementation was that the client was already an OFBiz platform user. We were able to basically "snap on" the BigFish solution; do some CSS styling; add some BigFish content and the site was done. Products were already loaded, payment gateways setup etc. which made for a very fast implementation time. It's a nice simple site and with a focus on the ultra high-end "indulgence" market! Now that they are on a new platform I know there are plans to add more products and really begin to build up a good business following -- something that was not a priority when content could not be managed quite so easily. -- Best Regards, Nick Rosser [hidden email] O: 516.742.7888 x221 C: 516.901.1720 |
Re: OFBiz / BigFish: New client is hooked!
|
|
In reply to this post by Nick Rosser
Nick, Its a nice achievement. Good to know that an eCommerce platform based on OFBiz is delivered in cost effective manner like any other eCommerce products.
Regards Vikas On Jan 24, 2013, at 1:42 AM, Nick Rosser wrote: > All, > > I'm proud to announce another client to the BigFish platform. > > Checkout: www.eagansemporium.com > > What was interesting with this implementation was that the client was already an OFBiz platform user. We were able to basically "snap on" the BigFish solution; do some CSS styling; add some BigFish content and the site was done. Products were already loaded, payment gateways setup etc. which made for a very fast implementation time. > > It's a nice simple site and with a focus on the ultra high-end "indulgence" market! Now that they are on a new platform I know there are plans to add more products and really begin to build up a good business following -- something that was not a priority when content could not be managed quite so easily. > > -- > Best Regards, > > Nick Rosser > [hidden email] > O: 516.742.7888 x221 > C: 516.901.1720 > |
smime.p7s (6K)
Re: OFBiz / BigFish: New client is hooked!
|
|
Vikas,
Thanks for the encouragement! The platform is improving every week and we're really beginning to focus on "business / marketing" folks getting more involved. Our plan would be for the techs to setup an "instance" and then hand it over to these "business / marketing" folks. They would be responsible for creating a product feed (XML or XLS), loading in products, creating other content via the Admin Module and working directly with a UI designer who would use CSS for the front-end styling. Then the techs can continue to focus on other feature requests that we have queued up, without getting dragged into the details of an implementation. So far this is "kinda" working -- the current implementation we're working on is beginning to prove out the above, it's looking good. More info at: http://bigfish.salmonllc.com Best Regards, Nick Rosser [hidden email] O: 516.742.7888 x221 C: 516.901.1720 On 1/24/2013 4:24 AM, Vikas Mayur wrote: > Nick, Its a nice achievement. Good to know that an eCommerce platform based on OFBiz is delivered in cost effective manner like any other eCommerce products. > > Regards > Vikas > > On Jan 24, 2013, at 1:42 AM, Nick Rosser wrote: > >> All, >> >> I'm proud to announce another client to the BigFish platform. >> >> Checkout: www.eagansemporium.com >> >> What was interesting with this implementation was that the client was already an OFBiz platform user. We were able to basically "snap on" the BigFish solution; do some CSS styling; add some BigFish content and the site was done. Products were already loaded, payment gateways setup etc. which made for a very fast implementation time. >> >> It's a nice simple site and with a focus on the ultra high-end "indulgence" market! Now that they are on a new platform I know there are plans to add more products and really begin to build up a good business following -- something that was not a priority when content could not be managed quite so easily. >> >> -- >> Best Regards, >> >> Nick Rosser >> [hidden email] >> O: 516.742.7888 x221 >> C: 516.901.1720 >> |
Re: OFBiz / BigFish: New client is hooked!
|
|
In reply to this post by SkipDever
Skip,
Do you mean the end-result UI? This was a nice challenge for us -- the client wanted a new logo and a completely new look. I think it works. And more importantly, the client loves it! Or the fact that all the styling is delegated to the CSS? We've gone to great pains to allow styling in the CSS with no back-end code changes. So far it's working! And don't forget our "small device / mobile" solution uses a responsive CSS approach, check out http://bigfish.salmonllc.com:8082/online/shop/main and resize your browser to less than 450 pixels (work in progress, but you get the idea!). Either way, thanks! For more info visit: http://bigfish.salmonllc.com Best Regards, Nick Rosser [hidden email] O: 516.742.7888 x221 C: 516.901.1720 On 1/23/2013 5:43 PM, Skip wrote: > Nice work Nick > > I like your CSS > > -----Original Message----- > From: Nick Rosser [mailto:[hidden email]] > Sent: Wednesday, January 23, 2013 12:12 PM > To: [hidden email] > Subject: OFBiz / BigFish: New client is hooked! > > > All, > > I'm proud to announce another client to the BigFish platform. > > Checkout: www.eagansemporium.com > > What was interesting with this implementation was that the client was > already an OFBiz platform user. We were able to basically "snap on" the > BigFish solution; do some CSS styling; add some BigFish content and the > site was done. Products were already loaded, payment gateways setup etc. > which made for a very fast implementation time. > > It's a nice simple site and with a focus on the ultra high-end > "indulgence" market! Now that they are on a new platform I know there > are plans to add more products and really begin to build up a good > business following -- something that was not a priority when content > could not be managed quite so easily. > |
|
|
Hi Nick,
On Thu, Jan 24, 2013 at 9:02 AM, Nick Rosser <[hidden email]> wrote: > > Or the fact that all the styling is delegated to the CSS? We've gone to > great pains to allow styling in the CSS with no back-end code changes. So > far it's working! And don't forget our "small device / mobile" solution uses > a responsive CSS approach, check out The notion of making a web application flexible enough to display well, and remain useful, on any device whether a smart phone or desktop with a huge monitor, is something I am beginning to examine. Can you recommend some online resources for studying how to use CSS to do this? Being a programmer, my first thought on making my web apps adapt their interfaces to the device on which they're displayed was to use some fo the new features in HTML5 to learn what the device is, and then programmatically (using Javascript on the client side and perl or Java or C++ on the server side) adapt the interface to available screen realestate. I know little about CSS and have in the past limited myself to either having a colleague, who is a CSS guru, revise our CSS files, or writing my own inline CSS; and thus only with my web apps where the server side code is implemented in Perl (I don't think I ever used CSS with a JSP/JSF application). I am thus intrigued by the notion that you can do this sort of thing without programmatic changes by using the right CSS. I guess, a related question involves how, or whether, this sort of practice can be used with jQuery. Cheers Ted |
Re: OFBiz / BigFish: New client is hooked!
|
|
In reply to this post by Nick Rosser
Nick, This looks quite interesting and promising. Wish you good luck !!
Regards Vikas On Jan 24, 2013, at 6:51 PM, Nick Rosser wrote: > Vikas, > > Thanks for the encouragement! The platform is improving every week and we're really beginning to focus on "business / marketing" folks getting more involved. Our plan would be for the techs to setup an "instance" and then hand it over to these "business / marketing" folks. They would be responsible for creating a product feed (XML or XLS), loading in products, creating other content via the Admin Module and working directly with a UI designer who would use CSS for the front-end styling. > > Then the techs can continue to focus on other feature requests that we have queued up, without getting dragged into the details of an implementation. > > So far this is "kinda" working -- the current implementation we're working on is beginning to prove out the above, it's looking good. > > More info at: http://bigfish.salmonllc.com > > Best Regards, > > Nick Rosser > [hidden email] > O: 516.742.7888 x221 > C: 516.901.1720 > > > On 1/24/2013 4:24 AM, Vikas Mayur wrote: >> Nick, Its a nice achievement. Good to know that an eCommerce platform based on OFBiz is delivered in cost effective manner like any other eCommerce products. >> >> Regards >> Vikas >> >> On Jan 24, 2013, at 1:42 AM, Nick Rosser wrote: >> >>> All, >>> >>> I'm proud to announce another client to the BigFish platform. >>> >>> Checkout: www.eagansemporium.com >>> >>> What was interesting with this implementation was that the client was already an OFBiz platform user. We were able to basically "snap on" the BigFish solution; do some CSS styling; add some BigFish content and the site was done. Products were already loaded, payment gateways setup etc. which made for a very fast implementation time. >>> >>> It's a nice simple site and with a focus on the ultra high-end "indulgence" market! Now that they are on a new platform I know there are plans to add more products and really begin to build up a good business following -- something that was not a priority when content could not be managed quite so easily. >>> >>> -- >>> Best Regards, >>> >>> Nick Rosser >>> [hidden email] >>> O: 516.742.7888 x221 >>> C: 516.901.1720 >>> |
|
|
In reply to this post by Ted Byers
Ted
Firebug is your friend. Go have a look at qz.com and then inspect the elements with firebug. Change to responsive view and continue looking while you change the screen sizes. css @media is key. Also have a look at http://jquerymobile.com/. This interface is "mobile first", but can be adapted to "mobile also". http://www.jquery4u.com is really useful with lots of tutorials. The big problem for me is bandwidth on mobile devices. The @media tricks mostly involve hiding certain "not completely necessary" elements. However, they are still sent to the browser consuming bandwidth. This bit of javascript worked for me in a specialized situation (I am adapting it for use in a more mainline application). There are others on this forum who don't like these javascript tricks, but it works and in my view especially useful for bandwidth constrained devices. //Also times the round trip time of the Ajax call sendScreenWidthToServer(screen.width); if (screen.width < 800) { document.location = "/mobile/control/calc"; } Skip -----Original Message----- From: Ted Byers [mailto:[hidden email]] Sent: Thursday, January 24, 2013 6:44 AM To: [hidden email] Subject: Re: OFBiz / BigFish: New client is hooked! Hi Nick, On Thu, Jan 24, 2013 at 9:02 AM, Nick Rosser <[hidden email]> wrote: > > Or the fact that all the styling is delegated to the CSS? We've gone to > great pains to allow styling in the CSS with no back-end code changes. So > far it's working! And don't forget our "small device / mobile" solution uses > a responsive CSS approach, check out The notion of making a web application flexible enough to display well, and remain useful, on any device whether a smart phone or desktop with a huge monitor, is something I am beginning to examine. Can you recommend some online resources for studying how to use CSS to do this? Being a programmer, my first thought on making my web apps adapt their interfaces to the device on which they're displayed was to use some fo the new features in HTML5 to learn what the device is, and then programmatically (using Javascript on the client side and perl or Java or C++ on the server side) adapt the interface to available screen realestate. I know little about CSS and have in the past limited myself to either having a colleague, who is a CSS guru, revise our CSS files, or writing my own inline CSS; and thus only with my web apps where the server side code is implemented in Perl (I don't think I ever used CSS with a JSP/JSF application). I am thus intrigued by the notion that you can do this sort of thing without programmatic changes by using the right CSS. I guess, a related question involves how, or whether, this sort of practice can be used with jQuery. Cheers Ted |
|
|
In reply to this post by Nick Rosser
Nick
I was refering to the coloring, use of gradients on mouseover for buttons, and the like. Very nicely done. In my opinion, your could have styled your eCommerceListItem and/or productListItem so that on smaller screen widths, the div are two wide and then one wide. Its also pretty nice to have the images smaller on mobile devices. Checkout qz.com to see this all work. Skip -----Original Message----- From: Nick Rosser [mailto:[hidden email]] Sent: Thursday, January 24, 2013 6:02 AM To: [hidden email] Subject: Re: OFBiz / BigFish: New client is hooked! Skip, Do you mean the end-result UI? This was a nice challenge for us -- the client wanted a new logo and a completely new look. I think it works. And more importantly, the client loves it! Or the fact that all the styling is delegated to the CSS? We've gone to great pains to allow styling in the CSS with no back-end code changes. So far it's working! And don't forget our "small device / mobile" solution uses a responsive CSS approach, check out http://bigfish.salmonllc.com:8082/online/shop/main and resize your browser to less than 450 pixels (work in progress, but you get the idea!). Either way, thanks! For more info visit: http://bigfish.salmonllc.com Best Regards, Nick Rosser [hidden email] O: 516.742.7888 x221 C: 516.901.1720 On 1/23/2013 5:43 PM, Skip wrote: > Nice work Nick > > I like your CSS > > -----Original Message----- > From: Nick Rosser [mailto:[hidden email]] > Sent: Wednesday, January 23, 2013 12:12 PM > To: [hidden email] > Subject: OFBiz / BigFish: New client is hooked! > > > All, > > I'm proud to announce another client to the BigFish platform. > > Checkout: www.eagansemporium.com > > What was interesting with this implementation was that the client was > already an OFBiz platform user. We were able to basically "snap on" the > BigFish solution; do some CSS styling; add some BigFish content and the > site was done. Products were already loaded, payment gateways setup etc. > which made for a very fast implementation time. > > It's a nice simple site and with a focus on the ultra high-end > "indulgence" market! Now that they are on a new platform I know there > are plans to add more products and really begin to build up a good > business following -- something that was not a priority when content > could not be managed quite so easily. > |
Re: OFBiz / BigFish: New client is hooked!
|
|
Skip,
Thanks for the compliment! Our Fashion House demo does resize, but only once the screen size gets to 450px or less (and is one product wide). The same technique can be used for other screen widths (so we could have a 2 product wide version at say 600px). For the demo it's probably worth doing, to illustrate a truly responsive approach, interacting dynamically with different screen sizes. I'll challenge our UI team to put something together. It gets very interesting targeting very specific devices or sizes of screen -- at what point do you lose some basic functionality when morphing content to a smaller device size? When a user has the flexibility, such as a desktop browser, then this stuff is all great and makes for an impressive demo. I know that as an iPad (or iPad mini) user I'm perfectly happy with a "regular" presentation -- I wouldn't want anything else. Leads to some very interesting debates (as you well know!). Best Regards, Nick Rosser [hidden email] O: 516.742.7888 x221 C: 516.901.1720 On 1/24/2013 12:04 PM, Skip wrote: > Nick > > I was refering to the coloring, use of gradients on mouseover for buttons, > and the like. Very nicely done. > > In my opinion, your could have styled your eCommerceListItem and/or > productListItem so that on smaller screen widths, the div are two wide and > then one wide. Its also pretty nice to have the images smaller on mobile > devices. Checkout qz.com to see this all work. > > Skip > > -----Original Message----- > From: Nick Rosser [mailto:[hidden email]] > Sent: Thursday, January 24, 2013 6:02 AM > To: [hidden email] > Subject: Re: OFBiz / BigFish: New client is hooked! > > > Skip, > > Do you mean the end-result UI? This was a nice challenge for us -- the > client wanted a new logo and a completely new look. I think it works. > And more importantly, the client loves it! > > Or the fact that all the styling is delegated to the CSS? We've gone to > great pains to allow styling in the CSS with no back-end code changes. > So far it's working! And don't forget our "small device / mobile" > solution uses a responsive CSS approach, check out > http://bigfish.salmonllc.com:8082/online/shop/main and resize your > browser to less than 450 pixels (work in progress, but you get the idea!). > > Either way, thanks! > > For more info visit: http://bigfish.salmonllc.com > > Best Regards, > > Nick Rosser > [hidden email] > O: 516.742.7888 x221 > C: 516.901.1720 > > > On 1/23/2013 5:43 PM, Skip wrote: >> Nice work Nick >> >> I like your CSS >> >> -----Original Message----- >> From: Nick Rosser [mailto:[hidden email]] >> Sent: Wednesday, January 23, 2013 12:12 PM >> To: [hidden email] >> Subject: OFBiz / BigFish: New client is hooked! >> >> >> All, >> >> I'm proud to announce another client to the BigFish platform. >> >> Checkout: www.eagansemporium.com >> >> What was interesting with this implementation was that the client was >> already an OFBiz platform user. We were able to basically "snap on" the >> BigFish solution; do some CSS styling; add some BigFish content and the >> site was done. Products were already loaded, payment gateways setup etc. >> which made for a very fast implementation time. >> >> It's a nice simple site and with a focus on the ultra high-end >> "indulgence" market! Now that they are on a new platform I know there >> are plans to add more products and really begin to build up a good >> business following -- something that was not a priority when content >> could not be managed quite so easily. >> |
|
|
In reply to this post by Ted Byers
Ted,
I am the UI/CSS developer for BigFish who designed Eagan's Emporium <http://www.eagansemporium.com> and is developing the responsive mobile approach on our Fashion House demo <http://bigfish.salmonllc.com:8082/online/shop/main>. To see the responsive concept in action view the demo and resize your browser to a width of 450 pixels. A note about mobile design: The two camps of Responsive Design (one site that adapts to various devices) and Targeted Design (various sites that load respective to the device being used) each have Pros and Cons. While your specific project's requirements are ultimately going to determine the tie-breaker, I see the most potential in Responsive Design. Responsive Design's greatest advantage that it puts the task of device rendering exclusively in the hands of the designer and the CSS. It allows for solutions to be displayed on a range of devices and not /device 1, device 2, /and so on. The exemplary concept of CSS is that it separates design from content- and in most (certainly not all) cases of mobile design, the primary goal is delivering the same consistent content with a design that is best suited to the user and whatever device they're using. I saw in your email that you were interested in some online CSS resources. Below our a few of my favorites that cover some basic core-concepts as well some remarkable new strategies and ideas. http://www.alistapart.com in my opinion is one of the premier online CSS/HTML resources. Their contributors are well known CSS Rock Starsauthors and the topics cover everything from design, best practices, mobile strategies, and more. http://css-tricks.com is another fantastic online resource. Like A List Apart, this site covers many concepts from basic to advanced and comes equipped with a very active and helpful user forum. http://www.htmldog.com is a great site for fundamentals and getting started with CSS. I remember using their guides when I was cutting my teeth on CSS many years ago and the core principles haven't changed. It covers basic and moderate examples quite well- I'd recommend starting with this site if you really want to immerse yourself in CSS. Lastly, Firebug <https://getfirebug.com/> and the Web Developer Tool Bar <https://addons.mozilla.org/en-US/firefox/addon/web-developer/> (both available for Firefox and Chrome) are two excellent browser add-ons. Firebug allows you to select any element and modify the CSS in real-time within the browser. I'm aware that most modern browsers have code inspectors in them, but I prefer FireBug's options and workflow. The Web Developer Tool Bar has a plethora of resources that allow you to validate your CSS, quickly change view-port sizes (handy when you're developing for mobile), and much more. For some information on how we incorporated the mobile approach into the Fashion House demo, you can check out our mobile device help file <http://bigfish.salmonllc.com/help/howSetupMobile.htm>. These links should definitely get you started. I would subscribe to some of their feeds as they're routinely updated. Best of Luck, James Stewart On 1/24/2013 9:44 AM, Ted Byers wrote: > Hi Nick, > > On Thu, Jan 24, 2013 at 9:02 AM, Nick Rosser <[hidden email]> wrote: >> Or the fact that all the styling is delegated to the CSS? We've gone to >> great pains to allow styling in the CSS with no back-end code changes. So >> far it's working! And don't forget our "small device / mobile" solution uses >> a responsive CSS approach, check out > The notion of making a web application flexible enough to display > well, and remain useful, on any device whether a smart phone or > desktop with a huge monitor, is something I am beginning to examine. > Can you recommend some online resources for studying how to use CSS to > do this? Being a programmer, my first thought on making my web apps > adapt their interfaces to the device on which they're displayed was to > use some fo the new features in HTML5 to learn what the device is, and > then programmatically (using Javascript on the client side and perl or > Java or C++ on the server side) adapt the interface to available > screen realestate. I know little about CSS and have in the past > limited myself to either having a colleague, who is a CSS guru, revise > our CSS files, or writing my own inline CSS; and thus only with my web > apps where the server side code is implemented in Perl (I don't think > I ever used CSS with a JSP/JSF application). I am thus intrigued by > the notion that you can do this sort of thing without programmatic > changes by using the right CSS. I guess, a related question involves > how, or whether, this sort of practice can be used with jQuery. > > Cheers > > Ted |
Re: OFBiz / BigFish: New client is hooked!
|
|
Hi James,
i just had a look at the http://www.eagansemporium.com website. There are some small tricks that can make your website faster by doing some front end engineering (what's in a name) - enable compression (gzip) on the webserver for all text related content (txt, css, js, html etc) - some images where scaled in html, it is better to size them correctly (e.g. cigarettecase2_sbl.png is resized from 355 x 355 to 250 x 250. Serving a scaled image could save some KB) - run minify over the .js files The three actions together could have as a result that you have +/- 1 MB less to download to the client hence your website will seem to respond faster. Kind regards Tore On 24/01/13 20:26, James wrote: > Ted, > > I am the UI/CSS developer for BigFish who designed Eagan's Emporium > <http://www.eagansemporium.com> and is developing the responsive > mobile approach on our Fashion House demo > <http://bigfish.salmonllc.com:8082/online/shop/main>. To see the > responsive concept in action view the demo and resize your browser to > a width of 450 pixels. > > A note about mobile design: The two camps of Responsive Design (one > site that adapts to various devices) and Targeted Design (various > sites that load respective to the device being used) each have Pros > and Cons. While your specific project's requirements are ultimately > going to determine the tie-breaker, I see the most potential in > Responsive Design. Responsive Design's greatest advantage that it puts > the task of device rendering exclusively in the hands of the designer > and the CSS. It allows for solutions to be displayed on a range of > devices and not /device 1, device 2, /and so on. The exemplary > concept of CSS is that it separates design from content- and in most > (certainly not all) cases of mobile design, the primary goal is > delivering the same consistent content with a design that is best > suited to the user and whatever device they're using. > > I saw in your email that you were interested in some online CSS > resources. Below our a few of my favorites that cover some basic > core-concepts as well some remarkable new strategies and ideas. > > http://www.alistapart.com in my opinion is one of the premier online > CSS/HTML resources. Their contributors are well known CSS Rock > Starsauthors and the topics cover everything from design, best > practices, mobile strategies, and more. > > http://css-tricks.com is another fantastic online resource. Like A > List Apart, this site covers many concepts from basic to advanced and > comes equipped with a very active and helpful user forum. > > http://www.htmldog.com is a great site for fundamentals and getting > started with CSS. I remember using their guides when I was cutting my > teeth on CSS many years ago and the core principles haven't changed. > It covers basic and moderate examples quite well- I'd recommend > starting with this site if you really want to immerse yourself in CSS. > > Lastly, Firebug <https://getfirebug.com/> and the Web Developer Tool > Bar <https://addons.mozilla.org/en-US/firefox/addon/web-developer/> > (both available for Firefox and Chrome) are two excellent browser > add-ons. Firebug allows you to select any element and modify the CSS > in real-time within the browser. I'm aware that most modern browsers > have code inspectors in them, but I prefer FireBug's options and > workflow. The Web Developer Tool Bar has a plethora of resources that > allow you to validate your CSS, quickly change view-port sizes (handy > when you're developing for mobile), and much more. > > For some information on how we incorporated the mobile approach into > the Fashion House demo, you can check out our mobile device help file > <http://bigfish.salmonllc.com/help/howSetupMobile.htm>. > > These links should definitely get you started. I would subscribe to > some of their feeds as they're routinely updated. > > Best of Luck, > > James Stewart > > > On 1/24/2013 9:44 AM, Ted Byers wrote: >> Hi Nick, >> >> On Thu, Jan 24, 2013 at 9:02 AM, Nick Rosser <[hidden email]> >> wrote: >>> Or the fact that all the styling is delegated to the CSS? We've gone to >>> great pains to allow styling in the CSS with no back-end code >>> changes. So >>> far it's working! And don't forget our "small device / mobile" >>> solution uses >>> a responsive CSS approach, check out >> The notion of making a web application flexible enough to display >> well, and remain useful, on any device whether a smart phone or >> desktop with a huge monitor, is something I am beginning to examine. >> Can you recommend some online resources for studying how to use CSS to >> do this? Being a programmer, my first thought on making my web apps >> adapt their interfaces to the device on which they're displayed was to >> use some fo the new features in HTML5 to learn what the device is, and >> then programmatically (using Javascript on the client side and perl or >> Java or C++ on the server side) adapt the interface to available >> screen realestate. I know little about CSS and have in the past >> limited myself to either having a colleague, who is a CSS guru, revise >> our CSS files, or writing my own inline CSS; and thus only with my web >> apps where the server side code is implemented in Perl (I don't think >> I ever used CSS with a JSP/JSF application). I am thus intrigued by >> the notion that you can do this sort of thing without programmatic >> changes by using the right CSS. I guess, a related question involves >> how, or whether, this sort of practice can be used with jQuery. >> >> Cheers >> >> Ted > > |
Re: OFBiz / BigFish: New client is hooked!
|
|
In reply to this post by Nick Rosser
Dear Nick,
I just had a quick look at http://bigfish.salmonllc.com:8082/online/shop/main. I noticed that there are javascripts in the head of the document/ This can cause 'problems' as these javascripts block parallel downloads. While a script is downloading, the browser does not start any other downloads, even on different hostnames. (e.g. when one has different hostnames for downloading in parallel images) You also might benefit from enabling compression on the webserver. Enabling expire dates on the 'static' files (e.g. css, .js etc) will improve local caching by the browser, hence lower the amount of data that needs downloading. Kind regards Tore On 24/01/13 15:02, Nick Rosser wrote: > Skip, > > Do you mean the end-result UI? This was a nice challenge for us -- the > client wanted a new logo and a completely new look. I think it works. > And more importantly, the client loves it! > > Or the fact that all the styling is delegated to the CSS? We've gone > to great pains to allow styling in the CSS with no back-end code > changes. So far it's working! And don't forget our "small device / > mobile" solution uses a responsive CSS approach, check out > http://bigfish.salmonllc.com:8082/online/shop/main and resize your > browser to less than 450 pixels (work in progress, but you get the > idea!). > > Either way, thanks! > > For more info visit: http://bigfish.salmonllc.com > > Best Regards, > > Nick Rosser > [hidden email] > O: 516.742.7888 x221 > C: 516.901.1720 > > > On 1/23/2013 5:43 PM, Skip wrote: >> Nice work Nick >> >> I like your CSS >> >> -----Original Message----- >> From: Nick Rosser [mailto:[hidden email]] >> Sent: Wednesday, January 23, 2013 12:12 PM >> To: [hidden email] >> Subject: OFBiz / BigFish: New client is hooked! >> >> >> All, >> >> I'm proud to announce another client to the BigFish platform. >> >> Checkout: www.eagansemporium.com >> >> What was interesting with this implementation was that the client was >> already an OFBiz platform user. We were able to basically "snap on" the >> BigFish solution; do some CSS styling; add some BigFish content and the >> site was done. Products were already loaded, payment gateways setup etc. >> which made for a very fast implementation time. >> >> It's a nice simple site and with a focus on the ultra high-end >> "indulgence" market! Now that they are on a new platform I know there >> are plans to add more products and really begin to build up a good >> business following -- something that was not a priority when content >> could not be managed quite so easily. >> > |
|
|
In reply to this post by tore@skynet.be
Thanks for the note, Tore.
I've being looking into how to best incorporate file compression techniques. I recognize that as our projects continue to grow there may come a day when our CSS will reach critical mass! In addition to having the option of loading specific images to specific areas, BigFish has the option of reusing certain images that are scaled as needed using various system parameters. While not ideal in every situation, some clients find it useful to rely on a small library of images that can be re-purposed if they have no means of creating or editing more images. Thanks again for the feedback, James Stewart On 1/24/2013 2:49 PM, [hidden email] wrote: > Hi James, > > i just had a look at the http://www.eagansemporium.com website. > There are some small tricks that can make your website faster by doing > some front end engineering (what's in a name) > > - enable compression (gzip) on the webserver for all text related > content (txt, css, js, html etc) > - some images where scaled in html, it is better to size them > correctly (e.g. cigarettecase2_sbl.png is resized from 355 x 355 to > 250 x 250. Serving a scaled image could save some KB) > - run minify over the .js files > > The three actions together could have as a result that you have +/- 1 > MB less to download to the client hence your website will seem to > respond faster. > > Kind regards > > Tore > > > > > > > On 24/01/13 20:26, James wrote: >> Ted, >> >> I am the UI/CSS developer for BigFish who designed Eagan's Emporium >> <http://www.eagansemporium.com> and is developing the responsive >> mobile approach on our Fashion House demo >> <http://bigfish.salmonllc.com:8082/online/shop/main>. To see the >> responsive concept in action view the demo and resize your browser to >> a width of 450 pixels. >> >> A note about mobile design: The two camps of Responsive Design (one >> site that adapts to various devices) and Targeted Design (various >> sites that load respective to the device being used) each have Pros >> and Cons. While your specific project's requirements are ultimately >> going to determine the tie-breaker, I see the most potential in >> Responsive Design. Responsive Design's greatest advantage that it >> puts the task of device rendering exclusively in the hands of the >> designer and the CSS. It allows for solutions to be displayed on a >> range of devices and not /device 1, device 2, /and so on. The >> exemplary concept of CSS is that it separates design from content- >> and in most (certainly not all) cases of mobile design, the primary >> goal is delivering the same consistent content with a design that is >> best suited to the user and whatever device they're using. >> >> I saw in your email that you were interested in some online CSS >> resources. Below our a few of my favorites that cover some basic >> core-concepts as well some remarkable new strategies and ideas. >> >> http://www.alistapart.com in my opinion is one of the premier online >> CSS/HTML resources. Their contributors are well known CSS Rock >> Starsauthors and the topics cover everything from design, best >> practices, mobile strategies, and more. >> >> http://css-tricks.com is another fantastic online resource. Like A >> List Apart, this site covers many concepts from basic to advanced and >> comes equipped with a very active and helpful user forum. >> >> http://www.htmldog.com is a great site for fundamentals and getting >> started with CSS. I remember using their guides when I was cutting >> my teeth on CSS many years ago and the core principles haven't >> changed. It covers basic and moderate examples quite well- I'd >> recommend starting with this site if you really want to immerse >> yourself in CSS. >> >> Lastly, Firebug <https://getfirebug.com/> and the Web Developer Tool >> Bar <https://addons.mozilla.org/en-US/firefox/addon/web-developer/> >> (both available for Firefox and Chrome) are two excellent browser >> add-ons. Firebug allows you to select any element and modify the CSS >> in real-time within the browser. I'm aware that most modern browsers >> have code inspectors in them, but I prefer FireBug's options and >> workflow. The Web Developer Tool Bar has a plethora of resources >> that allow you to validate your CSS, quickly change view-port sizes >> (handy when you're developing for mobile), and much more. >> >> For some information on how we incorporated the mobile approach into >> the Fashion House demo, you can check out our mobile device help file >> <http://bigfish.salmonllc.com/help/howSetupMobile.htm>. >> >> These links should definitely get you started. I would subscribe to >> some of their feeds as they're routinely updated. >> >> Best of Luck, >> >> James Stewart >> >> >> On 1/24/2013 9:44 AM, Ted Byers wrote: >>> Hi Nick, >>> >>> On Thu, Jan 24, 2013 at 9:02 AM, Nick Rosser <[hidden email]> >>> wrote: >>>> Or the fact that all the styling is delegated to the CSS? We've >>>> gone to >>>> great pains to allow styling in the CSS with no back-end code >>>> changes. So >>>> far it's working! And don't forget our "small device / mobile" >>>> solution uses >>>> a responsive CSS approach, check out >>> The notion of making a web application flexible enough to display >>> well, and remain useful, on any device whether a smart phone or >>> desktop with a huge monitor, is something I am beginning to examine. >>> Can you recommend some online resources for studying how to use CSS to >>> do this? Being a programmer, my first thought on making my web apps >>> adapt their interfaces to the device on which they're displayed was to >>> use some fo the new features in HTML5 to learn what the device is, and >>> then programmatically (using Javascript on the client side and perl or >>> Java or C++ on the server side) adapt the interface to available >>> screen realestate. I know little about CSS and have in the past >>> limited myself to either having a colleague, who is a CSS guru, revise >>> our CSS files, or writing my own inline CSS; and thus only with my web >>> apps where the server side code is implemented in Perl (I don't think >>> I ever used CSS with a JSP/JSF application). I am thus intrigued by >>> the notion that you can do this sort of thing without programmatic >>> changes by using the right CSS. I guess, a related question involves >>> how, or whether, this sort of practice can be used with jQuery. >>> >>> Cheers >>> >>> Ted >> >> > |
Re: OFBiz / BigFish: New client is hooked!
|
|
Dear James,
the library and reuse of images is OK, but you could see them as "master data". With e.g. imagemagick you could create all the scaled images you need and keep the originals. At the same time you could set the right compression on those images. This is something that could be done via a cron job or manualy. a process could be e.g. - upload pictures to a central directory for all master images - each hour a batch process looks into the master directory and creates the different images in the correct size in a separate directory This way you keep your customers satified and at the same time comply with best practices in web front end engineering re. performance. If I remember correctly I read somewhere that ofbiz resizes images in the correct sizes when you upload them, I don't know if this would be conflicting with this idea ? Kind regards Tore On 24/01/13 21:19, James wrote: > Thanks for the note, Tore. > > I've being looking into how to best incorporate file compression > techniques. I recognize that as our projects continue to grow there > may come a day when our CSS will reach critical mass! > > In addition to having the option of loading specific images to > specific areas, BigFish has the option of reusing certain images that > are scaled as needed using various system parameters. While not ideal > in every situation, some clients find it useful to rely on a small > library of images that can be re-purposed if they have no means of > creating or editing more images. > > Thanks again for the feedback, > > James Stewart > > > On 1/24/2013 2:49 PM, [hidden email] wrote: >> Hi James, >> >> i just had a look at the http://www.eagansemporium.com website. >> There are some small tricks that can make your website faster by >> doing some front end engineering (what's in a name) >> >> - enable compression (gzip) on the webserver for all text related >> content (txt, css, js, html etc) >> - some images where scaled in html, it is better to size them >> correctly (e.g. cigarettecase2_sbl.png is resized from 355 x 355 to >> 250 x 250. Serving a scaled image could save some KB) >> - run minify over the .js files >> >> The three actions together could have as a result that you have +/- 1 >> MB less to download to the client hence your website will seem to >> respond faster. >> >> Kind regards >> >> Tore >> >> >> >> >> >> >> On 24/01/13 20:26, James wrote: >>> Ted, >>> >>> I am the UI/CSS developer for BigFish who designed Eagan's Emporium >>> <http://www.eagansemporium.com> and is developing the responsive >>> mobile approach on our Fashion House demo >>> <http://bigfish.salmonllc.com:8082/online/shop/main>. To see the >>> responsive concept in action view the demo and resize your browser >>> to a width of 450 pixels. >>> >>> A note about mobile design: The two camps of Responsive Design (one >>> site that adapts to various devices) and Targeted Design (various >>> sites that load respective to the device being used) each have Pros >>> and Cons. While your specific project's requirements are ultimately >>> going to determine the tie-breaker, I see the most potential in >>> Responsive Design. Responsive Design's greatest advantage that it >>> puts the task of device rendering exclusively in the hands of the >>> designer and the CSS. It allows for solutions to be displayed on a >>> range of devices and not /device 1, device 2, /and so on. The >>> exemplary concept of CSS is that it separates design from content- >>> and in most (certainly not all) cases of mobile design, the primary >>> goal is delivering the same consistent content with a design that is >>> best suited to the user and whatever device they're using. >>> >>> I saw in your email that you were interested in some online CSS >>> resources. Below our a few of my favorites that cover some basic >>> core-concepts as well some remarkable new strategies and ideas. >>> >>> http://www.alistapart.com in my opinion is one of the premier online >>> CSS/HTML resources. Their contributors are well known CSS Rock >>> Starsauthors and the topics cover everything from design, best >>> practices, mobile strategies, and more. >>> >>> http://css-tricks.com is another fantastic online resource. Like A >>> List Apart, this site covers many concepts from basic to advanced >>> and comes equipped with a very active and helpful user forum. >>> >>> http://www.htmldog.com is a great site for fundamentals and getting >>> started with CSS. I remember using their guides when I was cutting >>> my teeth on CSS many years ago and the core principles haven't >>> changed. It covers basic and moderate examples quite well- I'd >>> recommend starting with this site if you really want to immerse >>> yourself in CSS. >>> >>> Lastly, Firebug <https://getfirebug.com/> and the Web Developer Tool >>> Bar <https://addons.mozilla.org/en-US/firefox/addon/web-developer/> >>> (both available for Firefox and Chrome) are two excellent browser >>> add-ons. Firebug allows you to select any element and modify the >>> CSS in real-time within the browser. I'm aware that most modern >>> browsers have code inspectors in them, but I prefer FireBug's >>> options and workflow. The Web Developer Tool Bar has a plethora of >>> resources that allow you to validate your CSS, quickly change >>> view-port sizes (handy when you're developing for mobile), and much >>> more. >>> >>> For some information on how we incorporated the mobile approach into >>> the Fashion House demo, you can check out our mobile device help >>> file <http://bigfish.salmonllc.com/help/howSetupMobile.htm>. >>> >>> These links should definitely get you started. I would subscribe to >>> some of their feeds as they're routinely updated. >>> >>> Best of Luck, >>> >>> James Stewart >>> >>> >>> On 1/24/2013 9:44 AM, Ted Byers wrote: >>>> Hi Nick, >>>> >>>> On Thu, Jan 24, 2013 at 9:02 AM, Nick Rosser >>>> <[hidden email]> wrote: >>>>> Or the fact that all the styling is delegated to the CSS? We've >>>>> gone to >>>>> great pains to allow styling in the CSS with no back-end code >>>>> changes. So >>>>> far it's working! And don't forget our "small device / mobile" >>>>> solution uses >>>>> a responsive CSS approach, check out >>>> The notion of making a web application flexible enough to display >>>> well, and remain useful, on any device whether a smart phone or >>>> desktop with a huge monitor, is something I am beginning to examine. >>>> Can you recommend some online resources for studying how to use CSS to >>>> do this? Being a programmer, my first thought on making my web apps >>>> adapt their interfaces to the device on which they're displayed was to >>>> use some fo the new features in HTML5 to learn what the device is, and >>>> then programmatically (using Javascript on the client side and perl or >>>> Java or C++ on the server side) adapt the interface to available >>>> screen realestate. I know little about CSS and have in the past >>>> limited myself to either having a colleague, who is a CSS guru, revise >>>> our CSS files, or writing my own inline CSS; and thus only with my web >>>> apps where the server side code is implemented in Perl (I don't think >>>> I ever used CSS with a JSP/JSF application). I am thus intrigued by >>>> the notion that you can do this sort of thing without programmatic >>>> changes by using the right CSS. I guess, a related question involves >>>> how, or whether, this sort of practice can be used with jQuery. >>>> >>>> Cheers >>>> >>>> Ted >>> >>> >> > > |
|
|
In reply to this post by SkipDever
On Thu, Jan 24, 2013 at 11:48 AM, Skip <[hidden email]> wrote:
> Ted > > Firebug is your friend. Go have a look at qz.com and then inspect the > elements with firebug. Change to responsive view and continue looking while > you change the screen sizes. > > css @media is key. > > > Also have a look at http://jquerymobile.com/. This interface is "mobile > first", but can be adapted to "mobile also". > > http://www.jquery4u.com is really useful with lots of tutorials. > > The big problem for me is bandwidth on mobile devices. The @media tricks > mostly involve hiding certain "not completely necessary" elements. However, > they are still sent to the browser consuming bandwidth. > > This bit of javascript worked for me in a specialized situation (I am > adapting it for use in a more mainline application). There are others on > this forum who don't like these javascript tricks, but it works and in my > view especially useful for bandwidth constrained devices. > > //Also times the round trip time of the Ajax call > sendScreenWidthToServer(screen.width); > if (screen.width < 800) { > document.location = "/mobile/control/calc"; > } > > Te |
|
|
In reply to this post by james-3
On Thu, Jan 24, 2013 at 2:26 PM, James <[hidden email]> wrote:
> Ted, > > I am the UI/CSS developer for BigFish who designed Eagan's Emporium > <http://www.eagansemporium.com> and is developing the responsive mobile > approach on our Fashion House demo > <http://bigfish.salmonllc.com:8082/online/shop/main>. To see the responsive > concept in action view the demo and resize your browser to a width of 450 > pixels. > > A note about mobile design: The two camps of Responsive Design (one site > that adapts to various devices) and Targeted Design (various sites that load > respective to the device being used) each have Pros and Cons. While your > specific project's requirements are ultimately going to determine the > tie-breaker, I see the most potential in Responsive Design. Responsive > Design's greatest advantage that it puts the task of device rendering > exclusively in the hands of the designer and the CSS. It allows for > solutions to be displayed on a range of devices and not /device 1, device 2, > /and so on. The exemplary concept of CSS is that it separates design from > content- and in most (certainly not all) cases of mobile design, the primary > goal is delivering the same consistent content with a design that is best > suited to the user and whatever device they're using. > > I saw in your email that you were interested in some online CSS resources. > Below our a few of my favorites that cover some basic core-concepts as well > some remarkable new strategies and ideas. > > http://www.alistapart.com in my opinion is one of the premier online > CSS/HTML resources. Their contributors are well known CSS Rock Starsauthors > and the topics cover everything from design, best practices, mobile > strategies, and more. > > http://css-tricks.com is another fantastic online resource. Like A List > Apart, this site covers many concepts from basic to advanced and comes > equipped with a very active and helpful user forum. > > http://www.htmldog.com is a great site for fundamentals and getting started > with CSS. I remember using their guides when I was cutting my teeth on CSS > many years ago and the core principles haven't changed. It covers basic and > moderate examples quite well- I'd recommend starting with this site if you > really want to immerse yourself in CSS. > > Lastly, Firebug <https://getfirebug.com/> and the Web Developer Tool Bar > <https://addons.mozilla.org/en-US/firefox/addon/web-developer/> (both > available for Firefox and Chrome) are two excellent browser add-ons. > Firebug allows you to select any element and modify the CSS in real-time > within the browser. I'm aware that most modern browsers have code > inspectors in them, but I prefer FireBug's options and workflow. The Web > Developer Tool Bar has a plethora of resources that allow you to validate > your CSS, quickly change view-port sizes (handy when you're developing for > mobile), and much more. > > For some information on how we incorporated the mobile approach into the > Fashion House demo, you can check out our mobile device help file > <http://bigfish.salmonllc.com/help/howSetupMobile.htm>. > > These links should definitely get you started. I would subscribe to some of > their feeds as they're routinely updated. > > Best of Luck, > > James Stewart > Ted |
«
Return to OFBiz - User
|
1 view|%1 views
| Free forum by Nabble | Edit this page |