SlideShare a Scribd company logo
TRENDSETTING:
Web Design and Beyond




      Andy Stratton ��� http://theandystratton.com
How do we define web design?

• “...the way content is delivered to an end-user
  through the World Wide Web, using a web
  browser
  or other web-enabled software...”
  — from Wikipedia.org


• Design as a solution for content delivery
• More than browser: mobile, tablet, search
  engine, etc.
Where we’ve been...

• Visual movements toward better usability and
   outstanding user experience
   (Fitt’s law, Hick’s law, return to true design principles)


• Subtle design details that make a big
   difference
   (softer gradients, white space, grid systems & frameworks)


• Hacks to replacement, JSgap from printPNG
  (font image
              bridge the
                           rounded corners,
                                            design
   transparency)
Where we’Re going...

• Web Fonts no more image replacement, part of CSS3)
  (embed real fonts,

• CSS3 borders, box and text shadows, and much more!)
  (rounded

• HTML5
  (better semantics, geolocation, better video support, drag
   and drop
   and much more!)

• Better Devicedesign, mobile, touch, etc.)
  (responsive web
                  Support

Recommended for you

Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass

The document discusses authoring stylesheets using Sass and Compass. It provides an overview of Sass features like variables, nested rules, mixins, and more. It also discusses how Compass can be used to simplify CSS development with features like a project context, libraries, and asset management. The presentation aims to teach attendees the Sass syntax and how to set up and use Compass projects.

compass sass csssummit css stylesheets web softwar
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3

This presentation is target for developers that are new to CSS3, and would like to know what CSS3 they need to understand for Windows 8 development.

codecss3demo
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready

CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.

responsive designcss3 toolsmedia queries
Web Fonts

• Hell,hear it in the crowd if you’ve had to deal with sIFR,
  (let’s
         yeah.
   Cúfon or image replacement techniques)


• Use CSS3 toType (.otf),REAL fonts in your site
  Includes: Open
                 embed
                         TrueType (.ttf), Embedded
   OpenType (.eot), Scalable Vector Graphics (.svg), Web Open
   Font Format (.woff)


• Simple to use, many services hosting popular
   fonts
Web Fonts - How It Works
Web Fonts - Sample CSS




                         +
Benefits of Web Fonts

• Less overhead resource heavy hacks like sIFR, Cúfon,
  (eliminates need for
   font image replacement)


• Better User-Experience & paste, find, etc.)
  (still allows resize, select, copy


• Gracefully with pure CSS, will use fallback fonts as
  (can be done
               Degrades
   needed)

Recommended for you

10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)

Presentation for Webuquerque's November 2, 2011 event. Practical examples of some of the latest CSS 3 techniques (and a few often-forgotten CSS 2.1 ones) including: image-free gradients and text shadows, attribute selectors, transitions and transforms, and media queries

csscss3webuquerque
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3

Don't be fooled, CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now.

pariswebresponsive designcss3 tools
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements

Mario Hernandez presented on CSS frameworks and progressive enhancements with CSS3. The presentation covered choosing the right CSS framework based on factors like project requirements, fluid grid systems, responsiveness, documentation, and maintenance. Frameworks like Foundation and 960 Grid System were showcased. Grid systems use rows and columns to layout content. Progressive enhancements with CSS3 focus on widely supported properties to enhance the user experience without sacrificing functionality. Additional resources on grids, CSS3, and responsive design were provided.

frameworkscsscss3
Web Font Caveats

• Font Licensing licensing, must check specific font)
  (all fonts have different


• Screen Rendering
  (different operating systems
   and browsers may render
   fonts differently)


• Hosted Font Implementation
  (sometimes require Javascript, can be
   slow/unreliable at times)
Web Fonts - Resources

• How to/Info Posts
  http://nicewebtype.com/notes/2009/10/30/how-to-use-
   css-font-face/

   http://snook.ca/archives/html_and_css/becoming-a-font-
   embedding-master

   http://sixrevisions.com/css/font-face-guide/

• Font Conversion
  http://snook.ca/archives/html_and_css/screencast-
   converting-ttf2eot

   http://www.fontsquirrel.com/fontface/generator
Web Fonts - Resources

• Free Font Directories
  http://www.fontsquirrel.com/

   http://www.google.com/webfonts

   http://theleagueofmoveabletype.com/

• Paid Font Directories
  http://typekit.com/

   http://webfonts.fonts.com/

   http://webink.com/

   http://fontdeck.com/
Web Fonts - Who’s Using?


                 Jonathan Snook
                 web designer, developer,
                 speaker & author




                 Matt Mullenweg
                 WordPress founding developer
                 Founder/CEO of Automattic

Recommended for you

Web design training , Web Design Training In Kolkata
Web design training , Web Design Training In KolkataWeb design training , Web Design Training In Kolkata
Web design training , Web Design Training In Kolkata

W3webschool trusted and best Digital Marketing Training,Web Design Training,SEO Training,Php Training center Kolkata,India. https://www.w3webschool.com/web-design/

web design trainingweb design training kolkataweb design training india
Compass/Sass
Compass/SassCompass/Sass
Compass/Sass

Compass is a CSS authoring framework that uses Sass, a CSS extension language. It allows for variables, mixins, imports and other features that make CSS cleaner, easier to maintain and more powerful. Compass comes with a library of CSS3 mixins and can be extended with custom functions. Using Compass and Sass avoids copying the same CSS code across projects and ensures styles are up to date for new browsers through recompiling. It improves the development workflow over manually writing cross-browser CSS.

compasscsssass
3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.
3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.
3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.

The document presents editable 3D cube diagrams for use in PowerPoint presentations. It provides instructions for customizing the cubes by changing text, colors, sizes, and orientations. The cubes and editing instructions are intended to help users bring their presentations to life and capture audience attention.

CSS3

• Border Radius (and BorderCSS)
  (that’s right: rounded rectangles via
                                        Image)


• Shadows (boxes and text) without images)
  (duplicate your drop-shadow effects


• RGBA Transparency, Gradients, Multiple
   BG’s
   (better transparency support, native gradient, multiple
   background images and much more)
CSS3 - Border Radius
• border-radius property
• Set a radius value for all (or any single)
   border
 top left                              top right

bottom left                          bottom right




• Emulates the rounded rectangle
   appearance

• Browser support limited to vendor prefixes
                                                    +
CSS3 - Border Image

• Set an image instead of color for a border
• Uses an image “sprite” of sorts




                           Old School Slicing
CSS3 - Border Image

• Set an image instead of color for a border
• Uses an image “sprite” of sorts

            Repeating background
              on content <div>




                                   Old School Slicing

Recommended for you

Web designing syllabus
Web designing syllabusWeb designing syllabus
Web designing syllabus

This document outlines the course syllabus for an Advance Diploma in Web Development program. The program covers topics such as HTML, XHTML, CSS, PHP, MySQL, Dreamweaver, Flash, and Photoshop. It provides descriptions and time durations for subjects ranging from basic HTML tags and CSS properties to more advanced topics like PHP functions, arrays, file handling, databases, and integrating PHP with MySQL.

web designcourse contentsyllabus
Before Going Vector
Before Going VectorBefore Going Vector
Before Going Vector

This document provides an overview of vectors and SVG, discussing their benefits over raster images in terms of scalability, file size and expressiveness. It outlines different ways vectors and SVG can be used in browsers and with tools like Illustrator, and provides tips on optimizing and integrating SVG files. The document concludes that SVG is now the best format for drawing vectors in browsers and encourages readers to start using vectors.

web designsvgadobe
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design

A hands-on introduction to Responsive Web Design presented by Mario Hernandez at Socal CodeCamp 2012, San Diego .Net User Group 2013, San Diego SoCal CodeCamp 2013 at UCSD & SoCal CodeCamp 2013 at USC, Online Webinars throughout 2014.

media queriesgridscss3
CSS3 - Border Image

• Set an image instead of color for a border
• Uses an image “sprite” of sorts
           Wrapping <div> for top


            Repeating background
              on content <div>




                                   Old School Slicing
CSS3 - Border Image

• Set an image instead of color for a border
• Uses an image “sprite” of sorts
           Wrapping <div> for top


            Repeating background
              on content <div>


                Wrapping <div>
                  for bottom

                                   Old School Slicing
CSS3 - Border Image
border-image: url(“border-img.png”) 43 30 30 48 repeat;


• Uses values to slice pieces of this image to
  create the length, height & corners of the
  border of the element
CSS3 - Border Image
border-image: url(“border-img.png”) 43 30 30 48 repeat;


• Uses values to slice pieces of this image to
  create the length, height & corners of the
  border of the element

Recommended for you

CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?

Modernizr is a JavaScript library that detects which CSS and HTML5 features are supported by the user's browser. It allows for progressive enhancement by applying features when supported and providing alternatives when not. This helps websites work on a wide range of browsers while still taking advantage of newer features for supported browsers.

browserscodingcss
Psd 2 Drupal
Psd 2 DrupalPsd 2 Drupal
Psd 2 Drupal

The document discusses various tools and techniques for creating Drupal themes from Photoshop designs, including Firefox extensions like Firebug and YSlow for debugging and performance analysis, overlay tools like MeasureIt and GridFox, and desktop apps like Skitch and OmniGraffle. It also covers useful Drupal modules like Theme Developer and Skinr, as well as CSS techniques like sprites and image replacement.

drupald4dtheming
Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile

HTML5, CSS3, and performance factors, and how to develop mobile applications using PhoneGap3.0 for mobile devices, including Google Glass.

html5canvassvg
CSS3 - Border Image
border-image: url(“border-img.png”) 43 30 30 48 repeat;



     43 pixels




    30 pixels


                      48 pixels         30 pixels



                                                          +
CSS3 - Border Image

• More examples and resources on border-
  image

 •   http://articles.sitepoint.com/article/css3-border-
     images

 •   http://sitepoint-examples.s3.amazonaws.com/css3-
     border-image/demos.html

 •   http://css-tricks.com/understanding-border-image/

 •   http://www.norabrowndesign.com/css-experiments/
     border-image-anim.html
                        These are also some resources I
                        used when developing this
                        presentation ;]
CSS3 - Shadows

• Drop Your Shadowsdrop-shadows withHot
  (Duplicate your Photoshop
                            Like They’re
                                         CSS!)



• box-shadow gives block-level elements
   shadows


• text-shadow gives selectable text shadows
   and definition
CSS3 - Box Shadow

box-shadow: 5px 8px 10px #FFFF00;

  x-offset (from left)
                         y-offset (from top)   blur radius shadow color




                           My Box

Recommended for you

BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12

Berkeley Drupal Users Group (BDUG) Slides from 7/23/12 presentation on Responsive Web Theming with Zen 5, Sass, and Compass

Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass

My presentation at SourceDevCon. There's a lot more you can do with Sass/Compass than just parameterize CSS.

compasssasscss
CSM Module 3: Corporate blogging
CSM Module 3: Corporate bloggingCSM Module 3: Corporate blogging
CSM Module 3: Corporate blogging

The document discusses corporate blogging and lessons learned from incidents where companies were criticized online. It provides tips for effective blogging, including the need to regularly update blogs, track metrics, promote blogs, and link to related content. Examples are given of companies that successfully used blogging to humanize their brand and promote products. Guidelines are offered for getting started with blogging using WordPress.

corporate bloggingsocial media
CSS3 - Box Shadows

• Vendor prefixes required (currently)
  -moz-box-shadow, -webkit-box-shadow



• inset keyword allows inner shadow
 •   box-shadow: inset 2px 2px 10px #f00;



• Can do multiple shadows on one element
  by separating declarations with comma




                                            +
CSS3 - Text Shadow

• Similar syntax to box-shadow
• Often used to accent text, increase
  readability
  text-shadow: 1px 1px 1px #fff;


                                                color
   x-offset (left)                    blur radius
                     y-offset (top)




                                                        +
CSS3 - RGB(a)

• RGB with alpha transparency
  /* 50% opacity, white */
  rgba( 255, 255, 255, 1 );

• Allows true alpha transparency when
  setting colors


• Useful for layering elements that should
  overlap transparently while containing fully
  opaque items


                                                 +
Further CSS3 Resources

•   http://thinkvitamin.com/code/30-essential-css3-
    resources/

•   http://www.css3.info/

•   http://www.w3schools.com




                                                      +

Recommended for you

01.Key trends in social media
01.Key trends in social media01.Key trends in social media
01.Key trends in social media

The document discusses key concepts in social media marketing. It outlines 4 learning objectives focused on understanding social media tools and strategies. It then covers trends in social media like the rise of mobile and visual content. The document emphasizes listening to customers, connecting through conversations, adding value, and measuring engagement and impact. It argues that ignoring social media can negatively impact brands by missing customer feedback, ceding ground to competitors, and losing credibility during crises.

social media roisocial media planningsocial media marketing
CSM Module 6: Crisis communications
CSM Module 6: Crisis communicationsCSM Module 6: Crisis communications
CSM Module 6: Crisis communications

1. Dell responded quickly to the laptop battery crisis, notifying customers of the recall and setting up a website for safe replacements. 2. It worked with safety authorities to monitor the situation and assured customers of the products' safety to maintain trust. 3. Sony took longer to acknowledge the problem and execute a large global recall, hurting its reputation and profits in the process.

crisis communicationssocial media
03.Advance search
03.Advance search03.Advance search
03.Advance search

This document provides tips and strategies for using Google tools like Google Alerts, RSS feeds, and dashboards to monitor brands and stay up-to-date on relevant information from websites, blogs, and news sources. It discusses how to set up Google Alerts and RSS feeds to track keywords, competitors, and industry news. It also gives examples of using RSS feeds to monitor specific company websites and blogs for press releases or updates.

searc
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
HTML .......

•   Super simple DOCTYPE

    •   From:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN" "http://www.w3.org/TR/xhtml1/
        DTD/xhtml1-transitional.dtd">

    •   To:
        <!DOCTYPE html>

•   More semantic elements

    <header> <footer> <section> <aside> <video>


•   Widely accepted by newer mobile & tablet devices

                                                          +
HTML .......

• Support built-in for:
 • native video (no flash)
 • geolocation
 • offline storage
 • drag and drop files (like Gmail’s new
    feature)
 • canvas (SVG)
 • enhanced form input elements and
    attributes:
    • text, search, url, tel,week, time,
      datetime, date, month,
                              email,
      number, range, etc.

    • attributes like autofocus and        +

Recommended for you

02.Twitter
02.Twitter02.Twitter
02.Twitter

The document provides an overview of how Twitter can be used both internally and externally by companies and organizations. It discusses how immediacy, velocity, and other characteristics of social media allow Twitter to engage audiences and provide instant feedback. Examples are given of how public relations, customer service, and other functions make use of Twitter. Best practices from social media professionals are also highlighted.

twitter tips
SharePoint 2010 for Business
SharePoint 2010 for BusinessSharePoint 2010 for Business
SharePoint 2010 for Business

An overview of the business decision maker's areas to consider for upgrading or installing SharePoint 2010.

sbtugkathy hughessharepoint
Ways To Be Healthier - Heart
Ways To Be Healthier - HeartWays To Be Healthier - Heart
Ways To Be Healthier - Heart

Meditation, drinking pomegranate juice, and having loving relationships can help lower blood pressure and reduce heart disease risk. Eating soy foods five times a week and getting a pet can also help reduce cholesterol and blood pressure. Getting a flu shot and taking the stairs instead of the elevator have been shown to decrease heart disease hospitalizations and improve cardiovascular health.

HTML       ..... Resources

• http://www.apple.com/html5/
• http://diveintohtml5.org/
• http://html5boilerplate.com/
• http://www.modernizr.com/
• http://sixrevisions.com/html/the-only-
  html5-resources-you-need-for-getting-up-
  to-speed/




                                             +
Responsive Web Design

• How your web design responds to the
  medium (or device) in which it is being viewed


• One site for all (or many) mediums/users
• http://www.alistapart.com/articles/
  responsive-web-design/


• http://www.alistapart.com/d/responsive-
  web-design/ex/ex-site-���exible.html
Get Trendy

• CSS3 changes the typography game with
  @font-face


• Properties like shadows, border-radius and
  gradients help us duplicate Photoshop
  effects that used to require images


• Enhanced alpha transparency support can
  create some interesting effects
Get Trendier

• HTML5 improves semantics and adds some
  nifty UI elements that used to require
  Javascript


• Geolocation support is a nice capability to
  keep in mind when designing user-
  experiences



• Enhanced alpha transparency support can
  create some interesting effects

Recommended for you

CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design

Talk given at DevCon 5 in Santa Clara: The power of the web has arrived for mobile phones and tablets. CSS3 gives web sites a dynamic, interactive capability and greater useability. CSS3 adds fine grained controls for designers looking to bring the web closer to reality.

css3animationjavascript
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final

1. HTML5 is a major revision to the HTML standard that is still under development and aims to be the future of the web. 2. It includes new elements like <video>, <audio>, and <canvas> that allow embedding multimedia without plugins, as well as features like geolocation. 3. The HTML5 specification is very large, covering HTML, SVG, CSS, and APIs. It aims to provide a common standard for web applications. 4. HTML5 is not just a marketing term - it represents an ongoing effort to develop a unified standard for the next generation of the web.

html html5 w3c
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentation

This document discusses responsive web design trends for 2012, including responsive design which allows websites to automatically resize content to fit any screen resolution from mobile to desktop. It highlights that 15% of users now browse on mobile and responsive design improves the user experience and conversion rates. CSS3 features like media queries, fonts, borders, shadows and images are also covered to create impactful designs.

You Trendsetter, You.

• Designing for both desktop and mobile is
  becoming a bigger need as mobile browsing
  is growing fast


• Responsive web design uses existing
  technologies to allow your design to respond
  to what is being used to view it


• Tools like modernizr.js and HTML5 boilerplate
  can help enhance older browsers to support
  early adoption of these technologies
Thanks.
Oh, yeah... Questions? Comments? Donations?

More Related Content

What's hot

Css 3
Css 3Css 3
Css 3
poollar
 
Css3
Css3Css3
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
chriseppstein
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
Denise Jacobs
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)
Emily Lewis
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
Denise Jacobs
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
Mario Hernandez
 
Web design training , Web Design Training In Kolkata
Web design training , Web Design Training In KolkataWeb design training , Web Design Training In Kolkata
Web design training , Web Design Training In Kolkata
W3webschool
 
Compass/Sass
Compass/SassCompass/Sass
Compass/Sass
guest2409d3
 
3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.
3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.
3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.
SlideTeam.net
 
Web designing syllabus
Web designing syllabusWeb designing syllabus
Web designing syllabus
Pramuka Amarakeerthi
 
Before Going Vector
Before Going VectorBefore Going Vector
Before Going Vector
david deraedt
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Mario Hernandez
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
Denise Jacobs
 
Psd 2 Drupal
Psd 2 DrupalPsd 2 Drupal
Psd 2 Drupal
Nicolas Borda
 
Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
Oswald Campesato
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
ucbdrupal
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
Nick Cooley
 

What's hot (20)

Css 3
Css 3Css 3
Css 3
 
Css3
Css3Css3
Css3
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
 
Web design training , Web Design Training In Kolkata
Web design training , Web Design Training In KolkataWeb design training , Web Design Training In Kolkata
Web design training , Web Design Training In Kolkata
 
Compass/Sass
Compass/SassCompass/Sass
Compass/Sass
 
3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.
3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.
3d cubes building blocks stacked 3x3x3 powerpoint ppt slides.
 
Web designing syllabus
Web designing syllabusWeb designing syllabus
Web designing syllabus
 
Before Going Vector
Before Going VectorBefore Going Vector
Before Going Vector
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Psd 2 Drupal
Psd 2 DrupalPsd 2 Drupal
Psd 2 Drupal
 
Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 

Viewers also liked

CSM Module 3: Corporate blogging
CSM Module 3: Corporate bloggingCSM Module 3: Corporate blogging
CSM Module 3: Corporate blogging
Julian Matthews
 
01.Key trends in social media
01.Key trends in social media01.Key trends in social media
01.Key trends in social media
Julian Matthews
 
CSM Module 6: Crisis communications
CSM Module 6: Crisis communicationsCSM Module 6: Crisis communications
CSM Module 6: Crisis communications
Julian Matthews
 
03.Advance search
03.Advance search03.Advance search
03.Advance search
Julian Matthews
 
02.Twitter
02.Twitter02.Twitter
02.Twitter
Julian Matthews
 
SharePoint 2010 for Business
SharePoint 2010 for BusinessSharePoint 2010 for Business
SharePoint 2010 for Business
Craig Bailey
 
Ways To Be Healthier - Heart
Ways To Be Healthier - HeartWays To Be Healthier - Heart
Ways To Be Healthier - Heart
Meena Shah
 

Viewers also liked (7)

CSM Module 3: Corporate blogging
CSM Module 3: Corporate bloggingCSM Module 3: Corporate blogging
CSM Module 3: Corporate blogging
 
01.Key trends in social media
01.Key trends in social media01.Key trends in social media
01.Key trends in social media
 
CSM Module 6: Crisis communications
CSM Module 6: Crisis communicationsCSM Module 6: Crisis communications
CSM Module 6: Crisis communications
 
03.Advance search
03.Advance search03.Advance search
03.Advance search
 
02.Twitter
02.Twitter02.Twitter
02.Twitter
 
SharePoint 2010 for Business
SharePoint 2010 for BusinessSharePoint 2010 for Business
SharePoint 2010 for Business
 
Ways To Be Healthier - Heart
Ways To Be Healthier - HeartWays To Be Healthier - Heart
Ways To Be Healthier - Heart
 

Similar to Trendsetting: Web Design and Beyond

CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design
paultrani
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentation
Fresh_Egg
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
Vera Kovaleva
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
GaziAhsan
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
Justin Lee
 
Css3 paul trani
Css3 paul traniCss3 paul trani
Css3 paul trani
Carl Ford
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
Mediacurrent
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)
Adam Lu
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish M
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
Robyn Overstreet
 
Css3
Css3Css3
CSS
CSSCSS
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
David Wesst
 
Rockstar Graphics with HTML5
Rockstar Graphics with HTML5Rockstar Graphics with HTML5
Rockstar Graphics with HTML5
Dave Balmer
 
HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
Guillermo Paz
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
Chris Mills
 

Similar to Trendsetting: Web Design and Beyond (20)

CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentation
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
 
Css3 paul trani
Css3 paul traniCss3 paul trani
Css3 paul trani
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
Css3
Css3Css3
Css3
 
CSS
CSSCSS
CSS
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
 
Rockstar Graphics with HTML5
Rockstar Graphics with HTML5Rockstar Graphics with HTML5
Rockstar Graphics with HTML5
 
HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 

More from Andy Stratton

Advanced Custom Post Types
Advanced Custom Post TypesAdvanced Custom Post Types
Advanced Custom Post Types
Andy Stratton
 
50 Shades of WordPress
50 Shades of WordPress50 Shades of WordPress
50 Shades of WordPress
Andy Stratton
 
We Are WordPress
We Are WordPressWe Are WordPress
We Are WordPress
Andy Stratton
 
Everything is Relative: Frameworks, Plugins & SEO
Everything is Relative: Frameworks, Plugins & SEOEverything is Relative: Frameworks, Plugins & SEO
Everything is Relative: Frameworks, Plugins & SEO
Andy Stratton
 
Accomplish It With Core: Sliders Galleries + More
Accomplish It With Core: Sliders Galleries + MoreAccomplish It With Core: Sliders Galleries + More
Accomplish It With Core: Sliders Galleries + More
Andy Stratton
 
Let's Build a Custom Theme
Let's Build a Custom ThemeLet's Build a Custom Theme
Let's Build a Custom Theme
Andy Stratton
 
Accomplish It With Core: Sliders, Galleries and More
Accomplish It With Core: Sliders, Galleries and MoreAccomplish It With Core: Sliders, Galleries and More
Accomplish It With Core: Sliders, Galleries and More
Andy Stratton
 
How To Write a WordPress Plugin
How To Write a WordPress PluginHow To Write a WordPress Plugin
How To Write a WordPress Plugin
Andy Stratton
 
Diet Pills, SEO & Theme Frameworks: There are no magic bullets.
Diet Pills, SEO & Theme Frameworks: There are no magic bullets.Diet Pills, SEO & Theme Frameworks: There are no magic bullets.
Diet Pills, SEO & Theme Frameworks: There are no magic bullets.
Andy Stratton
 
WordPress - Open Source Overview Presentation
WordPress - Open Source Overview PresentationWordPress - Open Source Overview Presentation
WordPress - Open Source Overview Presentation
Andy Stratton
 

More from Andy Stratton (10)

Advanced Custom Post Types
Advanced Custom Post TypesAdvanced Custom Post Types
Advanced Custom Post Types
 
50 Shades of WordPress
50 Shades of WordPress50 Shades of WordPress
50 Shades of WordPress
 
We Are WordPress
We Are WordPressWe Are WordPress
We Are WordPress
 
Everything is Relative: Frameworks, Plugins & SEO
Everything is Relative: Frameworks, Plugins & SEOEverything is Relative: Frameworks, Plugins & SEO
Everything is Relative: Frameworks, Plugins & SEO
 
Accomplish It With Core: Sliders Galleries + More
Accomplish It With Core: Sliders Galleries + MoreAccomplish It With Core: Sliders Galleries + More
Accomplish It With Core: Sliders Galleries + More
 
Let's Build a Custom Theme
Let's Build a Custom ThemeLet's Build a Custom Theme
Let's Build a Custom Theme
 
Accomplish It With Core: Sliders, Galleries and More
Accomplish It With Core: Sliders, Galleries and MoreAccomplish It With Core: Sliders, Galleries and More
Accomplish It With Core: Sliders, Galleries and More
 
How To Write a WordPress Plugin
How To Write a WordPress PluginHow To Write a WordPress Plugin
How To Write a WordPress Plugin
 
Diet Pills, SEO & Theme Frameworks: There are no magic bullets.
Diet Pills, SEO & Theme Frameworks: There are no magic bullets.Diet Pills, SEO & Theme Frameworks: There are no magic bullets.
Diet Pills, SEO & Theme Frameworks: There are no magic bullets.
 
WordPress - Open Source Overview Presentation
WordPress - Open Source Overview PresentationWordPress - Open Source Overview Presentation
WordPress - Open Source Overview Presentation
 

Recently uploaded

The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 

Recently uploaded (20)

The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 

Trendsetting: Web Design and Beyond

  • 1. TRENDSETTING: Web Design and Beyond Andy Stratton • http://theandystratton.com
  • 2. How do we define web design? • “...the way content is delivered to an end-user through the World Wide Web, using a web browser or other web-enabled software...” — from Wikipedia.org • Design as a solution for content delivery • More than browser: mobile, tablet, search engine, etc.
  • 3. Where we’ve been... • Visual movements toward better usability and outstanding user experience (Fitt’s law, Hick’s law, return to true design principles) • Subtle design details that make a big difference (softer gradients, white space, grid systems & frameworks) • Hacks to replacement, JSgap from printPNG (font image bridge the rounded corners, design transparency)
  • 4. Where we’Re going... • Web Fonts no more image replacement, part of CSS3) (embed real fonts, • CSS3 borders, box and text shadows, and much more!) (rounded • HTML5 (better semantics, geolocation, better video support, drag and drop and much more!) • Better Devicedesign, mobile, touch, etc.) (responsive web Support
  • 5. Web Fonts • Hell,hear it in the crowd if you’ve had to deal with sIFR, (let’s yeah. Cúfon or image replacement techniques) • Use CSS3 toType (.otf),REAL fonts in your site Includes: Open embed TrueType (.ttf), Embedded OpenType (.eot), Scalable Vector Graphics (.svg), Web Open Font Format (.woff) • Simple to use, many services hosting popular fonts
  • 6. Web Fonts - How It Works
  • 7. Web Fonts - Sample CSS +
  • 8. Benefits of Web Fonts • Less overhead resource heavy hacks like sIFR, Cúfon, (eliminates need for font image replacement) • Better User-Experience & paste, find, etc.) (still allows resize, select, copy • Gracefully with pure CSS, will use fallback fonts as (can be done Degrades needed)
  • 9. Web Font Caveats • Font Licensing licensing, must check specific font) (all fonts have different • Screen Rendering (different operating systems and browsers may render fonts differently) • Hosted Font Implementation (sometimes require Javascript, can be slow/unreliable at times)
  • 10. Web Fonts - Resources • How to/Info Posts http://nicewebtype.com/notes/2009/10/30/how-to-use- css-font-face/ http://snook.ca/archives/html_and_css/becoming-a-font- embedding-master http://sixrevisions.com/css/font-face-guide/ • Font Conversion http://snook.ca/archives/html_and_css/screencast- converting-ttf2eot http://www.fontsquirrel.com/fontface/generator
  • 11. Web Fonts - Resources • Free Font Directories http://www.fontsquirrel.com/ http://www.google.com/webfonts http://theleagueofmoveabletype.com/ • Paid Font Directories http://typekit.com/ http://webfonts.fonts.com/ http://webink.com/ http://fontdeck.com/
  • 12. Web Fonts - Who’s Using? Jonathan Snook web designer, developer, speaker & author Matt Mullenweg WordPress founding developer Founder/CEO of Automattic
  • 13. CSS3 • Border Radius (and BorderCSS) (that’s right: rounded rectangles via Image) • Shadows (boxes and text) without images) (duplicate your drop-shadow effects • RGBA Transparency, Gradients, Multiple BG’s (better transparency support, native gradient, multiple background images and much more)
  • 14. CSS3 - Border Radius • border-radius property • Set a radius value for all (or any single) border top left top right bottom left bottom right • Emulates the rounded rectangle appearance • Browser support limited to vendor prefixes +
  • 15. CSS3 - Border Image • Set an image instead of color for a border • Uses an image “sprite” of sorts Old School Slicing
  • 16. CSS3 - Border Image • Set an image instead of color for a border • Uses an image “sprite” of sorts Repeating background on content <div> Old School Slicing
  • 17. CSS3 - Border Image • Set an image instead of color for a border • Uses an image “sprite” of sorts Wrapping <div> for top Repeating background on content <div> Old School Slicing
  • 18. CSS3 - Border Image • Set an image instead of color for a border • Uses an image “sprite” of sorts Wrapping <div> for top Repeating background on content <div> Wrapping <div> for bottom Old School Slicing
  • 19. CSS3 - Border Image border-image: url(“border-img.png”) 43 30 30 48 repeat; • Uses values to slice pieces of this image to create the length, height & corners of the border of the element
  • 20. CSS3 - Border Image border-image: url(“border-img.png”) 43 30 30 48 repeat; • Uses values to slice pieces of this image to create the length, height & corners of the border of the element
  • 21. CSS3 - Border Image border-image: url(“border-img.png”) 43 30 30 48 repeat; 43 pixels 30 pixels 48 pixels 30 pixels +
  • 22. CSS3 - Border Image • More examples and resources on border- image • http://articles.sitepoint.com/article/css3-border- images • http://sitepoint-examples.s3.amazonaws.com/css3- border-image/demos.html • http://css-tricks.com/understanding-border-image/ • http://www.norabrowndesign.com/css-experiments/ border-image-anim.html These are also some resources I used when developing this presentation ;]
  • 23. CSS3 - Shadows • Drop Your Shadowsdrop-shadows withHot (Duplicate your Photoshop Like They’re CSS!) • box-shadow gives block-level elements shadows • text-shadow gives selectable text shadows and definition
  • 24. CSS3 - Box Shadow box-shadow: 5px 8px 10px #FFFF00; x-offset (from left) y-offset (from top) blur radius shadow color My Box
  • 25. CSS3 - Box Shadows • Vendor prefixes required (currently) -moz-box-shadow, -webkit-box-shadow • inset keyword allows inner shadow • box-shadow: inset 2px 2px 10px #f00; • Can do multiple shadows on one element by separating declarations with comma +
  • 26. CSS3 - Text Shadow • Similar syntax to box-shadow • Often used to accent text, increase readability text-shadow: 1px 1px 1px #fff; color x-offset (left) blur radius y-offset (top) +
  • 27. CSS3 - RGB(a) • RGB with alpha transparency /* 50% opacity, white */ rgba( 255, 255, 255, 1 ); • Allows true alpha transparency when setting colors • Useful for layering elements that should overlap transparently while containing fully opaque items +
  • 28. Further CSS3 Resources • http://thinkvitamin.com/code/30-essential-css3- resources/ • http://www.css3.info/ • http://www.w3schools.com +
  • 31. HTML ....... • Super simple DOCTYPE • From: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> • To: <!DOCTYPE html> • More semantic elements <header> <footer> <section> <aside> <video> • Widely accepted by newer mobile & tablet devices +
  • 32. HTML ....... • Support built-in for: • native video (no flash) • geolocation • offline storage • drag and drop files (like Gmail’s new feature) • canvas (SVG) • enhanced form input elements and attributes: • text, search, url, tel,week, time, datetime, date, month, email, number, range, etc. • attributes like autofocus and +
  • 33. HTML ..... Resources • http://www.apple.com/html5/ • http://diveintohtml5.org/ • http://html5boilerplate.com/ • http://www.modernizr.com/ • http://sixrevisions.com/html/the-only- html5-resources-you-need-for-getting-up- to-speed/ +
  • 34. Responsive Web Design • How your web design responds to the medium (or device) in which it is being viewed • One site for all (or many) mediums/users • http://www.alistapart.com/articles/ responsive-web-design/ • http://www.alistapart.com/d/responsive- web-design/ex/ex-site-flexible.html
  • 35. Get Trendy • CSS3 changes the typography game with @font-face • Properties like shadows, border-radius and gradients help us duplicate Photoshop effects that used to require images • Enhanced alpha transparency support can create some interesting effects
  • 36. Get Trendier • HTML5 improves semantics and adds some nifty UI elements that used to require Javascript • Geolocation support is a nice capability to keep in mind when designing user- experiences • Enhanced alpha transparency support can create some interesting effects
  • 37. You Trendsetter, You. • Designing for both desktop and mobile is becoming a bigger need as mobile browsing is growing fast • Responsive web design uses existing technologies to allow your design to respond to what is being used to view it • Tools like modernizr.js and HTML5 boilerplate can help enhance older browsers to support early adoption of these technologies
  • 38. Thanks. Oh, yeah... Questions? Comments? Donations?

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n