Re: [css-d] navigate site
My reference point is a galaxy s3, jellybean 1.4.2. I like the general layout of the home page. Flows well and is pleasing to the eye. The menu icon gets attention immediately. Works well on s3 and on desktop. Font size fits both s3 and desktop. Very effective. I'd like to see the drop down menu icon div width confined to the size of the icon plus margins/padding (on both s3 and desktop the upper nav bar stretches the entire width, not a big deal on desktop but takes up a lot of real estate on s3). I think the icon can be smaller, reducing the height of the nav bar. With Russel's name to the right of the menu icon, his credentials can remain where they are (full width), and the content can move up toward the top of the physical screen. Bill On 7/15/2013 11:13 PM, David Laakso wrote: Seeking constructive comments and suggestions on the method used to navigate a responsive [desktop, tablet, and mobile] site. html http://ccstudi.com/russ/ css http://ccstudi.com/russ/r/r.css Best, David Laakso -- 216.978.5063 | bill.braun3 (Skype) __ 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] navigate site
David, As you can see from below, I'm a big advocate of accessibility when designing web pages. It's easy to do and carries over to some good best practices. Please take that into consideration when reading my comments, that go beyond what you requested ... :-) Menu not working on WP8 ( Nokia Lumia 928 ) with IE10 Browser or with UC Browser. If you do a long press it will show, but is not sustained and ends up calling the save image context menu. Email, phone number and address links work correctly. Document outline is incorrect http://accessibility.psu.edu/headingshtml Alt tags are empty http://www.w3.org/QA/Tips/altAttribute Navigation not viewable till you reach the bottom of the page. I would use media queries like you had in the previous rendition. Much better experience IMO. http://www.w3.org/TR/WCAG20-TECHS/C27.html Nice looking site but if any of your viewers are using any Assistive Technology (AT), as in a screen reader, they're going to have a hard time navigating the site. Put the Navigation on top. Add a skip link. Set your headings correctly, starting with a single H1. This not only helps AT users, but improves Search Engine ranking Looking forward to your next update. Greg -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, July 15, 2013 8:13 PM To: CSS Discuss Subject: [css-d] navigate site Seeking constructive comments and suggestions on the method used to navigate a responsive [desktop, tablet, and mobile] site. html http://ccstudi.com/russ/ css http://ccstudi.com/russ/r/r.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/ __ 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] navigate site
I personally don't like the navigation, no offense. I would suggest a side nav where when you tap the nav site button the whole page moves to the side and reveals your nav below/behind the site like the Facebook app. Best, Karl Sent from losPhone On Jul 16, 2013, at 8:11 AM, Bill Braun billbraun...@gmail.com wrote: My reference point is a galaxy s3, jellybean 1.4.2. I like the general layout of the home page. Flows well and is pleasing to the eye. The menu icon gets attention immediately. Works well on s3 and on desktop. Font size fits both s3 and desktop. Very effective. I'd like to see the drop down menu icon div width confined to the size of the icon plus margins/padding (on both s3 and desktop the upper nav bar stretches the entire width, not a big deal on desktop but takes up a lot of real estate on s3). I think the icon can be smaller, reducing the height of the nav bar. With Russel's name to the right of the menu icon, his credentials can remain where they are (full width), and the content can move up toward the top of the physical screen. Bill On 7/15/2013 11:13 PM, David Laakso wrote: Seeking constructive comments and suggestions on the method used to navigate a responsive [desktop, tablet, and mobile] site. html http://ccstudi.com/russ/ css http://ccstudi.com/russ/r/r.css Best, David Laakso -- 216.978.5063 | bill.braun3 (Skype) __ 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/
Re: [css-d] navigate site
On Tue, Jul 16, 2013 at 10:06 PM, Karl DeSaulniers k...@designdrumm.com wrote: I personally don't like the navigation, no offense. None taken, Karl. I received this suggestion from Philippe Wittenbergh that I have decided to run with: Dunno. The original version feels easier to use, and more obvious for keyboard users or users depending on assistive technology (VoiceOver,…). Although I would consider making the 3 buttons less 'heavy'. How about, for small screens only, putting the navigation at the bottom? (with a button linking to it?), This is the original version Philippe mentions above http://ccstudi.com/rum/ And this is a fast and dirty attempt to make what he suggests happen in desktop, tablet, and mobile. Cursory checked thus far only in Windows 7 and Android/2.3.6. http://ccstudi.com/rum/ No javascript or jQuery necessary. 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] navigate site [error correction]
Link corrected: And this is a fast and dirty attempt to make what he suggests happen in desktop, tablet, and mobile. Cursory checked thus far only in Windows 7 and Android/2.3.6. http://ccstudi.com/russell/ No javascript or jQuery necessary. 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] navigate site
Glad it was constructive and not offensive. I too prefer the previous nav with the green buttons as they worked well with the page layout and were appealing. Karl DeSaulniers Design Drumm http://designdrumm.com On Jul 16, 2013, at 11:56 PM, David Laakso wrote: On Tue, Jul 16, 2013 at 10:06 PM, Karl DeSaulniers k...@designdrumm.com wrote: I personally don't like the navigation, no offense. None taken, Karl. I received this suggestion from Philippe Wittenbergh that I have decided to run with: Dunno. The original version feels easier to use, and more obvious for keyboard users or users depending on assistive technology (VoiceOver,…). Although I would consider making the 3 buttons less 'heavy'. How about, for small screens only, putting the navigation at the bottom? (with a button linking to it?), This is the original version Philippe mentions above http://ccstudi.com/rum/ And this is a fast and dirty attempt to make what he suggests happen in desktop, tablet, and mobile. Cursory checked thus far only in Windows 7 and Android/2.3.6. http://ccstudi.com/rum/ No javascript or jQuery necessary. 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/ __ 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/
