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, t...@skynet.be 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
<nros...@salmonllc.com> 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
