web design patterns

Web Design Patterns I

Francis Addai~ Chief Technology Officer, Voto Mobile~ Training Coordinator, mFriday~ Service Personnel, UITS-KNUST ~ Web Developer, Freelancer

http://faddai.com0244966408

@faddai

Disclaimer

Most of the stuffs I would be talking about are based on my experiences. I about are based on my experiences. I may be wrong somewhere along the line, just lemme know when it is that time.

Business of the Day

- What is web design?- How do you do it?- How do you do it?- Common Patterns

What is web design?It is a very broad term covering many different skills and disciplines that are used in the production and maintenance of websites.

web graphic design, interface design, user experience design and search engine optimization.

http://en.wikipedia.org/wiki/Web_design

How do you do it?

Static Comp

vrsDesign in the browser

http://www.netmagazine.com/opinions/designing-browser

I prefer to design and develop web applications in the browser.

Common Patterns

-Tabbed Content- Single page web apps (AJAX)- CSS frameworks and Grid Systems

in web design and development

- CSS frameworks and Grid Systems- Responsive web design- SEO- Analytics- API integration (FB comments, twitter intents, Disqus, sharing)

Tabbed Content

Tabbed Content

Single page web apps (AJAX)

Examples include:

- Gmail- Gmail- Google Drive- Google Search- Asana (http://asana.com)

In all the above web app examples, there are minimal/no page refresh. New datais loaded via Asynchronous Javascript And XML (AJAX).

CSS frameworks and Grid Systems

CSS frameworks and Grid Systems

Examples

- 960.gs (http://960.gs/)- Twitter bootstrap - Twitter bootstrap (http://twitter.github.com/bootstrap/)- Blueprint (http://www.blueprintcss.org/)- Foundation by ZURB (http://foundation.zurb.com/)

Responsive web design

SEO

Analytics

When performance is measured, performance improves. When performance is measured and reported back, the rate of improvement reported back, the rate of improvement accelerates.

~ Pearson’s law

APIs

APIs

Web design patterns II

More hands-on with these patterns. We will experiment and implement these patterns. We shall explore these patterns. We shall explore

some development tools too.

Don’t miss out.