Contents
Last Update: 3/14/2012
The Right Mindset
- Coding Responsively is Coding Responsibly. Now the #1 practice of web programmers!
- What is responsive design? Responsive design through CSS Media Queries (discussed later in this article) allows you to rearrange the layout based on the user’s screen size (whether Desktop, Laptop, iPad, iPhone, etc..) using the same webpage without having to program additional sites (remember the horrible past of telling people what size your site is best viewed at? or forcing browser windows to resize?).
- Why? We need our sites to be accessible on any device. While we *could* create a separate mobile site, this might also mean double the work. I would only recommend a separate mobile site if your mobile content is drastically different from your web version. Secondly, setting up an adaptive design means that your website will not at a weird zoom scale (either zoomed way too far out or too far in cropping off text)
- Rule #1: Users should NOT have to zoom in and out to access your content, or to read it properly. Your site should be scaled as desired on page load.
- Where are some Responsive design examples?
- designmodo.com/responsive-design-examples/
- coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
- Even Responsive /Scalable Headline Font Text!!: fittextjs.com/
- Theoretically, every website should be a balance of Durability, Usability, and Beauty/Design. (source: tympanus.net/codrops/2011/10/13/architecture-in-web-design-applying-vitruvius-principles/)
- Usability: We shouldn’t rely on hover to display any crucial information. It may or may not work on devices so it’s better to just use hover as a stylistic device where it doesnt matter if they miss the effect.
- Design tips: www.1stwebdesigner.com/design/worst-call-to-action-examples/
- Find the Website’s Voice & Personality. There are too many possibilities with technology to use it without thought to form or function. As technologies mature, they are accessible enough to use them with ease while focusing on expression. This does not mean web 1.0’s version of putting up every asset and the kitchen sink, but a restrained concise expression that begins to transcend seamlessly to an artful experience.
- Injecting Personality Into Web Design
The Right Tools
- Get your code editor: HTML..etc: Dreamweaver / TextMate / TextWrangler.. whichever you like
- TextMate (macromates.com)
thepiratebay.org/torrent/6363095/TextMate_v_1.5.10_(1631)___SK_%5BK%5Drack
- Use LESS to manage your CSS files (lesscss.org) or the program for Mac: incident57.com/less/
- CSS corrector: csslint.net/
- More CSS Tools: www.1stwebdesigner.com/design/css-tools-designers-developers/
- Connect to your FTP: FireFTP (firefox), Cyberduck (Mac)
- Find your color palette: www.colourlovers.com/
- Sample any color value using a native Mac OS X app in Utilities -> DigitalColor Meter
- Aspect Ratio Calculator (resizing elements): andrew.hedges.name/experiments/aspect_ratio/
- COMPRESS IMAGES: www.smushit.com/ysmush.it/ or the wordpress plugin
The Right Infrastructure
- Quick Coding Guide
- Coding 1 page? Use HTML5 Boilerplate + TextMate or Dreamweaver
- Coding a few simple pages? Use Dreamweaver Templating or WordPress using HTML5 Boilerplate or Responsive Layout
- Coding a full site? Use WordPress with HTML5 Boilerplate or Responsive Layout
- HTML5 Guide: Avoiding Common HTML5 Mistakes
- HTML5 Boilerplate is a set of best practices that standardizes web browser display issues (ahem.. IE6.. IE in general) and provides a starting template you can build your HTML5 sites off of.
- Boilerplate Templates
- Mobile-based Boilerplate Templates
- To run the BUILD on your site: github.com/h5bp/html5-boilerplate/wiki/Build-script
- You might need to install ANT: ant.apache.org/bindownload.cgi
- ANT-Contrib sourceforge.net/projects/ant-contrib/files/latest/download?source=files
The Business Side – Good Reads
- PICK 2 OF 3: TIME – QUALITY – PRICE
- Time – “Any problem can be solved with infinite time.” The more time you have, the higher quality will be, at a lower price (since you have more time, you can do other things in the meantime).
- Quality – High quality requires more time and more price.
- Price – The higher the price, shorter the time may also result to high quality.
So you can show this to your client and ask him to choose 2 of 3 items. If they want it done quick and really well, he’ll pay a high price for it. If he has a small budget and wants it done quick, the quality won’t be as good, and if he wants great quality, and has a small budget, you can tell him that you will have to make higher paying clients a priority, but you’re still going to get his work done. - Source: www.1stwebdesigner.com/design/things-clients-should-know-about-web-designer-job/
- 8 Things Designers Should Teach Their Clients: www.1stwebdesigner.com/design/things-designers-teach-clients/
Image Optimization for Web
- COMPRESS IMAGES: www.smushit.com/ysmush.it/ or the wordpress plugin
Firstly, your web images should be saved for web in photoshop. Please don’t use the regular save, those files are way too bulky. Also, check your pixel size and resolution and file sizes. A number of my clients just upload full sized JPGs from their cameras to their blogs, which I think is near insane.. for so many reasons in addition to the disk space usage. You can easily create an ACTION in Photoshop to automatically size your images to a pre-set specification saved for web… say 900x1200px at 72dpi and 65 save for web quality. Or you can try using exporters in your Picasa or maybe iPhoto (i’ve never used iphoto).
- PNG
- PNG file size minifier! Download for mac: pngmini.com/
- Use “Posterize” in Photoshop to reduce # of similar colors and thus file size.
- More:www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
- JPG
- Never save for web at 100% (overkill and is not actually a ‘max’ quality), 95-99% will do.
- More:www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/
- More:
Programming for mobile devices – use CSS Media Queries
Developing for apple: developer.apple.com/library/safari/#documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html
css-tricks.com/snippets/css/media-queries-for-standard-devices/
developer.mozilla.org/en/Mobile/Viewport_meta_tag
Portfolio Presentation
Taking Screenshots of Websites: 3 Ways
- BY FAR the easiest: Use AwesomeScreenshot plugin for Firefox, Chrome or Safari.
- Just discovered Web API’s to do screenshots!
- www.thumbalizr.com/ Entire page to bottom grabs, or screen grabs. Customize to any size.
- www.websnapr.com/ Thumbnail snaps only
Mocking up designs for Web Portfolio or Concept Mockup
- Comprehensive List of Tools for Download: Queness: Useful Collection of iOS Tools and Resources for Designers
- iPhone 4s Template Download
- iPhone 4s GUI Download
- www.teehanlax.com/downloads/
- iPad2 Template
- iPad GUI Download
- Read Guidelines for creating iOS iPhone/iPad Homescreen Icons
- iPhone Icon Template Download
- Note: **Do not round your corners off, this is applied automatically. If you are creating a site bookmark gloss shine will not be added automatically so export yours with shine**) : static.command-tab.com/2008/iphone_icon_templates.zip