Designing for the Future Web (Smashing Magazine Article)

I just finished this article and it is chock full of good stuff. I also thought I should post it because I believe the ideas being talked about in here go along with our discussion in class yesterday of "who should you design for" and "are you willing to sacrifice areas of a site for less supported users." Also, it has a bunch of useful resources at the bottom...including links to device emulators for iPhone, Blackberry, an Opera mini (which actually works! I tested my site on it), Android, and Nokia mobile. It also has links to learning more about HTML5. Hope you enjoy!

A Quick Overpackaging Slideshow Dohickey

Hello web folks!

As I am fine-tuning my sustainability site ideas I stumbled upon this set of images that points out some nifty (or I guess not so nifty) unnecessary packaging for a few different types of products. I particularly like the 1 oz. bottle wrapped in bubble-wrap stuffed in packing peanuts inside a plastic bag inside a cardboard box inside a bigger cardboard box.

This* Web Host 25% Discount

I ran across this link on my Twitter. I don't need it at the moment but if any of you do feel free to use it. http://psd.fanextra.com/downloads/this-web-host-discount-psdfan-readers-only/?utm_source=Tweetie&utm_medium=twitter

Happy designing!!

HTML5 in the nicest nutshell you've ever seen

Powerpoint ain't got nothin' on this presentation. Soooooooo well done.

Homework: Ideation for Sustainability Project

Ideation and development for Sustainability/Unsustainability-oriented advocacy site
 
Due: Wednesday, March 30th at 9AM

1. Create a minimum of 15 brainstormed initial ideas written as complete sentences.
2. Select 10 of these ideas and further refine each into a 2-3 sentence written idea.
3. Select 6 of these ideas and refine and visually define each with thumbnail sketches or diagrams (concept models)
4. 3 of these ideas refined and visually defined with a color sketch in browser chrome (nicely hand drawn or rendered in Photoshop or Illustrator)
5. Accompany each sketch with three paragraphs of text: the first detailing the communicative aims of the site, the next detailing the relevant user interactions, and the third detailing the relevant coding technologies/techniques you think might be able to deliver your conceptual, interactive, and visual ideas.

Label and package the results of all five development steps into a neat paper-based format to turn in at the beginning of next class.

This is too funny...

I have to once again thank the folks at Pyxl in Knoxville for this one. (Yes folks, we can design our 404 pages!)

Web Design Trends for 2011 (A MUST READ!!!)

Hey web folks!

I have to thank the folks at Pyxl, a web design firm in Knoxville, for this one. This article is super long, but chock full of hundreds (and I mean hundreds) of screen shots of current web design trends, along with explanations about why they work. Lots of good stuff on here. Talk about inspiration!!!

8 Web Development Mistakes that Make Any Site Look Bad

Here's an article I ran across that kind of reinforces some of the things we've talked about in class. http://freelancefolder.com/8-web-development-mistakes-that-make-any-site-look-bad/

Creating Image Gallery/Static Pages in WordPress

Creating an Image Gallery
Creating a Static Home Page

Here are 2 videos that describe creating an image gallery and making the home page a static page. The static home page video is very thorough and gives a great example.

Adding Posts and Pages

So you want to start writin' posts on your WordPress site? Well, you're in luck, because it works pretty much just like Blogger. As you can see above, you have a space to enter a title and then some content as well. Inside the content area you can dump everything from words to images to videos (you can even use this to create an image gallery, which I will post about later). Then when you are ready to post, you simply click Publish and voila! The post will appear at the top of whatever page you have designated for showing a blog format.

And guess what? Adding pages is just as easy! When you click on the Pages tab it brings up 2 options: Pages (the ones you currently have) and Add New (add more pages). Within the page you can set up the title and content just like a post. You can also make it the "child" of another page you've already set up by changing the Parent in the Page Attributes section to the right. As well you can also make each page static and blog type pages by changing the "Reading" setting in the settings tab. On my site, the Home Page has been set to static. That's why the comments section and blog archive aren't there.

Next up will be a couple videos I used to learn how to set up these static pages as well as how to create an image gallery.

The WP Dashboard

Welcome to the WordPress dashboard...well, a screenshote of it. As you can see, it is a little different from Blogger's, but it works quite the same.

On the left is a set of navigation of where you can go to create and modify the inner workings of your site.  The "Posts" section is where you can go to do what we do on Blogger, which is basically plug in some content and post it quick. "Pages" allows you to go in and create multiple pages for your site (as I have gone in and made an About and Let's Talk About Stuff pages). Appearance is the big kahuna when it comes to editing how your site will look, as it is where the CSS Editor exists. "Plug-ins" is where your you can go in and edit the widgets you want to show and not show on your site, as well as download more for your site. "Media" is where you can go in and add images to be used on your site (especially in using on your CSS editor).

The "Right Now" section gives you a quick overview of your site (i.e. how many pages you have, how many posts you have, how many comments, etc.) There is also a QuickPress section that allows you to add a post right when you log-in without having to go into your Posts section. It comes very handy for the eventual admin's of the site (company heads, etc.) who just want to come in and add content every once and a while.

There's a quick overview of the dashboard. I will go into detail on the Pages and Posts shortly.

My WordPress Site of Experimentation

Hello web folks!

Here is the link to the WordPress site I have been working on. On there in the "Let's Talk About Stuff" Section I have a post about editing your themes to make a WordPress site look like you want it to. I will also post that info on the blog here. Look for some more info on creating image galleries as well as adding widgets and posting content.

Reminder of Midterm Points of Evaluation

HTML/CSS Templates

• liquid single column layout with header and footer
• fixed-width single column layout with header and footer
• elastic single column layout with header and footer
• liquid two equal-width column layout with header and footer using floats
• fixed-width two equal-width column layout with header and footer using floats
• elastic two equal-width column layout with header and footer using floats
• liquid two equal-width column layout with header and footer using absolute positioning
• fixed-width two equal-width column layout with header and footer using absolute positioning
• elastic two equal-width column layout with header and footer using absolute positioning

Ugly Stylesheet – an antidote to dull defaults: See earlier post.

Research postings: quantity, quality, and presentation

• overall volume or quantity of research (on blog): A-F
• overall quality of research (on blog): A-F
• coherence and quality of class presentation – verbal: A-F
• coherence and quality of blog presentation – written: A-F

Event Site – 2 different aesthetic styles each deployed for 4 settings using media queries: 2 nearly identical HTML pages, which differ only in the style sheets they call. Each HTML page pulls four (4) style sheets (of a common aesthetic) to deliver content to:

• full screen (larger browser window)
• narrow screen (smaller browser window)
• iphone/ipod touch
• blackberry

Faux/Fake/Satire/Spoof Site: Build a site which emulates another web site. The purpose of this project is to help you visually and technically analyze other works for the purpose of creating your own. Much of the time we emulate work we have already seen. This is an opportunity to learn from the aesthetics, content, and coding techniques of those whose work you respect and or enjoy. At a base level you are making a close duplicate of another site (only one page needed). At a more advanced level you are taking to opportunity to twist the copy to your purposes of humor, satire, and or socio-political commentary.

• working single page model (HTML/CSS)
• use it as an opportunity to do further technical research into aesthetics, techniques, and content which intrigue you. So feel free to develop your understanding of how to deliver Structure (HTML), Presentation (CSS), and Behavior (Javascript and other scripted activity).

Competitive Audit Analysis Paper: Research the design idioms used in contemporary social and or political advocacy sites:

1. Write a 2 page minimum text length (double spaced) paper detailing the trends in non-commercial advocacy-oriented site design on the web.
2. Questions to consider and answer:
   
   • What are the common visual and content structures?
   • What designs and design strategies stand out from the crowd in your mind as good design? Why?
   • What common practices are getting a bit worn out? Why?
   • Is ‘looking different’ a liability or a selling point? Why?
   • How do these sites as a group differentiate themselves from commercial sites? Are they using the same paradigm? How so?
   • How do these site use heuristic and didactic methods to reach their audiences?
   • What kind of user are these sites pitched to? Uniformed or informed users? What is there purpose? Mobilization, education, fund raising, or other? How are these different needs prioritized?
3. Illustrate your paper points with relevant screen captures from the web (mark up [with ‘pen’] if useful for clarification)
4. Create a site source link list (minimum 25 sites)
5. Submit as a single file (in .doc, .docx, .pdf, .ppt, or .pptx format)

Class Attendance

Class Participation

Microsoft is Letting Us Watch IE6 Die...

It's usage as of this posting is now down to 12%. Here is the link to the official tracker.

More funtion for Transform

Demo (open this in safari, some firefox version do not support)



Zoe Mickley Gillenwater, Stunning CSS3

CSS Gradients, Shadows, Transforms

Demo
CSS3 Gradient Generator

Something to make life a little easier (I hope)

http://css3generator.com/

Virb.com

http://virb.com/ This website claims to be "One of the easiest, most affordable ways to build an elegantly simple website." Has anybody ever heard of this?? Used it?? Feedback please.