Comments for The Design Office http://thedesignoffice.org A place for independent designers in downtown Providence Wed, 01 Feb 2012 14:53:54 +0000 hourly 1 http://wordpress.org/?v=3.3.1 Comment on Equipment Inventory and Pricing Sheet by John Caserta http://thedesignoffice.org/equipment/#comment-660 John Caserta Wed, 01 Feb 2012 14:53:54 +0000 http://do.hobo2010.com/?page_id=27#comment-660 Apologies if the chart is unclear. It's new and your feedback is appreciated. Printing here is self-service and meant to provide designers a hands-on, lower cost option. Designers must sign up for one of the membership plans before printing. If you're looking to send files and have your job printed for you, I can suggest print shops in Providence that can do this. Apologies if the chart is unclear. It’s new and your feedback is appreciated. Printing here is self-service and meant to provide designers a hands-on, lower cost option. Designers must sign up for one of the membership plans before printing. If you’re looking to send files and have your job printed for you, I can suggest print shops in Providence that can do this.

]]> Comment on Equipment Inventory and Pricing Sheet by Severine http://thedesignoffice.org/equipment/#comment-629 Severine Tue, 31 Jan 2012 20:51:01 +0000 http://do.hobo2010.com/?page_id=27#comment-629 Hi, I am looking to print brochures in color and was wondering how it would be for 200. I am a bit confused with the frame above, a friend of mine send it to me and I was wondering if you want send me more details on copy prices and all that you do. Sev Hi,
I am looking to print brochures in color and was wondering how it would be for 200.
I am a bit confused with the frame above, a friend of mine send it to me and I was wondering if you want send me more details on copy prices and all that you do.
Sev

]]> Comment on Modern Pictograms by John Caserta http://thedesignoffice.org/project/modern-pictograms/#comment-622 John Caserta Tue, 31 Jan 2012 12:45:59 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-622 No need to generate the @font-face code, Font Squirrel provides this. As far as embedding that, give this a look: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ No need to generate the @font-face code, Font Squirrel provides this. As far as embedding that, give this a look: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

]]> Comment on Modern Pictograms by knalle http://thedesignoffice.org/project/modern-pictograms/#comment-615 knalle Tue, 31 Jan 2012 07:38:47 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-615 How do you use it on a webpage? have never tried this before - only used google fonts API. I uploaded the font to http://www.fontsquirrel.com/fontface/generator but it didn't work - at least not straight out of the box (the demo page only produced regular font letters). Can somebody guide a noob? How do you use it on a webpage? have never tried this before – only used google fonts API. I uploaded the font to http://www.fontsquirrel.com/fontface/generator but it didn’t work – at least not straight out of the box (the demo page only produced regular font letters). Can somebody guide a noob?

]]> Comment on Modern Pictograms by John Caserta http://thedesignoffice.org/project/modern-pictograms/#comment-565 John Caserta Mon, 30 Jan 2012 00:23:56 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-565 Thank you for the feedback. I have considered a save icon. "Save to cloud" was one version of this. I like the symbol of a "safe" (bank safe). Saving now is less about transferring and more about archiving. As a general reply, I have a list of about 20-30 more that I want to do. I hope to get a 2-week chunk of time to implement them at some point this spring. Thank you for the feedback. I have considered a save icon. “Save to cloud” was one version of this. I like the symbol of a “safe” (bank safe). Saving now is less about transferring and more about archiving. As a general reply, I have a list of about 20-30 more that I want to do. I hope to get a 2-week chunk of time to implement them at some point this spring.

]]> Comment on Modern Pictograms by Moldován Eduárd http://thedesignoffice.org/project/modern-pictograms/#comment-544 Moldován Eduárd Sat, 28 Jan 2012 23:16:18 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-544 I must say, I love your work. There is one icon missing though, the "save" one, which usually looks like a old fashioned disk. Are you considerring creating one of those shortly? I must say, I love your work. There is one icon missing though, the “save” one, which usually looks like a old fashioned disk. Are you considerring creating one of those shortly?

]]> Comment on Modern Pictograms by fvsch http://thedesignoffice.org/project/modern-pictograms/#comment-504 fvsch Fri, 27 Jan 2012 17:32:55 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-504 Most of the time the title attribute will not be read by a screen reader (with default settings). One exception might be the use of the ABBR element. So you would write e.g. <a href="…" rel="nofollow"><abbr title="Edit">r</abbr></a>. Basically this is the same problem we have with using background-image for displaying icons or buttons. CSS background images were simply *not* designed for that, so when for whatever reason (and there are a bunch of them) the image cannot be communicated to the end user then the user agent (web browser) doesn’t know that something is wrong (it just thinks a decorative image was not displayed, no big deal) and even if it knew it would have no way to try to fix the issue (what text to display instead of the image?). Compare this with the IMG tag. The user agent knows that if the image doesn't load or cannot displayed it has a text equivalent: the alt attribute. It's designed like that in the spec, and the browser knows what to do. Now @font-face was designed to display custom fonts. If the custom font doesn't load or is an unsupported format or the user is forcing their own font (e.g. a user with dyslexia may want to use a specific font on all websites)… the browser will just display a fallback font. It doesn’t know that an important information, an icon, was lost. And every trick we imagine to mitigate that will only be a hack accounting for specific use cases. Clever enough hacks may mitigate most accessibility issues, but it doesn’t change the fact that we’re using a technique that was not intended for displaying arbitrary vector images. Sadly we *are* missing native ways in HTML+CSS to display images, either bitmap or vector, with modern characteristics such as reduced number of HTTP requests, simple HTML code, and ability to substitute a graphic for a text label. And I’m not sure shying away from CSS image replacement techniques or icon fonts (both being inaccessible by design) is a good solution; most web designers and developers will ignore the accessibility issues anyway in order to use admittedly cool features. Most of the time the title attribute will not be read by a screen reader (with default settings). One exception might be the use of the ABBR element. So you would write e.g. r.

Basically this is the same problem we have with using background-image for displaying icons or buttons. CSS background images were simply *not* designed for that, so when for whatever reason (and there are a bunch of them) the image cannot be communicated to the end user then the user agent (web browser) doesn’t know that something is wrong (it just thinks a decorative image was not displayed, no big deal) and even if it knew it would have no way to try to fix the issue (what text to display instead of the image?).

Compare this with the IMG tag. The user agent knows that if the image doesn’t load or cannot displayed it has a text equivalent: the alt attribute. It’s designed like that in the spec, and the browser knows what to do.

Now @font-face was designed to display custom fonts. If the custom font doesn’t load or is an unsupported format or the user is forcing their own font (e.g. a user with dyslexia may want to use a specific font on all websites)… the browser will just display a fallback font. It doesn’t know that an important information, an icon, was lost. And every trick we imagine to mitigate that will only be a hack accounting for specific use cases. Clever enough hacks may mitigate most accessibility issues, but it doesn’t change the fact that we’re using a technique that was not intended for displaying arbitrary vector images.

Sadly we *are* missing native ways in HTML+CSS to display images, either bitmap or vector, with modern characteristics such as reduced number of HTTP requests, simple HTML code, and ability to substitute a graphic for a text label. And I’m not sure shying away from CSS image replacement techniques or icon fonts (both being inaccessible by design) is a good solution; most web designers and developers will ignore the accessibility issues anyway in order to use admittedly cool features.

]]> Comment on Modern Pictograms by John Caserta http://thedesignoffice.org/project/modern-pictograms/#comment-476 John Caserta Thu, 26 Jan 2012 14:57:40 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-476 Thank you for bringing an awareness to mindful use of pictograms within html. I am guilty of "inaccessible" implementation myself on this website. In response to Thomas' comment yesterday, I linked to an article that suggests using the data attribute when wanting to add a pictogram to a piece of text. When the pictogram stand on their own (like a navigation menu... email, twitter, etc.), they are generally wrapped in an href. Does the "title" attribute (or another attribute) help in understanding the context of the letter used? Thank you for bringing an awareness to mindful use of pictograms within html. I am guilty of “inaccessible” implementation myself on this website. In response to Thomas’ comment yesterday, I linked to an article that suggests using the data attribute when wanting to add a pictogram to a piece of text. When the pictogram stand on their own (like a navigation menu… email, twitter, etc.), they are generally wrapped in an href. Does the “title” attribute (or another attribute) help in understanding the context of the letter used?

]]> Comment on Modern Pictograms by fvsch http://thedesignoffice.org/project/modern-pictograms/#comment-471 fvsch Thu, 26 Jan 2012 09:45:44 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-471 Many thanks John for sharing a great set of icons. One downside of having good icon fonts out there is that people are going to use them with @font-face. I know that’s kinda the point, but it does create very real accessibility issues. “I used a random character for that icon” is going to be the new “I used an image and didn’t bother with a text alternative”. I wrote about this here: http://fvsch.com/code/icon-font-a11y/ Now I’m clearly not blaming anyone designing an icon font for this. It’s just a broader issue we need to be aware of, and for which there *might* be solutions. For instance we may limit use of such icons to adding icons to visible text labels using CSS generated content; and ideally we should only use existing Unicode values and values from Unicode’s private use code blocks. Sadly I doubt both of these solutions will be used by most, even if endorsed by every single tutorial, icon font documentation page, etc. We may have a big accessibility issue with no practical solution on our hands. Many thanks John for sharing a great set of icons.
One downside of having good icon fonts out there is that people are going to use them with @font-face. I know that’s kinda the point, but it does create very real accessibility issues. “I used a random character for that icon” is going to be the new “I used an image and didn’t bother with a text alternative”. I wrote about this here: http://fvsch.com/code/icon-font-a11y/
Now I’m clearly not blaming anyone designing an icon font for this. It’s just a broader issue we need to be aware of, and for which there *might* be solutions. For instance we may limit use of such icons to adding icons to visible text labels using CSS generated content; and ideally we should only use existing Unicode values and values from Unicode’s private use code blocks. Sadly I doubt both of these solutions will be used by most, even if endorsed by every single tutorial, icon font documentation page, etc.
We may have a big accessibility issue with no practical solution on our hands.

]]> Comment on Modern Pictograms by John Caserta http://thedesignoffice.org/project/modern-pictograms/#comment-458 John Caserta Wed, 25 Jan 2012 15:51:16 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-458 Great idea on a trophy. There is a ribbon there currently if you're in need. I have a pretty long list of "want to dos", and will try to prioritize based on need (mine and others). Thanks for the positive feedback overall! Great idea on a trophy. There is a ribbon there currently if you’re in need. I have a pretty long list of “want to dos”, and will try to prioritize based on need (mine and others). Thanks for the positive feedback overall!

]]> Comment on Modern Pictograms by John Caserta http://thedesignoffice.org/project/modern-pictograms/#comment-457 John Caserta Wed, 25 Jan 2012 15:49:50 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-457 Thomas, I'm happy to explain more. Since Modern Pictograms is a typeface (like Helvetica or Times New Roman), you can load it into your computer (Mac or PC) and create designs in Photoshop or Illustrator with it. So if you type a lowercase "s" in Modern Pictograms, you'll get a magnifying glass. Just like any typeface, you can change the point size, the color, etc. This is all useful when making mockups for Web and mobile. Perhaps the coolest thing about it, is that you can load the typeface into the browser directly (as I'm doing on this page and throughout this site). That means you can control color and size in CSS. There are advantages to this as far as file size, being able to zoom into them and have them stay crisp and an assortment of production efficiencies. There is a nice article by Jon Hicks about "how" to implement icon fonts in web pages. There's a bit of context there, too, if you're still looking for the "why". http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes Thomas, I’m happy to explain more. Since Modern Pictograms is a typeface (like Helvetica or Times New Roman), you can load it into your computer (Mac or PC) and create designs in Photoshop or Illustrator with it. So if you type a lowercase “s” in Modern Pictograms, you’ll get a magnifying glass. Just like any typeface, you can change the point size, the color, etc. This is all useful when making mockups for Web and mobile. Perhaps the coolest thing about it, is that you can load the typeface into the browser directly (as I’m doing on this page and throughout this site). That means you can control color and size in CSS. There are advantages to this as far as file size, being able to zoom into them and have them stay crisp and an assortment of production efficiencies.

There is a nice article by Jon Hicks about “how” to implement icon fonts in web pages. There’s a bit of context there, too, if you’re still looking for the “why”.
http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes

]]> Comment on Modern Pictograms by Brillist http://thedesignoffice.org/project/modern-pictograms/#comment-449 Brillist Wed, 25 Jan 2012 05:16:04 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-449 John, thanks so much for a beautiful set of icons! I'm currently doing the Brillist demo and have used your pictograms in each project page and in each new project confirmation page. If you're ever so inclined, wanted to make three requests: 1) for a lightbulb icon (= "idea"), for 2) a trophy icon, and 3) an alternate lock icon (like what the Mac OS uses: http://www.brillist.com/lock.png). Hope you keep this set alive and keep adding to it, and again, thanks so much for what you've done so far! John, thanks so much for a beautiful set of icons! I’m currently doing the Brillist demo and have used your pictograms in each project page and in each new project confirmation page.

If you’re ever so inclined, wanted to make three requests: 1) for a lightbulb icon (= “idea”), for 2) a trophy icon, and 3) an alternate lock icon (like what the Mac OS uses: http://www.brillist.com/lock.png).

Hope you keep this set alive and keep adding to it, and again, thanks so much for what you’ve done so far!

]]> Comment on Modern Pictograms by Thomas http://thedesignoffice.org/project/modern-pictograms/#comment-448 Thomas Wed, 25 Jan 2012 04:13:43 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-448 Confused as how to use this on the web. Sorry if this seems dumb. Can you give me a little background info. Confused as how to use this on the web. Sorry if this seems dumb. Can you give me a little background info.

]]> Comment on Modern Pictograms by Diego http://thedesignoffice.org/project/modern-pictograms/#comment-441 Diego Wed, 25 Jan 2012 01:40:17 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-441 Beautiful, Thanks for sharing , I think I will be using it a lot. Beautiful, Thanks for sharing , I think I will be using it a lot.

]]> Comment on Modern Pictograms by John Caserta http://thedesignoffice.org/project/modern-pictograms/#comment-344 John Caserta Mon, 23 Jan 2012 21:26:57 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-344 I believe empty squares can be found in most typefaces. It might require using unicode. Numbers in squares can be achieved in CSS and doesn't require the typeface to supply the square (or circle). I believe empty squares can be found in most typefaces. It might require using unicode. Numbers in squares can be achieved in CSS and doesn’t require the typeface to supply the square (or circle).

]]> Comment on Modern Pictograms by Wei http://thedesignoffice.org/project/modern-pictograms/#comment-310 Wei Mon, 23 Jan 2012 06:00:37 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-310 Would love to see some numbers in squares too, or just an empty square font, for designing numbers used for paging. Would love to see some numbers in squares too, or just an empty square font, for designing numbers used for paging.

]]> Comment on Modern Pictograms by John Caserta http://thedesignoffice.org/project/modern-pictograms/#comment-287 John Caserta Sat, 21 Jan 2012 21:22:43 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-287 Sounds interesting. Keep me in the loop if you find anything related to this. I'm open to working within a larger standard. Sounds interesting. Keep me in the loop if you find anything related to this. I’m open to working within a larger standard.

]]> Comment on Modern Pictograms by tack http://thedesignoffice.org/project/modern-pictograms/#comment-284 tack Sat, 21 Jan 2012 18:46:44 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-284 Kindof. I'm more thinking of things like SMPTE that has (I think, could be wrong) play/pause as the space bar and longstanding conventions like p for print. I don't imagine there would be a new enough standard in place to take facebook/twitter into account. It may have to be created. There could be characters reserved in a typeface for new/custom/brand bits alongside a 'standard' that paves the cowpaths. Kindof. I’m more thinking of things like SMPTE that has (I think, could be wrong) play/pause as the space bar and longstanding conventions like p for print. I don’t imagine there would be a new enough standard in place to take facebook/twitter into account. It may have to be created. There could be characters reserved in a typeface for new/custom/brand bits alongside a ‘standard’ that paves the cowpaths.

]]> Comment on Modern Pictograms by John Caserta http://thedesignoffice.org/project/modern-pictograms/#comment-283 John Caserta Sat, 21 Jan 2012 18:17:56 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-283 I think I understand what you're writing. You're imagining that a theme developer wants to give the user options for various open source typefaces, icons being one of them. It makes sense that any icons made for dynamic use would share the same function. You're thinking ahead, but makes sense. Not sure where those standards would come from. Unicode is one way it could work, but that's a bit unfriendly for desktop use. And is there a unicode for iPhone? I think I understand what you’re writing. You’re imagining that a theme developer wants to give the user options for various open source typefaces, icons being one of them. It makes sense that any icons made for dynamic use would share the same function. You’re thinking ahead, but makes sense. Not sure where those standards would come from. Unicode is one way it could work, but that’s a bit unfriendly for desktop use. And is there a unicode for iPhone?

]]> Comment on Modern Pictograms by tack http://thedesignoffice.org/project/modern-pictograms/#comment-282 tack Sat, 21 Jan 2012 18:02:05 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-282 These plus CSS generated content are so full of win. Are there any relevant standards regarding which character would map to which event the image represents? Like a hotkey mapping? It would be really neat if on a site like wordpress a big chunk of theming was just swapping fonts and all the buttons/icons did the same things. Probably good for ARIA too. These plus CSS generated content are so full of win.

Are there any relevant standards regarding which character would map to which event the image represents? Like a hotkey mapping? It would be really neat if on a site like wordpress a big chunk of theming was just swapping fonts and all the buttons/icons did the same things. Probably good for ARIA too.

]]> Comment on Modern Pictograms by Andreas http://thedesignoffice.org/project/modern-pictograms/#comment-280 Andreas Sat, 21 Jan 2012 13:03:17 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-280 slider also appears in Opera ;) slider also appears in Opera ;)

]]> Comment on Modern Pictograms by Spencer http://thedesignoffice.org/project/modern-pictograms/#comment-253 Spencer Fri, 20 Jan 2012 02:06:24 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-253 This is fantastic! Thank you for making these available. I will likely use U G and , for small activate / deactivate buttons on the release version of this free app: http://partnerpartnerandpartners.com/beerstatus/ Thanks again, Spencer Partner, Partner & Partners This is fantastic! Thank you for making these available. I will likely use U G and , for small activate / deactivate buttons on the release version of this free app: http://partnerpartnerandpartners.com/beerstatus/

Thanks again,

Spencer
Partner, Partner & Partners

]]> Comment on Modern Pictograms by John Caserta http://thedesignoffice.org/project/modern-pictograms/#comment-248 John Caserta Thu, 19 Jan 2012 19:44:08 +0000 http://do.hobo2010.com/?post_type=project&p=283#comment-248 Thanks everyone for the tweets and positive response. Would love to see the typeface get used... post links below to any projects where we can see the pictograms in action. Thanks everyone for the tweets and positive response. Would love to see the typeface get used… post links below to any projects where we can see the pictograms in action.

]]> Comment on Contact Sheet by Office Manager http://thedesignoffice.org/project/contact-sheet/#comment-109 Office Manager Fri, 13 Jan 2012 17:49:32 +0000 http://do.hobo2010.com/?post_type=project&p=188#comment-109 Keep in mind, you won't need to use Contact Sheet with the Flatfile theme. Flatfile has its own image management scripts. Think of Contact Sheet as a baby Flatfile that can drop into any other Wordpress theme. Keep in mind, you won’t need to use Contact Sheet with the Flatfile theme. Flatfile has its own image management scripts. Think of Contact Sheet as a baby Flatfile that can drop into any other WordPress theme.

]]> Comment on Contact Sheet by John http://thedesignoffice.org/project/contact-sheet/#comment-108 John Fri, 13 Jan 2012 16:33:28 +0000 http://do.hobo2010.com/?post_type=project&p=188#comment-108 Great. Tweaking and fixing a few things (right now!). Hopefully will have a version for you by the end of today. Great. Tweaking and fixing a few things (right now!). Hopefully will have a version for you by the end of today.

]]> Comment on Contact Sheet by Hwan Roldan http://thedesignoffice.org/project/contact-sheet/#comment-107 Hwan Roldan Fri, 13 Jan 2012 16:31:16 +0000 http://do.hobo2010.com/?post_type=project&p=188#comment-107 Dear John, i will try it out on my personal web www.nomorefracasos.com in which i pretend to install the flatlife theme. keep in touch and thanks again Dear John, i will try it out on my personal web http://www.nomorefracasos.com in which i pretend to install the flatlife theme. keep in touch and thanks again

]]>