Re: [css-d] desktop tablet mobile [+1]

[David Laakso]

> markup
> 
> css
> 


The above site was posted a few days ago. Since then these changes and
revisions -- among others -- have been made to the server:

1/  The painting images are now 100% rather than 60% of their
containing block in desktop, tablet, mobile.
2/  The navigation block remains beneath the primary content block in
desktop and tablet but is now positioned immediately below the header
at media query 480 mobile and down.
3/ Various color revisions have been made particularly within the
navigation links..

Your constructive comments and suggestions are always welcome.

Thanks.

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] desktop tablet mobile

[David Laakso]

On Tue, Mar 19, 2013 at 9:37 AM, Philip TAYLOR  wrote:
> Why does the text move (slightly) up and down when I select
> an alternative image via the linked numbers ?
>
> Philip Taylor
> 
> David Laakso wrote:

>> markup
>> 

Philip, I believe this has been corrected to server: #container{
min-height:330px}
Kudos to  Georg Sortun  for an off-list reply
regarding a stability-fix.

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] desktop tablet mobile

[Philip TAYLOR]

Why does the text move (slightly) up and down when I select
an alternative image via the linked numbers ?

Philip Taylor

David Laakso wrote:

> Constructive comments and suggestions on this simple site gratefully
> appreciated.
> 
> markup
> 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] desktop tablet mobile

[David Laakso]

Constructive comments and suggestions on this simple site gratefully
appreciated.

markup

css


Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Desktop. Tablet. Mobile [+1].

[David Laakso]

On Mon, Feb 6, 2012 at 9:27 PM, Alan L.S. Steytler  wrote:

Renders rapidly and clean- especially on the iPhone...

Alan L.S. Steytler



Thanks, Alan. That's good to know. Android/2.2.2, Opera Mobile, Opera
Mini this end.


Hope all is well in Atchison, Topeka and Santa Fe.

Best,

Sioux Dakota
Manhatten


-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Desktop. Tablet. Mobile [+1].

[Alan L.S. Steytler]

Renders rapidly and clean- especially on the iPhone...
Opera 11.6
IE 8
FF 11
Chrome 19
iOS 5
--
Alan L.S. Steytler



—



On Mon, Feb 6, 2012 at 6:33 PM, David Laakso  wrote:
> Second pass: 
> Constructive comments and suggestions are always appreciated.
> Thanks.
>
> Best,
> ~d
>
> --
> Chelsea Creek Studio
> http://ccstudi.com
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Desktop. Tablet. Mobile [+1].

[David Laakso]

Second pass: 
Constructive comments and suggestions are always appreciated.
Thanks.

Best,
~d

-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] desktop. tablet. mobile.

[David Laakso]

On Mon, Jan 30, 2012 at 9:31 PM, David Laakso  wrote:
First pass: 
Constructive comments and suggestions are always appreciated.

Best,
~d

---

Thanks to all who took time to look at the site and share your opinions.

Best,

~d
“Finish each day and be done with it. You have done what you could.
Some blunders and absurdities no doubt crept in, forget them as soon
as you can. Tomorrow is a new day, you shall begin it well and
serenely...”
-- Ralph Waldo Emerson


-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] desktop. tablet. mobile.

[Peter H.]

> El 31/01/2012, a las 03:31, David Laakso escribió:
> 
> First pass: 
> Constructive comments and suggestions are always appreciated.
> Thanks.
> 

designery comments: really like the feel of it, nice sparseness, tasty use of 
colour, intriguing, slightly enigmatic even. Great images. 

On the puzzling side, though, the desktop pages look more like mobile pages 
poorly adapted to big screen. The primary content is pushed too far down the 
window by less important stuff - gives a strange hierarchy to the links. If I 
was the client I wouldn't be happy having 'About' almost at the very end.

On the phone, there's too much scrolling down to do before arriving at the 
primary content.

I like the League Gothic but, as always, the letter spacing for the web font is 
clunky. Me, I'd use an image for the gallery logo so as to control the kerning 
and make it look nice.

On the desktop there's a double rule under Dakota which maybe isn't intended - 
the thin white rule being very slightly wider than the grey one.

Hope this is useful feedback, Peter
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] desktop. tablet. mobile.

[Ghodmode]

On Tue, Jan 31, 2012 at 10:31 AM, David Laakso  wrote:
> First pass: 
> Constructive comments and suggestions are always appreciated.
> Thanks.

Giving it the benefit of the doubt, I'll call it a "mobile first"
design.  It looks pretty good on a mobile screen, but I have to scroll
to see the pic of the naked lady with the full body tattoo (Ms April).
If there were a full 12 months there, it would probably be more
scrolling up and down than I'd want to do to see all of the pics.

For this layout, I'd recommend moving the nav closer to the top as the
first child of the article element and make it horizontal.  Then put
the contact information on the right.  You might want to consider
horizontal month tabs, too.

So, now what are you going to do with media queries to adapt the
design to wider screens?

For wider layouts, I'd recommend putting the nav on the left
(vertically, like it is now).  Also put the month tabs on the side
vertically and change their display so that the active one has an
inverse white bg and #99a7b4 letters and maybe give it an arrow-like
end to point at the container.  So, left would be the nav.  Then the
month tabs in a narrow vertical strip on either side of the container.
div#container in the middle, and contact info farthest right.

Here's a CSS-only arrow-type thing that might inspire you:
ul#tabs li a.tab {
  padding-left: 1em;
}

ul#tabs li a.tab.active {
  background-color: white;
  border: 0 none !important;
  color: #99A7B4 !important;
  height: 1.9em !important;
  line-height: 1.9em !important;
  padding: 0;
}

ul#tabs li a.tab.active:before {
  border-bottom: 0.97em solid #99A7B4;
  border-right: 1em solid white;
  border-top: 0.97em solid #99A7B4;
  content: "";
  display: block;
  float: left;
  overflow: hidden;
}

Note that the !importants are in there to override the !importants in
the site's current code.

If you really like the narrow layout, consider complementing it with
some kind of
tileable abstract background for the div.page which contains the
article.  Or you could do something neat with gradients.

DISCLAIMER: I'm a coder.  I've never been accused of being a designer :)

--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com

> Best,
> ~d
>
> --
> Chelsea Creek Studio
> http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] desktop. tablet. mobile.

[Dan Kaufman]

Love it. Very clean design. Good "supportive" palette.

BUT...the page/screen layout is a "portrait / vertical" layout vs.
"landscape / horizontal"  and (virtually) all monitors are horizontal. This
is forcing a "piano roll" page view...that is, I have to scroll down the
page to get to some very important information: the site menu and business
contact information.  And depending on the viewers "real world" screen
resolution they may not even realize that they need to scroll down.

Moving the Menu and Contact Info to a screen-left or screen-right may help
make the site more universally accessable.

Best,

DK

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso
Sent: Monday, January 30, 2012 6:32 PM
To: CSS Discuss
Subject: [css-d] desktop. tablet. mobile.

First pass: <http://ccstudi.com/site/portfolio/w/>
Constructive comments and suggestions are always appreciated.
Thanks.

Best,
~d

-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] desktop. tablet. mobile.

[David Laakso]

First pass: 
Constructive comments and suggestions are always appreciated.
Thanks.

Best,
~d

-- 
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Desktop. Tablet. Mobile.

[David Laakso]

Comments and suggestions appreciated.

Best,
Benjamin Disraeli
London
PS I don't care if IE/6 is upside down and backward.

--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Desktop. Tablet. Mobile.

[Sandy]

First-pass. Comments and suggestions appreciated.

This end...
Desktop: OS 10.4
Tablet: No got.
Mobile: OperaMini os SanyoMirro 4 BoostMobile.

uri: 


hi David,

I like how this reconfigures itself quite a lot. It's as handsome on the 
small screens as it is on the big ones.


A tablet simulator you can use is
http://app.protofluid.com/

click "add", "edit" and then "size". Your options will be "phones" 
"tablets" "monitors" and "televisions". If you click "transform" and 
"pop out" you'll get rid of that thing that covers the top of the page.


best regards,
Sandy
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Desktop. Tablet. Mobile. [ec]

[David Laakso]

Error Correction


First-pass. Comments and suggestions appreciated.

This end...
Desktop: OS 10.4
Tablet: No got.
Mobile: OperaMini os SanyoMirro 4 BoostMobile.

uri: 

Thanks.
Best,
~d



uri should read:


~d

--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Desktop. Tablet. Mobile.

[David Laakso]

First-pass. Comments and suggestions appreciated.

This end...
Desktop: OS 10.4
Tablet: No got.
Mobile: OperaMini os SanyoMirro 4 BoostMobile.

uri: 

Thanks.
Best,
~d


--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/