Posted on

Steps to becoming an awesome Digital / Web Developer

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?



  • 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

The Right Infrastructure

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

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).

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

  1. BY FAR the easiest: Use AwesomeScreenshot plugin for Firefox, Chrome or Safari.
  2. Just discovered Web API’s to do screenshots!

Mocking up designs for Web Portfolio or Concept Mockup  

No related posts.

Leave a Reply