Archive for the ‘Web design for print designers made easy’ Category

Presenting Media Queries for Web 414

Thursday, February 9th, 2012

Examples of Responsive Design

Responsive Design Features

Media Query support and shims

Miscellany

Must Reads for Advanced Users

Links for Mobile Web Development

Wednesday, November 10th, 2010

History of the Web in 3 minutes

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://web.archive.org/web/19961225070933/http:/www.bestbuy.com/

http://www.csszengarden.com/?cssfile=/209/209.css&page=0

http://radikalfx.com/files/collage/demo.html

http://mrdoob.com/projects/harmony/

Examples and Mobile Showcase Articles

http://sixrevisions.com/design-showcase-inspiration/35-beautiful-iphone-app-website-designs/

http://blog.insicdesigns.com/2010/06/best-examples-of-web-design-for-iphone/

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

http://www.tacobell.com/

Replacing Flash with Javascript for Mobile

http://jquery.com/

http://flowplayer.org/tools/index.html

http://www.kesiev.com/akihabara/

http://colorpowered.com/colorbox/

http://jquery.malsup.com/cycle/

New Phones Hitting the Market

http://www.engadget.com/

CSS Media Query – Resizable Websites

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

http://www.alistapart.com/articles/responsive-web-design/

http://hicksdesign.co.uk/journal

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

Resolution

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

iPhone Retina Display

http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml

http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html

http://www.lukew.com/ff/entry.asp?1142

Tutorials

http://slodive.com/web-development/a-roundup-of-15-mobile-web-design-tutorials/

http://perishablepress.com/press/2009/08/02/the-5-minute-css-mobile-makeover/

Native Apps for Web Developers

http://www.phonegap.com/

http://www.appcelerator.com/

Tools, Plug-ins and Templates

http://www.modernizr.com/

http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

http://mobify.me/

http://www.unitymobile.com/

Reading and Reference

http://findmebyip.com/litmus/

http://www.smashingmagazine.com/

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

HTML5 Overview – 5 Dollar Friday at C2

Friday, August 20th, 2010

Another Friday, another five bucks.

We had great turnout for our discussion of HTML5 on Friday afternoon, Thanks to everyone who attended.

As promised, here is a list of the links visited during the demo of HTML5 and related technologies.

A very short history of the web – from basic text to the equivalent of the printed page

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://web.archive.org/web/19961017235908/http://www2.yahoo.com/

http://web.archive.org/web/19961225070933/http:/www.bestbuy.com/

http://www.csszengarden.com/?cssfile=/206/206.css&page=0

Examples of HTML5, CSS3 and Javascript – applications in the browser window

http://www.apple.com/html5/

http://radikalfx.com/files/collage/demo.html

http://www.kesiev.com/akihabara/

http://htmlfive.appspot.com/static/gifter.html

http://mrdoob.com/projects/harmony/

http://html5demos.com/

HTML5 references and browser capability resources

http://diveintohtml5.org/

http://www.w3schools.com/html5/html5_reference.asp

http://caniuse.com/

http://beta.html5test.com/

http://www.findmebyip.com/

http://www.findmebyip.com/litmus/

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

http://html5demos.com/

HTML5 28 Tips

HTML5 Slideshow

CSS3 Generator

HTML5 & CSS3 feature detection and Javascript browser enhancement

http://www.modernizr.com/

http://diveintohtml5.org/detect.html

http://remysharp.com/2009/01/07/html5-enabling-script/

http://css3please.com/

http://www.fontsquirrel.com/fontface/generator

Exercise showing the new HTML5 semantic tags in use

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

New HTML5 Attributes

http://www.w3schools.com/html5/html5_ref_standardattributes.asp

New HTML5 Events

http://www.w3schools.com/html5/html5_ref_eventattributes.asp

New HTML5 Form Elements, Types and Attributes
(Note: Only the Opera browser currently has a noticeable amount of support for these new features)

http://people.opera.com/brucel/demo/html5-forms-demo.html

http://www.w3schools.com/html5/html5_form_input_types.asp

http://www.w3schools.com/html5/html5_form_elements.asp

http://www.w3schools.com/html5/html5_form_attributes.asp

Geolocation
(Note: these demos are only useable on mobile devices for the most part)

http://www.html5rocks.com/tutorials/geolocation/trip_meter/

http://www.drdobbs.com/web-development/225600440

http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation

Local Storage

http://www.html5rocks.com/tutorials/webdatabase/todo/

Session Storage

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Web Workers

Guide to web workers

http://html5demos.com/worker

http://www.drdobbs.com/web-development/225701170

HTML5 Audio Tag

http://code.coneybeare.net/getting-html5-audio-tag-and-flash-fallback-to

http://www.html5rocks.com/tutorials/audio/quick/

http://html5doctor.com/native-audio-in-the-browser/

HTML5 Video Tag

http://jilion.com/sublime/video

http://camendesign.com/code/video_for_everybody

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback

HTML5 Canvas Tag

http://www.kesiev.com/akihabara/

http://www.canvasdemos.com/

http://html5games.com/

https://developer.mozilla.org/en/canvas_tutorial

http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

http://www.rgraph.net/

http://www.html5rocks.com/

New HTML5 Tags

article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
input*
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
video

*(input itself is not new but there are so many new input types and attributes that I want to draw attention to those)

Existing tags that have been redefined in HTML5 (some subtly)

!DOCTYPE – simplified, shortened
a – used for hyperlinks ONLY, name is no longer valid attribute, must have href.
address – new rule when address is in article tag
b – stylistically offset
em – stress emphasis
hr – paragraph-level thematic break
i – alternate voice
legend – legend can now be used with figure tag and details tag in addition to fieldset tag
menu – list form controls, no longer deprecated
small – side comments and small print
strong – strong importance

Removed Tags

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
s
strike
tt
u
xmp

Summer Industry Events

Tuesday, June 30th, 2009

Opportunities for professional development abound, make sure you take some time to hone your skills AND play in the sun throughout July and August!

July 14 Web Design for Print Designers Made Easy seminar is SOLD OUT! We’ve opened a second session at the same venue on August 11, click HERE to register.  (Coming to Madison as soon as we find a host location!)

July 24 Third Ward GALLERY NIGHT with the kids from OnRamp. Come to the lobby at 222 East Erie Street to see and purchase the cool Milwaukee-centric T-shirt designs of the 12 ambitious high schoolers who participated in OnRamp.  Want to see some of the designs and learn more about the program? Click HERE

OnRamp organizers were recently interviewed by 89.7 Lake Effect…Listen HERE

August 21 $5 Friday: The Art and Business of Professional Illustration + Advanced Digital Illustration Techniques  Register HERE

More pro devo: Want to attend upcoming AAF-Madison, AIGA, AMA, BMA and other local (Madison and Milwaukee) professional organization, meet-up and user group events?  Check out our PIPELINE!


 

Adobe Quark logo