Sunday, September 30, 2012

Web Style Guide, 3rd Edition

resources from: http://webstyleguide.com/wsg3/1-process/2-development-team.html

1. PROCESS

The Site Development Team
The strategic importance and project budget for your web efforts will largely determine the size and skill depth of your web site development team. Even for a smaller project, however, you’ll need to cover the core team disciplines. In most small to medium projects one person may handle multiple tasks or someone with specialized expertise (graphic design, for instance) is hired for specific assignments. Many managers who are assigned the responsibility of creating a web site don’t have the luxury of picking specialist team members. Inventory the skills and aptitudes in the team you assemble, and consider careful outsourcing to supply any expertise your team lacks.
The core skill sets needed in a web site development team are:
  • Strategy and planning
  • Project management
  • Information architecture and user interface design
  • Graphic design for the web
  • Web technology
  • Site production

    In larger web projects each role may be filled by a separate person, although in more specialized skill areas those contributors are not likely to be full-time team members for the duration of the project.

Web team roles and responsibilities
Core web team roles and extended secondary team roles in larger web projects are:
  • Project stakeholder or sponsor
  • Web project manager
    • Account executive
    • Quality assurance tester
  • Usability lead
  • Information architect
  • Art director
    • Web graphic designer
    • Interactive designer (Flash, JavaScript, Ajax)
    • Media specialist (photography, illustration, audiovisual, Adobe Flash)
  • Web technology lead
  • Site production lead
    • html page coder
  • Site editor
    • Site copywriter
    • Content domain expert (content coordination, research)
Project stakeholder or sponsor
The project sponsor or stakeholder is the person or group responsible for initiating the web site project. In most instances the sponsor is the client or customer for the web site development work, but in smaller in-house department projects the sponsoring manager and the web project manager may be the same person. The sponsor provides the overall strategic vision and purpose for the site development project, approves the contract or work plan, is responsible for the budget and project schedule, and provides the resources to support the work of the site development team.
The sponsor is the client the team works to please, but sponsors have critical work to perform as part of the overall site development team. Sponsors act as a liaison to the rest of the sponsoring organization, provide critical domain expertise, coordinate with the larger goals of the sponsoring organization, and deliver site content and domain expertise to the project. As such, it is critical that sponsors and other stakeholders understand their responsibilities to the web team: late delivery of web site content is the most common cause of blown schedules in web development projects. Sponsors also are typically responsible for third-party or external content contracts, other media licensing negotiations, and coordination with other marketing, information technology, and communications efforts at the sponsoring organization or company.
Web project manager
The web project manager coordinates and communicates the day-to-day tactical implementation of the web site project, acting within the constraints of the project charters and goals, project budget, development schedule, and quality objectives laid out in the planning stages. The project manager is the team member ultimately responsible for keeping the overall team activities focused on the site strategic objectives and agreed deliverables, and he or she continually monitors the scope of the project activities to ensure that the team stays “on time and on budget.” The project manager acts as the primary contact between the web team and the sponsor and manages the overall communication among creative, technical, and production elements of the web site team. In larger web projects the project manager is not normally part of the hands-on production team, but in smaller in-house projects the sponsor, design lead, or technical lead may also act as the project manager for the site team. Project managers create and maintain the project planning and strategy documents, budget spreadsheets, project schedules and Gantt charts, meeting notes, billing records, and other project documentation that details the team’s activities (fig. 1.1).

Figure 1.1 — Gantt charts are commonly used to keep track of project phases and team responsibilities.

Usability lead
The usability lead’s role is to shape the overall user experience. The usability lead works closely with the information architect—in fact, the same individual often fills both information architect and usability roles. As the primary user advocate on the development team, the usability lead has responsibility for user testing, user research and persona development, and universal usability standards for the site project. In the initial stages of design, the usability lead is responsible for running interviews, field studies, and usability tests and for producing personas and scenarios to inform project requirements. Once designs are conceptualized in the form of diagrams, wireframes, and prototypes, the usability lead tests the designs with users and gathers feedback for the site designers and developers. In the final stages of a project, the usability lead evaluates the effectiveness of designs through additional field studies and user testing and ensures that universal usability goals are met. The usability lead is also responsible for evaluating the success of the project (Does the site accomplish the goals? Are users successful and satisfied with the design?) and for measuring project outcomes (Are more users visiting the site? Is the site producing more revenue?).

Information architect
The site information architect organizes and categorizes web site structure and content. The information architect is most active early in the design and planning phases of the project, developing content categorization schemes, consistent site terminology, content structure across the site, and site architecture diagrams that explain the overall site planning to both the sponsor and the web team members. Information architects also work closely with the site designers to craft page “wireframes,” the diagrammatic page grids that show how various areas of the page will be used to support site identity, navigation, and page content. Page wireframes form the crucial link between the overall site architecture and what the user sees on each page of the web site, determining how easily a user can find the site’s content and features and shaping the user’s overall experience. Information architects often have a background in library science, using controlled vocabularies, carefully designed content and navigation nomenclature, and search techniques to help users find relevant content. The primary deliverables from the information architect are usually charts and diagrams: site architecture overviews, page wireframes, and user interaction explanations. These visual representations of the site planning process are crucial to communicating site structure and user experience to both sponsors and other web team members, particularly the back-end technical developers who support the interactive elements of the site. Wireframes in particular are used by the usability lead to test design concepts with users (fig. 1.2).




Figure 1.2 — Web site designs are necessarily abstract. Planning diagrams such as wireframes are a crucial means to convey ideas about the site structure.

Art director
The art director’s primary responsibility is the overall look and feel for the web site, establishing the site typography, visual interface design, color palette standards, page layout details, and the particulars of how the graphics, photography, illustration, and audiovisual media elements of the site come together to form an integrated whole. As the web has matured over the past decade, many graphic design professionals have become specialists in designing for interactive media for computer screens and are well versed in user interface design, web navigation, and site architecture. In smaller projects an experienced web art director often assumes the information architecture and usability roles in addition to directing the visual design of a site. In the site development and planning stages the art director creates or supervises the creation of increasingly complex design sketches to illustrate the evolving design proposals to the project sponsor and web team. As designs are approved the art director supervises the conversion of these design sketches into the detailed specifications of graphics and typography that the page engineers will need to create html (HyperText Markup Language) page templates (fig. 1.3). In larger organizations the art director is usually the person responsible for assuring that the new web design work is consistent with any established corporate identity and user interface standards.

Figure 1.3 — Wireframes inevitably look boxy, but the final visual designs don't need to be.

Web technology lead
The web technology lead must have a broad grasp of web publishing environments, development languages and web development frameworks, web database options, and network technology. The technology lead acts as the bridge, translator, and plain-English communicator between the technologists and the creative and project management elements of the team.
As part of the site planning process the technology lead creates the general blueprints for the collection of technologies that will support the chosen web site technology framework, including content management, rss (Really Simple Syndication) or other xml (Extensible Markup Language) content formats, database integration and support, custom web programming, and integration with other applications or databases that supply content or interactive features to the web site. The technology lead provides the primary data-processing architecture for the project, determining the technical specifications for the overall web development framework, assessing the developing strategy and goals, and matching those needs to appropriate technology solutions. In larger projects the web technology lead typically manages teams of programmers, network or server engineers, database administrators, software quality assurance testers, and other information technology professionals that support the production and design teams.
Site production lead
Early in the design stage the site production lead is responsible for converting initial web site page mockups, designs, and wireframes into html pages. Once the site has been planned and the design and information architecture plans have been completed, the site production lead manages the work of building the site’s pages, either directly in “plain” html or within a web content management system (cms) or using web site production software such as Adobe Dreamweaver. In coordination with the site technical team, the site production lead is typically responsible for creating the master page templates in xhtml (Extensible HyperText Markup Language) and Cascading Style Sheets (css), validating page code, and assembling the work of the information architects and site graphic designers into finished page templates ready to be filled with content. If a cms is used to deliver the finished content, the html/css page templates must be converted into the required format. In larger projects the site production lead usually manages a staff of web designers who fill pages with content, integrating finished text, graphics, and audiovisual elements on each page and linking pages to the larger web site and (usually) to other web pages on the Internet. In many web teams the site production lead also manages the work of site editors and copywriters.


Information Architecture [Flow Chart]

SADAH Flowchart



Sawhill Gallery
MOCA: 

The Museum of Contemporary Art, Los Angeles




Museums & Galleries

understanding CSS

Internal & External CSS


INTERNAL css

<!DOCTYPE html>
<head>
<title>using INTERNAL css</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
}
</style>
</head>

<body>
</body>
</html>


EXTERNAL css

<!DOCTYPE html>
<head>
<title>using EXTERNAL css</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>

<body>
</body>
</html>

-------
style.css

body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
}






apple SAFARI Developer Library

HTML Reference
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1



CSS Reference

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html

Monday, September 17, 2012

Web Font Choice

Web Font Choice {html&css: p. 277~278} 
https://typekit.com
www.fontex.org
www.fontsquirrel.com
www.openfontlibrary.org
------------------------------------
Google Web Fonts: www.google.com/webfonts
Google Developer: https://developers.google.com/webfonts/docs/getting_started

A Designer's guide to Webfonts:
http://www.fontshop.com/education/pdf/webfonts.pdf
------------------------------------

> Example
Textbook: Chap.12 (p.277)

CSS:
@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/chunkfive.eot');}
  
 h1, h2 {
    font-family: ChunkFiveRegular, Georgia, serif;}
 
HTML:
 <h1>Briards</h1>
  <p>The brie is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
  <p>The briard, which is believed to have originated in France, has been bred for centuries to herd and to protect sheep.</p>

Monday, September 10, 2012

ASG: resume

Emma Dowdy | Resume
Emma Dowdy
Contact Me

Education

B.F.A. Graphic Design | Art History Minor | 2013
James Madison University | Harrisonburg, VA

Relevant Coursework:
Typography, Poster Design, Web Design, Brand Identity

Employment

Marketing Department
James Madison University | Harrisonburg, VA
Intern | May 2012 to August 2012
Student Designer | August 2012 toPresent

Organizations

Small Group Leader | InterVarsity Christian Fellowship | August 2009 to Present
Kappa Pi Art Honors Fraternity | September 2010 to Present

Skills

Adobe Creative Suite, Microsoft Suite, Mac and Windows Platforms

References available upon request.

Sunday, September 9, 2012

Photoshop tutorial - how to slice a psd in photoshop

Tutorial: DreamWeaver

Creating new documents

Adding structure to text

Placing images on the page

Creating links in Dreamweaver

Tuesday, September 4, 2012

Reading: Web Font Size


How to size text using ems

My more recent article on A List Apart, How to Size Text in CSS, provides more up-to-date info on sizing text using ems.
Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required. Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. That leaves ems. At this point people often leg it. ‘Ems are too inconsistent,’ they say, ‘they’re too hard; they never work.’ Well that may be the received wisdom, but if ever the was a case of FUD then this is it. I will now attempt to show you how ems can be as quick and easy to use as pixels.

Why ems?

If the world were an ideal place, we’d all use pixels. But it’s not, we have the broken browser to contend with.IE/Win will not allow readers to resize text that has been sized in pixels. Like it or not, your readers will want to resize text at some point. Perhaps they are short-sighted, doing a presentation, using a ridiculously high resolution laptop or simply have tired eyes. So unless you know (not think) your audience won’t be using IE/Win or will never wish to resize their text then pixels are not yet a viable solution.
Keyword-based text sizing will allow all browsers to resize text so this is a possibility, but I don’t find it gives me the precision that pixels would give me. Using ems however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.

Get on with it

OK let’s dive into ems. I’ll show you, from scratch, how to size text in a document using ems. I’ll assume throughout that we are dealing with a browser set to ‘medium’ text. The default size for ‘medium’ text in all modern browsers is 16px. Our first step is to reduce this size for the entire document by setting body size to 62.5%:
BODY {font-size:62.5%}
This takes 16px down to 10px which I’m using purely because it’s a nice round number for example purposes – 10px text is too small for the real world. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. If you are laying out your document using CSS(which you are, right?) then you have probably used a few divs to group together elements. Apply text-size to these divs and your job is almost done. Consider a two column layout with header and footer:
<body>
<div id="navigation"> ... </div>
<div id="main_content"> ... </div>
<div id="side_bar"> ... </div>
<div id="footer"> ... </div>
</body>

#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}
So this would give us a document where text in the navigation and side bar is displayed at 10px, the main content is 12px and the footer is 9px. There now remains a few anomalies to sort out (you’d have to do this even if you were sizing in pixels). In Mozilla-based browsers, all heading elements in our aforementioned #main_content div will be displayed at 12px whether they are an H1 or an H6, whereas other browsers show the headings at different sizes as expected. Applying text-sizes to all headings will give consistency across browsers, for example:
H1 {font-size:2em}  /* displayed at 24px */
H2 {font-size:1.5em}  /* displayed at 18px */
H3 {font-size:1.25em}  /* displayed at 15px */
H4 {font-size:1em}  /* displayed at 12px */
A similar job needs to be done on forms and tables to force form controls and table cells to inherit the correct size (mainly to cater for IE/Win):
INPUT, SELECT, TH, TD {font-size:1em}
And so to the final tweak and the bit folks seem to find most tricky: dealing with nested elements. We’ve already touched upon it with our headers, but for now let’s look more closely at what’s going on. First of all we changed our body text to 10px; 62.5% of its default size:
16 x 0.625 = 10
Then we said our main content should be displayed at 12px. If we did nothing, the #main_content div would be displayed at 10px because it would inherit its size from the body element – its parent. This implies that we always size text relative to the parent element when using ems:
child pixels / parent pixels = child ems
12 / 10 = 1.2
Next we wanted our h1 heading to be 24px. The parent to our h1 is the main_content div which we know to be 12px in size. To get our headings to be 24px we need to double that so our ems are:
24 / 12 = 2
And so it goes on. Tricky stuff occurs where rules like this are applied:
#main_content LI {font-size:0.8333em}
This rule implies that all main content list items should be displayed at 10px. We use the same straight forward maths to achieve this:
10 / 12 = 0.8333
But what happens when one list contains another? It gets smaller. Why? Because our rule actually says that any list item in the #main_content div should 0.8333 times the size of its parent. So we need another rule to prevent this ‘inherited shrinkage’:
LI LI {font-size:1em}
This says that any list item inside another list item should be the same size as its parent (the other list item). I normally use a whole set of child selectors to prevent confusion during development:
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}
And that’s it. When sizing text in ems there’s really one rule to remember: size text relative to its parent and use this simple calculation to do so:
child pixels / parent pixels = child ems


Some helpful tools

Pixy’s list computed styles is fabulous bookmarklet which shows the cascade of calculated font sizes (or any otherCSS property). Mozilla’s DOM Inspector is even more powerful as it allows you to see which CSS rules are affecting any given element in order of cascade priority so you can see why your text is or isn’t changing size when you expected it to.
If you’re finding the maths all a bit complex, try using Riddle’s handy em calculator.


And finally… what is an em?

Classically, an em (pronounced emm) is a typographer’s unit of horizontal spacing and is a sliding (relative) measure. One em is a distance equal to the text size. In 10 pixel type, an em is 10 pixels; in 18 pixel type it is 18 pixels. Thus 1em of padding is proportionately the same in any text size.

Update:

Make sure you read Patrick H Lauke’s comment on perfecting this method for IE5/Win.

Resource from: http://clagnut.com/blog/348/

CSS Font-Size: em vs. px vs. pt vs. percent

 Meet the Units

  1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
  2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
  3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
  4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

So, What’s the Difference?

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.








As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.

Em vs. Percent

We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).







When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.

reference: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Punctuation Names


ASCII Pronunciation Rules for Programmers


Common NamesRare Names
!exclamation mark
bang
pling
excl
not
shriek
factorial
exclam
smash
cuss
boing
yell
wow
hey
wham
eureka
spark-spot
soldier
control
"quotation marks
quote
double quote
literal mark
double-glitch
dieresis
dirk
rabbit-ears
double prime
#
hash
pound sign
number sign
pound
sharp
crunch
hex
mesh
grid
crosshatch
octothorpe
flash
square
pig-pen
tictactoe
scratchmark
thud
thump
splat
&ampersand
amp
amper
and
and sign
address
reference
andpersand
bitand
background
pretzel
'apostrophe
single quote
quote
prime
glitch
tick
irk
pop
spark
closing single quotation mark
acute accent
( )opening / closing parenthesisleft / right paren
left / right parenthesis
left / right
open / close
open / close paren
paren / thesis
so/already
lparen/rparen
opening/closing parenthesis
opening/closing round bracket
left/right round bracket
wax/wane
parenthisey/unparenthisey
left/right ear
[ ]opening / closing bracketleft / right bracket
left / right square bracket
bracket / unbracket
square / unsquare
u turn / u turn back


}
opening / closing brace
open / close brace
left / right brace
left / right squiggly
left / right squiggly bracket/brace
brace / unbrace
curly / uncurly
leftit / rytit
left / right squirrelly
embrace / bracelet
< >less / greater than
bra / ket
left / right angle
left / right angle bracket
left / right broket
from / into (or towards)
read from / write to
suck / blow
comes-from / gozinta
in / out
crunch / zap
tic / tac
angle / right angle
*asteriskstar
splat
wildcard
gear
dingle
mult
spider
aster
times
twinkle
glob
Nathan Hale
-dash
hyphen
minus
worm
option
dak
bithorpe
.perioddot
point
decimal point
radix point
full stop
spot
/slash
stroke
slant
forward slash
diagonal
solidus
over
slak
\
backslash
hack
whack
escape
reverse slash
slosh
backslant
backwhack
bash
reverse slant
reversed virgule
backslat
:colondots
two-spot
;semicolon
semi
weenie
hybrid
pit-thwong
=equalsgets
takes
quadrathorpe
half-mesh
^circumflexcaret
hat
control
uparrow
xor sign
chevron
shark (or shark-fin)
to the
fang
pointer
_underline
underscore
underbar
under
score
backarrow
skid
flatworm
`grave accent
backquote
left quote
left single quote
open quote
grave
backprime
backspark
unapostrophe
birk
blugle
back tick
back glitch
push
opening single quote
quasiquote
|bar
or
or-bar
v-bar
pipe
vertical bar
vertical line
gozinta
thru
pipesinta
spike
~tilde
squiggle
twiddle
not
approx
wiggle
swung dash
enyay
sqiggle (sic)

Reading: Am I Too Late to the Web Design Party?



Ask a Madman: Am I Too Late to the Web Design Party?

 Speider Schneider | Comments: 1

I’m a graphic designer just now getting on the web design bandwagon. Am I too late to the party?

For years, my father refused to learn how to set the clock on his VCR. Twice a year (if there were no power failures) I’d get a call from him, asking how to do it. Eventually, he just got acclimated to deducting an hour from the clock time in the spring and summer months rather than try to learn it.
So when my mother bought her first computer, I started screening my calls. But soon enough she learned how to do an email attachment and even set up her own blog—oddly enough—about how to set your VCR clock.
learning web design, too late?
Don't worry, you aren't that late to the web design party.
Some graphic designers have felt left behind by rapidly changing web technologies. At first it was just easy drag-and-drop web design software supplemented by a simple understanding of HTML. Soon Flash and Java scripting became the norm. Then HTML gave way to DHTML, XHTML and HTML5 and so on. Now, putting Dreamweaver on your resume incites snickers from 23-year-old creative directors.
Many of my peers are taking web classes, trying to catch up on needed skills. Some succeed enough to not be laughed at; others just can’t keep up with all the new programming languages and plugins. For the 23-year-olds who grew up coding HTML and build apps for fun, print designers are like the elderly parents who call about VCR clocks. Print designers who have a few more years (or decades) before they retire need to learn some new tricks.
If you confuse PHP with PCP and think jQuery might be something conservative politicians want to outlaw, you may be a little too late to the technology party. To stay competitive with younger, more savvy designers, you’ll need to work twice as hard to catch up. It means not only keeping up with the changes Adobe makes to its graphics programs but knowing about web language developments, learning new software AND having examples to show employers. No one said it would be easy. 
learning web design, too late?
It's never too late to get back on your feet.
In fighting obsolescence, it might seem like there’s just too much technology to digest. So we’ve boiled it down to four main points for you to focus on. Being familiar with all of these concepts is important; being an expert in one of them can help you score jobs and keep hustling.

Learn WordPress.

WordPress makes it easy to set up websites and blogs for clients—and yourself! In fact, the WordPress content management supports the majority of websites started today. You can use a stylish theme to get started, and when you learn some code, you can customize it or even start building and selling your own awesomely designed themes. HOW Interactive’s got a whole series on how to use Wordpress themes, plugins and tools.

Be a presentation software guru.

Believe it or not, there are design companies that do 90% of their business in creating digital presentations. Creatives excel at presentations because of our ability to make beautiful visuals, and clients big and small need presentation material. While PowerPoint is still the gold standard in corporate environments, keeping up with emerging presentation technologies can be a great selling point for yourself. For example, check out this amazing animated presentation made with Google Docs:

Stay on top of new technologies.


From left: a QR code, a Microsoft Tag and a Data Matrix.
If you haven’t seen these crossword-looking things on packaging or posters, you aren’t getting out enough. QR codes are barcodes you scan with your smartphone to go to a web page, video, app or to make a call. The boring black-and-white squares can also be modified with great design and color. New design firms are popping up everywhere to handle the design of these codes. With trial and error, you can still create some really impressive pieces for clients. (But be careful you don’t end up in the annals of QR code fails!)
And it’s been around for a few years, but augmented reality technology is starting to make its way into our daily lives. It’s a way to interact with your surroundings through your smartphone’s camera—the videos in this articleare great examples.

Prepare for the mobile web. 

Oh, to have been in the forefront of this technology a few years ago. It’s no secret that making just one monster app like Angry Birds will let you retire. Two will let your whole family retire. Three popular apps, and you can buy a better family! 
But responsive websites (ones that work just as well on laptops as they do on tablets and on smartphones) are the real future of mobile apps. It will take some training for a print designer but having a creative eye is the key to being a superstar of this technology. And if you aren’t ready to design for the mobile web yourself, justbefriend some developers!
There are many avenues for creatives to follow to stay on the forefront of technology. It takes hard work, dedication, imagination and the passion we all feel by being creative. Catch up or get left behind—the choice is yours.

HTML eMail: Reading and Reference


Reading & Reference:


20 Email Design Best Practices and Resources for Beginners


Design Gallery:

Test HTML email:  
http://www.emailonacid.com/
Email Test - Online Demo:

Guide to CSS support in email:

Monday, September 3, 2012

Margin, Padding


CSS Box Modle / Padding

















  • Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
  • Border - A border that goes around the padding and content. The border is affected by the background color of the box
  • Padding - Clears an area around the content. The padding is affected by the background color of the box
  • Content - The content of the box, where text and images appear
Padding
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
Possible Values

Value

Description

length

Defines a fixed padding (in pixels, pt, em, etc.)

%

Defines a padding in % of the containing element

The padding property can have from one to four values.
  • padding:25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px
  • padding:25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px
  • padding:25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px
  • padding:25px;
    • all four paddings are 25px

Resources from "http://www.w3schools.com/css/css_padding.asp"

Sunday, September 2, 2012

p1: example of research for html email


This email from Reverb effectively presents a lot of information without overwhelming the reader. The list with images is simple, but still interesting. I also appreciate the option to "book now" after each description. Impulse buying in an email :-)