Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Web Design: HTML5 and Responsive Design

No description
by

Katie Soldau

on 27 March 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Web Design: HTML5 and Responsive Design

Web Design: History of HTML & CSS History of Responsive Design Responsive Design HTML5 and CSS3 responsive design Examples Issues Charley, C. (2012, May 30). Mobile site vs. responsive site vs. native app vs. web app. Retrieved from http://www.siliconbeachtraining.co.uk/blog/make-your-business-mobile/?goback=.gde_62503_member_119836146
Lockwood, C. (2012, April 23). Responsive design or a native app? . Retrieved from http://www.netmagazine.com/opinions/responsive-design-or-native-app
van Vuuren, C. (2012, November 18). Mobile apps: The trouble with using 'responsive design'. Retrieved from http://www.forbes.com/sites/ciocentral/2012/11/18/mobile-apps-the-trouble-with-using-responsive-design/
Addison Wesley Longaman 1998. A history of HTML http://www.w3.org/People/Raggett/book4/ch02.html
Håkon Wium Lie and Bert Bos (2nd edition, 1999, Addison Wesley). The CSS Saga. http://www.w3.org/Style/LieBos2e/history/Overview.html
Way, J. (2011, July 14). 28 html5 features, tips, and techniques you must know. Retrieved from http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/
Kim, J. (2012). Form follows function. Retrieved from http://fff.cmiscm.com/
Kaney, B. (2012). Vermonster. Boston: Retrieved from http:/www.vermonster.com
Pearce, J. (2013). What’s New in HTML5, CSS3. Retrieved March 26, 2013, from Sencha website: http://www.sencha.com/conference/session/ whats-new-in-html5-and-css3
Bob Holt (2013). Responsive Web Design: Opportunities and Challenges. [ONLINE] Available at: http://slashdot.org/topic/cloud/responsive-web-design-opportunities-and-challenges/. [Last Accessed March 26 2013].
Ben Gremillion (2013). Preparing Websites For The Unexpected. [ONLINE] Available at: http://mobile.smashingmagazine.com/2013/01/14/preparing-websites-for-the-unexpected/. [Last Accessed March 26 2013].
Drew Thomas (2013). Why Responsive Web Design Has To Win Out. [ONLINE] Available at: http://mobile.smashingmagazine.com/2013/02/14/responsive-web-design-planning-future/. [Last Accessed March 26 2013].
Dave Rupert (2012). Mo’ Pixels Mo’ Problems. [ONLINE] Available at: http://alistapart.com/article/mo-pixels-mo-problems. [Last Accessed March 26 2013]. References HTML5 and Responsive Design Responsive Design vs. Native Apps How it all began- from WWW to HTML4 Data and Economic Issues How much data do you send to a phone on a 3G connection versus someone on a desktop with a high speed connection? What if the connection changes?
Image resizing is a very difficult problem
Storing multiple images of different sizes is one approach but requires unnecessary downloading
Retina displays require the highest resolution images BUT are often found on mobile phones and tablets
Mobile phones have the least secure connections of most devices and usually have the most expensive data plans
More data used to store images = more money spent by users New Features and Employment HTML and CSS markup is constantly changing
There is no way to guarantee what you learn now will remain relevant and useful in a few years
Careers in web design are not guaranteed if you cannot adapt to new developments
Websites more frequently need to get regular feature updates and add-ons
Maintaining a single code base for a desktop website and a separate mobile website can become tedious HTML5 full screen on laptop resized on laptop same site different screen widths mobile Animations
Text Effects
CSS Transitions
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition1

div
{
transform:rotate(30deg);
} Backwards Compatible
Cleaner Markup/ Improved code - Remove "div" tags and replace with HTML5 elements such as "<image>", "<video>", instead of "<object>"
New API's (application programming interfaces)
Error Handling (Improved handling with wrong syntax) CSS3 Is Responsive Design Necessary? When the only changing factor in the Web experience is the user’s device
Works very well for content sites like magazines and newspapers
Because content is simply being reformatted
Content delivery has the potential to deter users.
Trying to deliver complex functionality built with heavy Web development technologies means the experience will be slower on a smartphone or tablet
Time lost = users lost Depends on the situation! Responsive design suggests that mobile is a subset of the traditional Web, but people use mobile for different reasons
Users expect a different experience for different end goals
Experience should be convenient, relevant and contextual
Beyond device-specific content display, must consider use case and context
These are considered the benchmarks of mature mobile strategy and should drive decision making
Responsive design does not contribute meaningfully to these aspects
Can help you achieve a certain measure of consistency across channels, but always want ability to create unique experiences
Go for higher user engagement and overall success Is Responsive Design Necessary? Easily monetized
Access to device sensors
Once downloaded, the content is easily accessible
Content available offline
Users still gravitate toward native apps because they have more trust in the AppStore and Android Market
Believe these apps are more appealing and feel safer giving out personal and financial information
Some believe that this trust has not spread to web apps because an industry trusted web store is yet to appear Provide a cross platform solution for developers
Becoming much easier to implement with HTML5 and CSS3
Bypass the App Store approval
No user intervention needed to download an app
Content distributed cross platform
Content updates driven by a CMS Responsive Design Native Apps HTML5 HTML CSS How it all began:
CERN 1989: Tim Berners-Lees's concept
cross-reference from one text to another
a "web" of information held in electronic form on computers across the world
How? -using some form of hypertext, a way of linking docs together by using buttons on the screen Hypertext first application: Hypercard
enabling you to construct a series of on-screen "filling cards" that contained textual and graphical information
Major limitation:
hypertext jumps could only be made to files on the same computer
still NO hypertext links on a global scale
So...back to Tim:
global hypertext? - feasible to him, by using something very simple, like:
HTML- the text format of HTTP(HyperText Transfer Protocol), a protocol which retrieves other docs' text via hypertext links
September 1991: Dave Raggett (HP) composed HTML+
July 1994:
HTML was becoming ill-defined
Solution? - collecting all the HTML tags widely used and collate them into a draft doc = HTML 2
Late 1994: W3C was formed Time and budget may not always allow for specialization. What is Responsive Design? So, What is it? Early Company Support Ethan Marcotte "while it is often tempting to develop mobile-specific versions of a website for a client with sandboxed and curated domains, the approach can quickly become a tremendous burden." Economy Unity between designers and developers 1995: HTML 3 was published as an Internet Draft:
tables, tabs, footnotes and forms
support for style sheets by including a STYLE tag and a CLASS attribute

November: standardized HTML
style sheets for HTML docs
the deployment of Cascading Style Sheets(CSS)

December: Internationalization of HTML
mark up languages other than those that use the Latin-1 character set to include a wider variety of alphabets and international languages Starts in 1994

implies that more than one style sheet can interact to produce the final look of the document

W3C created CSS which:
allowed all formatting to be removed from the HTML doc and be stored as a separate file

CSS files:
have universal browser support
consistent look and feel to the site
time saving
allocates styles to numerous elements via direct, class, id and psedo selectors

First emerged in 1996 December 1996: "Cougar" (a.k.a HTML 4) in process
January 1997: HTML 3.2 is ready:
stable and approved of by most Web players
added the existing HTML 2 standard and incorporated features from HTML+ and HTML 3
included tables, applets, text flow around images
subscripts and superscripts
Spring 1997 : HTML 4 completed
support for international languages
style sheet support
extensions to forms, scripting and much more tablet http://fff.cmiscm.com/#!/main
Full transcript