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
