List of media queries on device displays by pixel density

Target device displays using media queries:

different devices

iPhone
320 x 480

iPhone 4
640 x 960

iPad 1 & 2
768 x 1024

iPad 3
1536 x 2048

Amazon Kindle Fire
1024 x 600

Media Queries – setting the max-device-width of any screen size. Here’s a few:

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
/* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape) {
/* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px) {
/* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
/* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}

/*#### iPhone 6 plus phablet ####*/
@media screen and (min-device-width: 414px) {
/* some CSS here */
}

/*#### iPhone 6#### */
@media screen and (min-device-width: 375px) {
}

/*#### iPhone ####*/
@media screen and (max-device-width: 320px) {
}

 

 

Advertisements

Creating Modern, Responsive Websites With Web Standards

Website Standards and Clean Code

It isn’t that difficult to create a modern website based on current web standards. If your website was built using the latest technology, your site will be super-fast, modern, clean and responsive.

Everyone wants their website to cost less, work better, and reach more people in today’s browsers, screen readers, and wireless devices. The inescapable technological advancements that are happening as we speak are breaking websites all over the internet. A modern website built using the latest coding practices ensures that your website will function properly across all devices and help individuals with disabilities who are using special devices to access and interact with the internet – and stand the test of time.

You don’t have to spend money on trendy, short-sighted, proprietary solutions that will end in disaster. No one can afford to piecemeal a website that will ultimately break sooner than later.

Coding several different stylesheets might have seemed like a great idea at the time, but it is not a rational solution to problems that are continuing to plague site owners and builders.

FORWARD COMPATIBILITY

WaSP (www.webstandards.org) advocates standards that reduce the cost and complexity of site creation and ensure simple, affordable access for all. Today, every browser supports web standards as a matter of course. They work with the designers of development tools such as Dreamweaver. You can find a myriad of web standards educational tools and this information can be found in most languages today.

Apple’s latest WebKit based Safari browser, which powers the iPhone’s web browser, Mozilla powered Firefox, Opera, the WebKit based Google Chrome, and Microsoft Internet Explorer 7+ understand and correctly support XHTML, CSS3, JavaScript, and the DOM.
*Internet Explorer 6 does not support many of the latest web standards, and we can only hope that everyone has moved passed this version of IE. Developers know that we can fix IE6 to some degree, but there comes a time when you have to move forward and not look back. We’ve stopped overkill fixes because newer phones are equipped with the latest browsers and it just doesn’t warrant the extra time and expense anymore to work out ALL the fixes needed for IE6 to view properly.

WHAT IS WEB STANDARDS COMPLIANT?

javascript

JavaScript creates action.  JavaScript is the bomb. This language has given us the ability to create action!
In a perfect world, browsers perfect their support for every single standard. Considering that most software doesn’t come out bug-free, and standards are sophisticated and complex, cross-browser support is actually pretty solid enough that we do develop using the latest standards. HTML5, more accessibility, CSS3, structured markup and deeper DOM and JavaScript function calls are becoming the progressive-enhancement that is pushing the internet into the future. All the big companies such as Apple, MSN, Wikipedia, and WordPress have embraced web standards. Of course, they don’t always achieve perfect validation or pure semantic markup, but a trained developer can make these markup fixes very quickly, and let’s face it, modern browsers are lenient.

STANDARDS ARE THE TOOLS WITH WHICH ALL OF US CAN DESIGN AND BUILD SOPHISTICATED, BEAUTIFUL SITES THAT WILL WORK TODAY AND TOMORROW.

OLD BROWSERS ARE INCOMPETENT, INCOMPLETE, AND HAZARDOUS TO THE HEALTH OF THE WEB.

GARBAGE IN, GARBAGE OUT.

More than 90% of all websites are obsolete. They might look good on desktop browsers, but outside of that, the symptoms of decay are starting to appear. Carefully constructed layouts have begun to fall apart, and expensively engineered behaviors have stopped working. As browsers evolve, site performance continues to deteriorate.

Modern browsers are not merely newer versions of the same old thing. They differ fundamentally from their predecessors, and in many cases, they’ve been rebuilt from the ground up. They have a new job: to comply as well as possible with the web standards. As the newer browsers comply with web standards, they are becoming increasingly intolerant of broken code and markup.

THE KNOWLEDGE OF WEB STANDARDS IS A NECESSITY FOR ANYONE WHO DESIGNS OR PRODUCES WEBSITES

BEST WEBSITE NOW ENSURES THAT SITES DESIGNED TODAY WILL CONTINUE TO WORK IN TOMORROW’S BROWSERS AND DEVICES – INCLUDING DEVICES NOT EVEN BUILT OR IMAGINED YET

We believe in “write once, publish everywhere”. It isn’t wishful thinking. We are proud of the fact that our mission statement is “Because it matters”. Our mission follows some basic rules:

Control layout, placement, and typography in desktop browsers while allowing users to modify the presentation to suit their needs.
Develop and support sophisticated behaviors that work across multiple browsers and platforms.
Comply with accessibility laws and guidelines without sacrificing beauty, performance, or sophistication.
Redesign quickly – reducing costs and eliminating unnecessary work.
Support emerging devices from wireless gadgets and smart phones to Braille output devices and screen readers used by those with disabilities with one website.
Offer sophisticated printed versions of any web page.
Stay educated and ahead of the curve to always use real semantic markup.

PAGE RANKING AND SEO

iStock_000022200278Large

SEO and Analytics go hand-in-hand.  Believe it or not, companies do not have to spend a lot of money for SEO or Analytics. Well thought out SEO makes your website findable. Content is king. Focus on lean, keyword-rich, buzzword-free content that’s relevant to your customers, and use semantic markup. Copy, CSS layout and HTML5’s latest coding practices are the golden keys to findability.

COMPANIES THAT KNOW THE SIMPLICITY OF GREAT SEO ARE PROSPERING. THOSE THAT DON’T ARE FALLING BEHIND.

ACCESSIBILITY – THE HEART OF WEB STANDARDS…

Accessibility makes sure your content can be read and your site can be used by everyone, no matter what device they browse with, and regardless of physical ability. Innovation is the soul of accessibility. Accessibility is legal standard for judging and enforcing the accessibility of sites. This is great news because the world is being pushed into one single standard.

If you use standards-based designing principles, you not only make your content easy for search engines to find, it will also enable visually disabled people who use screen readers to navigate your websites content.

Screen reader users navigate web pages by tabbing from h2 to h2 and from section to section, just like sighted users navigate by visually scanning. When structuring your site semantically, pay particular attention to forms and tables. Provide keyboard access for those who are unable to use a mouse. Keyboards and assistive devices are the gateway to online user experience.

WELCOME MILLIONS OF VISITORS TO YOUR SITE WHO ARE LOCKED OUT – YES – THERE ARE MILLIONS OF DISABLED PEOPLE IN THE WORLD WHO HAVE ACCESS TO THE INTERNET

iStock_000020458543XSmall
Google web crawlers look for relevancy of content when a user types in an inquiry.
Think of web crawlers as blind users – Google is the biggest blind user on the web. Dish out appropriate content, well written and well structured, and you not only serve the blind folks in your audience, you also attract millions of sighted ones.

It wouldn’t be smart to exclude disabled Americans. This demographic would take up a city the size of Los Angeles or New York City. Millions!

If you think blind people don’t buy products online is missing the point and the boat. Don’t be blind yourself to the true nature of the audience you reject – you are still reaching the non-disabled populace this way by conforming to access guidelines and many others who would have ordered your products over the phone if only your site let them.

Section 508

Section 508 requires all websites under its jurisdiction to provide “equal or equivalent access to everyone” to accommodate the visually impaired, the hearing impaired, the physically disabled, and people who have photosensitive epilepsy and it spells out what accessibility really means. This law covers computers, fax machines, copiers, telephones, transaction machines, and kiosks, as well as other equipment used for transmitting, receiving, or storing information. It also covers many websites. Section 508 became U.S. law in 2001 and applies to the following:

  • Federal departments and agencies (including the U.S. Postal Service)
  • Deliverables from contractors who serve them
  • Activities sponsored or funded by the Federal government
  • Activities sponsored by states that have adopted the regulations
  • This is just skimming the surface and you can find plenty of resources to explain what the exact standards are and how to apply them along with specific things to do to make your site 508 compliant.

The bottom line is that if you design with web standards and follow the guidelines, your site should be accessible to screen readers, Lynx, mobile devices, and old browsers as it is to modern, compliant browsers. Standards and accessibility converge in agreeing that one web document should serve all readers and users. Even Flash and PDF’s can now be made accessible.

MYTH: ACCESSIBILITY IS EXPENSIVE

Most tasks to bring a website to its best take minutes to accomplish. Simple tasks like adding a label to your web form or writing a table summary. Type a brief alt text for each image – which is a no-brainer. High level conformance is going to obviously fall under another category and will cost more. If you want to author closed captions for web videos or to caption live streaming media news feeds in real time see Joe Clark’s “Best Practices in Online Captioning” . (www.joeclark.org/access/captioning/bpoc)

I highly recommend the following cited book for anyone who builds things for the internet. Web Standards is such an exciting concept that ties us all together. Where we go from here who knows, but right now we are accomplishing a great thing using Web Standards, and this book is a must have.

You can find the latest Standards and beta versions of some brilliant new concepts existing on the W3C website. Their HTML5 Validator is a great place to find semantic errors within your page. Go to http://validator.W3.org/ for the latest information.

Jeffrey Zeldman with Ethan Marcotte (2010). Designing with Web Standards, Third Edition. Berkeley, CA. New Riders.

The future of design at IxDA Atlanta

The Future of Design

Future of Design

Future of Design

I had the pleasure of listening to experienced designers speak about their thoughts on the future of web design at an IxDA Atlanta meetup held at Georgia Tech Conference Center, showcasing local design thought leaders giving their take on what the future holds for the role of design in business and our daily lives. Each presenter was given five minutes to convey their design future to the crowd.

The speakers were representatives from interaction design, user experience, information architecture and industrial design. Diane DeSeta – User Experience Strategist; Sean Gerety – Senior Engineer – User Experience Integrator; Kevin Shankwiler – Assistant Professor in Industrial Design/Digital Fabrication Lab, Georgia Tech and Vice Chair, IDSA Atlanta; Wengert Klemens – Senior User Experience Architect, Turner Broadcasting; Adam Bloom – Entrepeneur and Software Product Marketer; Joseph Dickson – User Experience Consultant and Author; Chris Livaudais – Senior Industrial Designer and Chair IDSA Atlanta; Ralph Lord – Senior UX Practitioner; Terry Allen – Director, Marketing and Design and UX Consultant.

Understanding how design works and its impact on people will allow you to think outside the box, if you want. Innovation is born there, at the moment you start thinking about making something. We have at our disposal endless feedback information to be used to better the user experience.

The speakers all had 5 minutes to give their opinion about design and the future of design. They covered such topics as:

Understanding people, understand our users
Design for variability (not just displays)
Businesses are designed
Design applies to everything
Self-expressed, artisanship, DIY – ie, the Harlem Shake
Humanization of things
Big Data, Big Feedback
Convergence of Art and Science
Brain Science and Decisioning
“Do not fear mistakes – there are none”, Miles Davis
Design and gratitude
Innovation
Interaction with computers
We are designing the future
Displays will be everywhere
Bio Printing – Scotland’s stem cell secret and the ability to replicate any cell
How long can we live?
Design for the elderly
What if life was designed so that no one had to work?

It was a quick talk with great insight from professional designers. I hope to see more of this type of get together which allows the experts to offer their thoughts and ideas about the future of web design.

Startup Georgia at Hypepotamus – Jermaine Dupri tells how So So Def got its start…..

Startup Rally 2013

One part startup exposition, one part summer internship fair, and one part launch of Startup Georgia – startup led, statewide initiative to raise the profile of Georgia startups as part of the national network Startup America Partnership.

Featuring – Jermaine Dupri, CEO of So So Def Recordings, Scott Case, co-founder & CTO of Priceline, and over 100 startups exhibiting.

What are the odds that a Georgia street/country kid would use college students from Emory University to start his company?  Although he started his tremendous success story by finding the best party thrower at Emory, he admits it was a lot of hard work, a lot of hit and miss.  The party thrower is now manager to many artists, including, Justin Bieber.

He spoke about his $200,000 website that had a lot of moving parts, but was virtually invisible in search engines.  He started a free blog and received more hits than his official website!  He enjoyed the ability to communicate with his fans, so his new venture, Global 14.com is his personal social networking site.  He is into tech now, and his new site is very nice – another one of his visions.

Jermaine Dupri is celebrating the 20th Anniversary of So So Def Recordings at the Fabulous Fox Theatre in Atlanta.  The All-Star Anniversary concert is on Saturday, February 23, 2013.  Tickets at global14.com.

A number of soon-to-be well known entrepreneurs spoke about their vision.  Students met with startups from multiple sectors and industries to find out about summer internships.  Developers, computer science, designers, business students, and all majors are encouraged to explore the opportunities available to them right here in Atlanta.

Some of these ventures include:

startup-rally_0001_Visual-Art-Werks
startup-rally_0002_viaCycle
startup-rally_0007_MrArlo startup-rally_0006_TripLingostartup-rally_0033_GoLocalstartup-rally_0028_Keep-Dreaminstartup-rally_0019_Pindrop

Check out the lineup of next generation companies blossoming in Atlanta at Hypepotamus Startup Rally.

CSS3 Selectors

css3 selectors and javascriptCSS3 has added the ability to target almost any element on the page with a wide range of selectors.

We’ve been keeping up with the Cascading Style Sheet evolution.  We’ve been matching elements by type, class, and/or id.  Then we got familiar with the pseudo-elements, pseudo-classes and combinators.

CSS3 is an extension of CSS2.1 that adds powerful new functionality and has been divided up into several modules.  Each module has a standalone specification for a subsection of CSS, like selectors, text, or backgrounds.  The list of changes is quite exhaustive and can be researched at http://www.w3.org/Style/CSS/current-work.

  1. The original CSS specification had about 6 selectors.
  2. CSS2 introduced attribute selectors & CSS2.1 expanded the range with 12 more selectors.
  3. CSS3 introduces over a dozen new selectors.
  4. CSS3 did not add any new pseudo-elements, but refined these special selectors to now use a double colon as the proper syntax (::) to differentiate between the two types of selectors.
  5. CSS3 provides three new attribute selectors (ie., href or title) and one new combinator – that is, a selector that joins other selectors together, such as the child combinator (>) from CSS2.  The Selectors Level 3 Module has widespread and stable implementation across most browsers.  When I say most browsers, it usually means IE8+, and most all other browsers, who have been keeping up with the evolution.

We can get into the Document Object Model (DOM) to manipulate our elements.

A Quick Overview of useful, supported changes from CSS3:

CSS3 contains a lot of new properties that allow you to create visual fx, such as rounded corners, drop shadows, semitransparent backgrounds, gradients, and images for borders. Most of these changes are in the Background and Borders module; others in the Colors and Images modules.

You can manipulate a box’s position and shape in two- or three-dimensional space, such as rotating, scaling, or skewing it.  These effects are called transforms, and are covered in the 2D and 3D Transforms modules.

The Fonts module introduced the @font-face rule that allows you to link to a font file on your server and use it to display the text on your page, instead of being limited to the fonts on your user’s machine.

CSS3 introduces over a dozen new selectors. They are included in the Selector module.  The pseudo-class and attribute selectors allow you to target specific pieces of your HTML without needing to add IDs or classes, streamlining your code.

The Transitions and Animation module allows you to ease changes from one style on an element to another, such as gradually and smoothly changing the color of a button when you hover over it.  You can make complicated style changes and movements.

Multi-column Layout is a module that makes multi-column layouts easier to create.  It deals with flowing the text of a single block into multiple columns, similar to a newspaper layout.  The Flexible Box Layout module deals with making blocks align horizontally or vertically with each other and making them more flexible to the available space than floats or positioning can be.

Before moving on, let’s recap how a selector might be utilized.  Here is a short contact list example:

<ul>
<li><a href=”” lang=”en-GB” rel=”friend met”>Peter</a></li>
<li><a href=”” lang=”es-ES” rel=”friend”>Pedro</a></li>
<li><a href=”” lang=”es-MX” rel=”contact”>Pancho</a></li>
</ul>

All of these elements have a rel attribute which we can use to target all of the elements. The advantages of having more methods for traversing the document mean fewer styling hooks are required.  Here is another example:

<ul>
<li class=”1first 2pretty”>3<span>L</span>orem ipsum</li>
<li>Lorem ipsum</li>
<li class=”pretty”>Lorem ipsum</li>
<li class=”4last”>Lorem ipsum</li>
</ul>

This markup contains class names to describe each element’s position in the document tree:   first (1) and last (4) show that the li elements are the first and last children on the ul element, and pretty (2) is used to the odd-numbered li elements.  An extra span (3) is included around the first letter of the li element.  Use this example to add styles to alternating elements, set different values on the first and last elements, or add special formatting to the first letter of a text node.

Here is the list of selectors from CSS2:

a[rel] {color:red;}Simple Attribute Selector – all elements will have this rule applied to it. a[rel=’friend’] {color: red;}Exact Attribute Value Selector – will only target elements with the value of friend, so it would be the second element.
a[rel~=’friend’] {color:red;}Partial Attribute Value Selector – selects both of the elements that contain the value of friend.  It looks for the value of friend as part of a space-separated list, and applies to the first and second elements.
a[lang|=’es’] {color: red;}Language Attribute Selector applies rules to elements based on their lang attribute.  This would target both the second and third elements in our example because we targeted just es, and did not specify ES or MX.

CSS3 Introduces New Selectors 

The new Selectors already have widespread support, including IE8+.  CSS3’s new methods allow you to achieve the same visual results without muddying the markup with unnecessary classes and non-semantic elements.

a[attr^=val] – matches any element a whose attribute attr starts with the value val.  The val matches the beginning of the attribute value.  a[title^=’image’] {} –  rule will be applied to the a element in the first paragraph since the title attribute string begins with the word image.

a[attr$=val] – matches any element a whose attribute attr ends in val.  The val matches the end of the attribute.

a[attr*=val] – matches any element a whose attribute attr matches val anywhere within the attribute.  The string val is matched anywhere in the attribute value.  It is similar to a[attr~=val] above, except the val can be part of a word.  For example, .fakelink[title~=info] {} would match any element with the class fakelink that has a title attribute containing the string info, such as “Click here for more information.”

Selectors can be broadly separated into two categories, but they both sit outside the DOM

What’s the difference between a pseudo-class(:) and a pseudo-element(::)?

Remember this:  pseudo-classes select HTML elements that could have classes added to them, while pseudo-elements select things that aren’t HTML elements at all.

The four pseudo-elements in CSS are ::first-line, ::first-letter, ::before, and ::after.  Fragments of other HTML elements, not individual elements themselves, and not part of the DOM.  A double colon (::) is the correct syntax, but the single colon is better supported.  IE6, IE7 and IE8 only understand the single-colon notation.  All other browsers support both.

Pseudo-classes act directly on elements defined in the document tree (ie., p elements and href attributes); this category contains class, type, and attribute selectors, or DOM selectors.  E:first-child {} allows you to make a selection based on information that exists but isn’t provided as an attribute of the element – the exact purpose of a pseudo-class.

The pseudo-classes that we are familiar with for some of our user interaction are classes, namely :link, :visited, :hover, :active, and :focus, aka dynamic or interactive pseudo-classes.  The pseudo-class uses a single (:) colon.

Generated Content – The ::before and ::after pseudo-elements don’t refer to content that exists in the markup, but rather to a location where you can insert additional content, generated right there in your CSS.  While this generated content doesn’t become part of the DOM, it can be styled.  Notice the attr() allows you to access any attributes of the selected element.  Here is an example:

a[href^=http]:after {
content: “(” attr(href) “)”;
}
The a[href^=http] means “any a element whose href attribute begins with http, or in other words, external links.  You can use this to display the link’s target.  I tried it and it worked.  Another example might be like this:

a[href$=pdf] {
background: transparent url(pdficon.gif) 0 50% no-repeat;
padding-left:  20px;
}
a[href$=pdf]:after {
content:  “(PDF)”;
}
This style will add a PDF icon and the text”(PDF)” after links to PDF’s.  Remember that the [attr$=val] selector matches the end of an attribute .pdf., and of course, you need the image that will be displayed for you at 50% transparency.

Things to remember now….. 

1.  The :visited pseudo-class may pose a security risk, and may not be fully supported in the future.  Malicious sites can apply a style to a visited link, then use JavaScript to check the styles of links to popular sites.  This allows the attacker to glimpse the user’s browsing history without their permission.  As a result, several browsers have begun limiting the styles that can be applied with :visited and some others (notably Safari 5) have disabled it entirely. The spec explicitly condones these changes, saying:

“UAs [User Agents] may therefore treat all links as unvisited links,or implement other measures to preserve the user’s privacy while rendering visited and unvisited links differently.”

2.  For better accessibility, add :focus wherever you include :hover, as not all visitors will use a mouse to navigate your site.

3.  :hover can apply to any element on the page – not just links and form controls.

4.  :focus and :active are relevant to links, form controls, and any element with a tabindex attribute.

These are the most common pseudo-classes, but there are many others.  The following pseudo-classes match elements based on attributes, user interaction, and form control state.  They have been part of the spec-planned evolution and are currently being supported in most cases:

:enabled – a user interface element that’s enabled.
:disabled – a user interface element that’s disabled.
:checked – radio button or checkboxes that are selected or ticked.
:indeterminate – form elements neither checked or unchecked.  Not supported yet.
:target – this selector singles out the element that is the target of the currently active intrapage anchor.  You know you can have links to anchors within a page by using the # character with the id of the target.  This changes the URL in the address bar to thispage.html#content – and the :target selector now matches the #content element, as if you had included the selector #content.
:default – applies to one or more UI elements that are the default among a set of similar elements.
:valid – applies to elements that are valid, based on the type or pattern attributes.
:invalid – applies to empty required elements, and elements failing to match the requirement defined by the type or pattern attributes.
:in-range – applies to elements with range limitations, where the value is within those limitations.  Applies, for example, to number and range input types with min and max attributes.
: out-of-range – the opposite of :in-range: elements whose value is outside the limitations of their range.
:required – applies to form controls that have the required attribute set.
: optional – applies to all form controls that do not have the required attribute.
:read-only – applies to elements whose contents are unable to be altered by the user.  This is usually most elements other than form fields.
:read-write – applies to elements whose contents are user-alterable, such as text input fields.

Browsers that support form control attributes like required and pattern also support the associated :valid and :invalid pseudo-classes.

IE6 fails to understand :hover on elements other than links, and neither IE6 nor IE7 understand :focus.  IE8 and earlier lack support for :checked, :enabled, :disabled and :target.  However, IE9 does support these selectors.
JavaScript libraries such as jQuery can help in targeting these pseudo-classes in nonsupporting browsers.
   See my article about the JavaScript shim.

Relational Selectors

Relational selectors target elements based on their relationship to another element within the markup.  All are supported in IE7+, Firefox, Opera and WebKit:

Descendant (E F)

The descendant selector targets any element F that is a descendant (child, grandchild, great grandchild, and so on) of an element E.  For example, ol li targets li elements that are inside ordered lists.  This would include li elements in a ul that’s nested in an ol – which might not be what you want.

Child (E > F)

This selector matches any element F that is a direct child of element E – any further nested elements will be ignored.  The ol > li would only target li elements directly inside the ol, and would omit those nested inside a ul.

Adjacent Sibling (E + F)

This will match any element F that shares the same parent as E, and comes directly after E in the markup.  For example, li + li will target all li elements except the first li in a given container.

General Sibling (E + F)

This one is tricky. It will match any element F that shares the same parent as any E and comes after it in the markup. So, h1-h2 will match any h2 that follows an h1, as long as they both share the same direct parent – that is, as long as the h2 is not nested in any other element.

Here is an example:

<article>
<header>
<h1>Main Title</h1>
<h2>This subtitle is matched</h2>
</header>
<p>blah, blah, blah…</p>
<h2>This is not matched by h1-h2, but is by header h2</h2>
<p>blah, blah, blah…</p>
</article>

The selector string h1-h2 will match the first h2, because they’re both children, or direct descendants, of the header. The second h2 doesn’t match, since its parent is article, not header. It would, however, match header h2. Similarly, h2-p only matches the last paragraph, since the first paragraph precedes the h2 with which it shares the parent article.

There aren’t any parent or ancestor selectors.  If the browser had to go backwards up the DOM tree, or recurse into sets of nested elements before deciding whether or not to apply a style, rendering would be exponentially slower and more demanding in terms of processing.

Another example would be if you wanted a three column layout for the site, and you want the three columns divs to be floated left (normal).  To avoid this style being applied to any other divs nested inside the main div, we use the child selector.  This is a basic form structure that you will be using:

#main > div {
float: left;
overflow: hidden;
}

Structural Pseudo-classes

The nth-* Pseudo-Class – Four of the new pseudo-classes are based on a count value used to find an element’s position in the document tree, and you use the syntax nth-*.  The asterisk is in place of a number of different values, each of which we will cover.  It is quite straightforward.  By default, n represents a number that begins at 0 and increments by 1 (1, 2, 3, etc.).  Another integer can be passed into it as a multiplier.  For example, 2n is every multiple of 2 (2, 4, 5, etc.), 3n is every multiple of 3 (3, 6, 9, etc.), and so on:

E:nth-*(n) {}   **Default value n, so all elements are selected**
E:nth-*(2n) {}
E:nth-*(3n) {}
The first example uses the default value n, so all elements of type E would be selected – the same thing as using a simple element selector.  The next example selects every other E element.

You may also use the mathematical operators for plus (+) and minus (-).  So 2n+1 would be every multiple of two plus one (1, 3, 5, etc.), 3n-1 would be every multiple of three minus one (2, 5, 8, etc.):

E:nth-*(n+1) {}   **selects every element except for the first instance, so 2, 3, 4, 5, etc.**
E:nth-*(2n+1) {}
E:nth-*(3n-1) {}

So now that we know how to target elements based on their attributes and states, we can also use CSS3 to target elements based simply on their location in the markup.  These selectors are grouped under the heading structural pseudo-classes.  

These might seem complicated, but they will make sense when you go to use them.  These selectors are supported in IE9, as well as current and older versions of all the other browsers – but not in IE8 and below.

You write the position number of the element you want to select inside the parenthesis (the argument), such as li:nth-child(5).  This selector would match the fifth li element in a list.  It gets powerful when you use a formula as its argument, allowing you to create more complex alternating patterns or even select specific blocks of sequential children at at time.  n is a counter starting at zero, and b is an offset value that you pick.  Example:

li:nth-child(3n+1)
Since n starts at zero and then increases by one each cycle, this selector would match:
(3 x 0) + 1 = 1 = 1st list item
(3 x 1) + 1 = 4 = 4th list item
(3 x 2) + 1 = 7 = 7th list item, etc….

You could add classes to the first, fourth and seventh item, but this is easier to write, and easier to maintain.  If you ever wanted to add another list item, you would have to re-class all the list items from that point forward because their position number has changed.  Using the :nth-child() pseudo-class, that keeps track of the position number for you is more efficient and mistake-proof.

Don’t let the math scare you off from using the :nth-child().  Play around with it and see how it affects your styles.  You can check out http://www.leaverou.me/demos/nth.html to try this tool to play around with the :nth-child(), :nth-last-child(), :nth-of-type(), and :nth-last-of-type().

Here is another example, which will produce an alternating color variation within a list:
li:nth-child(even) {
background-color: hsla(210, 70%,82%,.5);
}
This will create a blue background to every other list item.  Cool!
I quickly found out that to write about all things new in CSS3 would require writing a book.  I’ve just touched upon a few things that you will need to get started with CSS3.

Here are some more things to chew on for a while:

:root – the root element, which is always the html element.
E F:nth child(n) – the element F that is the nth child of its parent E.
E F:nth-last-child(n)  – the element F that is the nth child of its parent E, counting backwards from the last one.  li:nth-last-child(1) would match the last item in any list – this is the same as li:last-child (see below).
E:nth-of-type(n) – the element that is the nth element of its type in a given parent element.
E:nth-last-of-type(n) – like nth-of-type(n), except counting backwards from the last element in a parent.
E:first-child – the element E that is the first child E of its parent.  It is the same as :nth-child.
E:last-child – the element E that is the last child E of its parent, same as :nth-last-child(1).
E:first-of-type – same as :nth-of-type(1).
E:last-of-type – same as :nth-last-of-type(1).
E: only-child – an element that’s the only child of its parent.
E:only-of-type – an element that’s the only one of its type inside its parent element.
E:empty – an element that has no children; this includes text nodes, so <p>hello</p> will not be matched.
E:lang(en) – an element in the language denoted by the two-letter abbreviation (en).
E:not(exception) – this is a particularly useful one:  it will select elements that don’t match the selector in the parentheses.

Selectors with the :not pseudo-class match everything to the left of the colon, and then exclude from that matched group the elements that also match what’s to the right of the colon.  The left-hand side matching goes first.  For example, p:not(.copyright) will match all the paragraphs in a document first, and then exclude all the paragraphs from the set that also have the class of copyright.  You can string several :not pseudo-classes together. h2:not(header > h2):not(.logo) will match all h2s on a page except those that are in a header and those that have a class of logo.

I referenced three books and the W3C website.  I hope if you are reading this, that you learn something.  I know I did, but there is more…..

Gastston, Peter. *The Books of CSS3*. San Francisco: no starch press 2011.
Goldstein, Alex; Lazaris, Louis; Weyl, Estelle. *HTML5 & CSS3 for the Real World*. Australia: Sitepoint.
Gillenwater, Zoe Mickley. *Stunning CSS3*. Berkeley: New Riders.

How can you keep your clients happy?

524755_4649866659031_810800089_nUnderstanding what it is that your client is trying to portray is the first step in designing a website.  It is the same thing when you are on a photo shoot.  Once you understand your client, then you can move into his/her space and work toward giving them a product that is even better than they imagined.

Find out whose opinion matters and try to find out what they envision.  Work with them to prototype the look and feel with colors and font.  Let your client see how much work goes into this step of the design process.  It can be a time consuming task.  Imagery is as important as everything else you do.  Do they have images already or do you need to set up a photo shoot?  Let them in on the process and tell them what you need from them.  What do they dislike?  Find out their personal preferences.

Your clients should tell you about their competition, their business, and the future of their brand.

Stay in touch with your client throughout the process and let them know if your schedule includes a vacation which might make it hard for them to get in touch with you.  Let them know where you are at.  Be approachable and always be at ease.

Try meeting your clients at a relaxing location where you might enjoy having some coffee over your design discussions.

People remember when they felt comfortable with someone and they also remember when they weren’t too impressed.

Always be upbeat, even when you have to say “no”.  Explain why something you know won’t work and offer an alternative idea.  You will have to gauge each client and try to do the best you can.  Things like time limitations and difficult personalities are just part of the real world.  You have to deal with these things no matter what you do, and thank goodness most times it’s a really, really fun process.   Again, be upbeat even in the face of adversity – why not?  There will always be more happy clients.

I am always extremely happy to be challenged with a new project and I hope that my client picks up on that.   Together, we can make something awesome, modern, responsive and web 2.0.

Google Analytics and Developer Tools

Google Analytics 

Google Analytics account management is a highly flexible system that you can use to track multiple web properties and to set up reporting access for a variety of users. Google makes it easy to understand how the basic Analytics accounts and profiles work.  Anyone with a website should sign up to see their website’s statistics.

Using the Google Web Developer Tools to extend Google Analytics

Web Developers have the ability to help their clients extend the functionality of the Google Analytics service from customizing data collection for web and mobile devices. The ability to access Analytics and automate reporting data and even build your own Analytics solutions is amazing. The Google Analytics developer platform provides access to the resources used to collect, configure, and report on user-interactions.

The Core Reporting API can query for dimensions and metrics, which can be used to produce customized reports. This API allows you to build custom dashboards to display Google Analytics data and can automate reporting.There are 3 fundamental concepts underlying the Core Reporting API:
1. How reports relate to users and profiles.
2. The structure of a report and how to build queries.
3. Working with the API response.

Metrics are the individual measurements of visitor activity on your site, such as visits and page views. Dimensions break down metrics across some common criteria such as country or browser. You can customize which metrics you want in your report data.

Writing an application that accesses Google Analytics data is a complex process. It requires the use of various APIs and an understanding of key concepts and certain programming languages. A basic overview is as follows:

•Authenticate and Authorize a user
•Create an Analytics Service Object
•Query the Core Reporting API and Management API
•Handle API responses
•Output results

Loading the Analytics client is an important step and is required to query the Analytics APIs. Google takes you through the process with a very easy tutorial and even gives you a breakdown of how to do this. You even have a choice of using Java, Python, PHP or JavaScript languages.

Once you’ve registered a project in the Google APIs console, authorized access to Google Analytics Data and created an Analytic Service Object, you can use the Analytics Service Object to query the Google Analytics APIS.

Query the Management API, Core Reporting API, and Output the Results

Now we can use the Analytics Service Object to query the Management API to retrieve the first Profile ID, and then query the Core Reporting API with the profile ID to retrieve the total number of visits for a specific date. The responses for each query will need to be handled, and the results outputted to the user.

The data returned from the API can be thought of as a table with a header and a list of rows. Each API response consists of a header that describes the name and data type of each column. The response also contains a list of rows, where each row is a list of cells with data in the same order as the headers.

Google Analytics is used by individuals, small businesses, and large corporations to track millions of websites. The program provides opportunities for you to reach this audience and make a big impact because businesses can target customized campaigns whether you use the basic Analytics or the Developer Tools.