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 <[email protected]>
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
