Stumbled across this lecture I gave to a college web design class back in early 2008. The old branding, examples, and notes made me laugh out loud, but most of the advice is as relevant today as it was back then.
Pm In Pictures 7 Things Youll Never Hear Steve Jobs SaySaeed Khan
A pictorial of things people often say during presentations, but someone like Steve Jobs would never say. The reason -- preparation, preparation, preparation.
Unit testing is easy... In a perfect world.
Our world is not.
This talk will cover a bunch of tips, tricks, and techniques to retrofit ugly legacy applications so parts of them can be unit tested.
(Examples given in Java using JUnit and Mockito)
Lets dive into our favourite programming language and have a more in depth look on two core parts which every PHP Developer uses on a daily basis. In the first part of the talk we will strip down PHP's session handling and take a look at the bits and pieces that we find. The second part of the talk will be dedicated to IEEE 754 and the implications you need to be aware of when working with float's in PHP. Money will never be the same again after that.
Pm In Pictures 7 Things Youll Never Hear Steve Jobs SaySaeed Khan
A pictorial of things people often say during presentations, but someone like Steve Jobs would never say. The reason -- preparation, preparation, preparation.
Unit testing is easy... In a perfect world.
Our world is not.
This talk will cover a bunch of tips, tricks, and techniques to retrofit ugly legacy applications so parts of them can be unit tested.
(Examples given in Java using JUnit and Mockito)
Lets dive into our favourite programming language and have a more in depth look on two core parts which every PHP Developer uses on a daily basis. In the first part of the talk we will strip down PHP's session handling and take a look at the bits and pieces that we find. The second part of the talk will be dedicated to IEEE 754 and the implications you need to be aware of when working with float's in PHP. Money will never be the same again after that.
The web is not a fixed width, and Steve Fisher thinks we are remembering that. If our medium is fluid, should our process be fixed? Steve prefers designing within the browser, especially when responsive design is a requirement. Fireworks and Photoshop are not flexible enough to demonstrate media queries, button and menu states, HTML5 and JavaScript behaviors, dynamic resizing of elements and navigation flow. Because the medium is fluid, our approach to design has to be fluid as well. A responsive process is a responsible process, matching the medium. After working with many companies and organizations, helping them transform their process to fit a responsive workflow, Steve is going to share the goods. One web to rule them all!
An introduction to web design aimed at bloggers. I run through my design process, take a quick look at design theory, review potential design apps and share plenty of links for further reading. This was presented at BlogConf on Saturday 4th October.
David has had a unique experience as a software practitioner. David met (and eventually married) a lady who was in the process of writing a dissertation on collaboration during pair programming. Reviewing (and reviewing and reviewing) this dissertation in combination with his industry experience has provided David with some unique insights into the act of pair programming. This talk aims to distill those insights and provide you with some concrete mechanisms that you can bring to your next pairing session to ensure that it is more effective.
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
Sweating Details - Slides from my talk at Form Function Class 6 in Manila Philippines on Nov 14th, 2015.
This talk is about sweating details and how small tweaks and changes can make a big difference in any of the web design stages. From optimising the process, via UX and design all the way to performance, this talk covers possible tweaks and recommendations with some practical examples to improve the overall experience of our products.
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023BookNet Canada
Margaret Bryant (Orca Book Publishers), Jason Farrell (University of Toronto Press), Andrew Faulkner (Assembly Press), Brendan Flattery (HarperCollins), Tamara Mair-Wren (Ampersand Inc.), and Lauren Stewart (BookNet Canada) come together to share the hi- and lo-tech tools that drive efficiency in their daily work. Gain access to a wealth of time-tested tips and tricks honed through years of practice and, in the process, improve your professional toolkit.
Link to recording and slides: https://bnctechforum.ca/sessions/show-and-tell-whats-in-your-tech-stack/
Presented by BookNet Canada on December 5, 2023, with support from the Department of Canadian Heritage.
So You Say You Want a Chatbot RevolutionHolly Cummins
Not so long ago, we interacted with websites by clicking buttons, and with people by talking to them. Those lines, however, are becoming increasingly blurred, with real people guiding our website interactions and computers running phone, Twitter, and Facebook Messenger interactions. An increasing number of these interactions are voice, rather than text, ones. What does it all mean? Are websites obsolete, or is this a passing fad? Is chatbottery the new HMTL, only without the standardization? This session presents a practical introduction to how chatbots work, their advantages, their limitations, and where they should and should not be used.
BrightonSEO: How to generate 8 million SEO test ideas - Will CritchlowWill Critchlow
In this talk, delivered at BrightonSEO in April 2023, Will Critchlow, founder and CEO of SearchPilot covers a method for generating practically-unlimited SEO A/B test ideas.
Going on a journey from what SEO has been to what it needs to become, Will covers the mindset and strategy shifts needed, as well as the tactical implementation details. Download resources including detailed guides to SEO testing, and the free tool he uses to generate the ideas (plus explainer video).
The web is not a fixed width, and Steve Fisher thinks we are remembering that. If our medium is fluid, should our process be fixed? Steve prefers designing within the browser, especially when responsive design is a requirement. Fireworks and Photoshop are not flexible enough to demonstrate media queries, button and menu states, HTML5 and JavaScript behaviors, dynamic resizing of elements and navigation flow. Because the medium is fluid, our approach to design has to be fluid as well. A responsive process is a responsible process, matching the medium. After working with many companies and organizations, helping them transform their process to fit a responsive workflow, Steve is going to share the goods. One web to rule them all!
An introduction to web design aimed at bloggers. I run through my design process, take a quick look at design theory, review potential design apps and share plenty of links for further reading. This was presented at BlogConf on Saturday 4th October.
David has had a unique experience as a software practitioner. David met (and eventually married) a lady who was in the process of writing a dissertation on collaboration during pair programming. Reviewing (and reviewing and reviewing) this dissertation in combination with his industry experience has provided David with some unique insights into the act of pair programming. This talk aims to distill those insights and provide you with some concrete mechanisms that you can bring to your next pairing session to ensure that it is more effective.
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
Sweating Details - Slides from my talk at Form Function Class 6 in Manila Philippines on Nov 14th, 2015.
This talk is about sweating details and how small tweaks and changes can make a big difference in any of the web design stages. From optimising the process, via UX and design all the way to performance, this talk covers possible tweaks and recommendations with some practical examples to improve the overall experience of our products.
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023BookNet Canada
Margaret Bryant (Orca Book Publishers), Jason Farrell (University of Toronto Press), Andrew Faulkner (Assembly Press), Brendan Flattery (HarperCollins), Tamara Mair-Wren (Ampersand Inc.), and Lauren Stewart (BookNet Canada) come together to share the hi- and lo-tech tools that drive efficiency in their daily work. Gain access to a wealth of time-tested tips and tricks honed through years of practice and, in the process, improve your professional toolkit.
Link to recording and slides: https://bnctechforum.ca/sessions/show-and-tell-whats-in-your-tech-stack/
Presented by BookNet Canada on December 5, 2023, with support from the Department of Canadian Heritage.
So You Say You Want a Chatbot RevolutionHolly Cummins
Not so long ago, we interacted with websites by clicking buttons, and with people by talking to them. Those lines, however, are becoming increasingly blurred, with real people guiding our website interactions and computers running phone, Twitter, and Facebook Messenger interactions. An increasing number of these interactions are voice, rather than text, ones. What does it all mean? Are websites obsolete, or is this a passing fad? Is chatbottery the new HMTL, only without the standardization? This session presents a practical introduction to how chatbots work, their advantages, their limitations, and where they should and should not be used.
BrightonSEO: How to generate 8 million SEO test ideas - Will CritchlowWill Critchlow
In this talk, delivered at BrightonSEO in April 2023, Will Critchlow, founder and CEO of SearchPilot covers a method for generating practically-unlimited SEO A/B test ideas.
Going on a journey from what SEO has been to what it needs to become, Will covers the mindset and strategy shifts needed, as well as the tactical implementation details. Download resources including detailed guides to SEO testing, and the free tool he uses to generate the ideas (plus explainer video).
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Anyone speak a little German?
I am filling in for Mr. Mynett, who’s likely pickled in quality German beer by now.
Today I’ll be presenting a lecture about...oops. Wrong presentation.
There we go.
Why am I lecturing in a web development class? Good question. Well, I thought I’d share some thoughts and advice on issues I see all the time—minor things that happen in the development of a website that you should know and make part of your methodology should you decide to do this professionally. I hope most of these things seem obvious to you or have already been touched on in your time here, but I think hearing it from a 10 year veteran of this process is good. I hope you agree.
And if time allows, I’ll also be presenting a case study on a large branding, interface design and development project Steve and I have been working on for the past couple months. Hopefully it will reinforce some of my ranting.
But first, who am I exactly?
My name is Mark Busse and besides being Steve’s boss as Founder and Design Director of Industrial Brand, I am the President of The BC Chapter of GDC, a Board Member of Vancouver ACM SIGGRAPH and educator at local design schools.
And yes, it is coded using Flash—more on that later.
Some of my recent clients include Best Buy, CMHC, Future Shop, Granville Island Brewing, Future Shop, Hemlock Printers, La Scala, Ledalite, Mercury Filmworks, Nokia, Rocky Mountain Production, SFU, Telus, Toyota and UBC, among many others.
If you don’t get enough of my ranting today, you can check out my blog for hours of fun. Note: this site is HTML with CSS on a CMS platform. Aren’t acronyms fun?
These are indeed the inside of my eyes. Cool, huh.
Until after highschool, many people didn’t even know my first name was Mark.
How about let’s not.
Let’s also not talk about how to resize and optimize images or make GIFs thank you. Instead, I am going to quickly run through some of my pet peeves and some ideas you may benefit from. If they contradict stuff previously taught or are things you already know, I apologize in advance, but this is my chance to make sure you’ve heard this from someone who’s done this for a long time. It was this or Johnathon teaching the class. :-)
If your client can’t compose a simple expression of their goals, objectives, audience, their needs, etc, then how are you going to judge success? (Show Yaaway brief)
Research, plan, scope, stick to it. Get organized. Consider your naming nomenclature. Make back ups. Suggestion: use an online backup system so it’s off site.
If you can’t honestly say you have clarity about who the user base will be, don’t assume. Find out. Go talk to them. Work with your client to develop a persona for the audience and role play user stories. And beyond things like their attitudes and preferences, try to accurate predict their browsing environment and develop with that in mind (i.e. 800 x 600 is only 3% while 1024 x 768 is 32% and 1280 x 1024 is 37% - why do people insist on developing for 800 x 600?)
Shut up. This isn’t about you. Save that for your own website—although even THAT isn’t about you either. Keep your mouth shut and look for solutions to the client’s and audience’s problems. If it isn’t clear, ask more questions.
The “agile” approach of skipping all the charts, schematics, wireframes, etc and focussing on being flexible, fast and loose and learning constantly as you go can be a terrific approach once you’re an expert.
Read 37signals’ book Getting Real.
Well, OK. Not a lie, but be cautious of those who just wing it in favour of careful planning, clear communications and methodologies. Just diving in, launching early, tweaking as you go and flying by the seat of your pants WILL eventually fail you—and may be very costly. And having a well defined process will save you. Example: Nokia mobile advertising.
Ouch. This one hurts. This was a huge project for Nokia that IMHO failed because we engaged in an agile development approach which backfired.
Want animation and an platform-independent and easy-to-code environment for a website? Flash baby!
An exception to the intro rule? Perhaps as it says something about who we are and what we do. It also acts as a pre-loader.
Want to make downloads slower, require plugin compatibility, make a site virtually invisible to search engines, render text & windows not resizable, make subpages and permalinks awkward and make the site difficult for the client to maintain or update? Flash baby! NOTE: flash can be very powerful as a component of a site and with dynamic content is improving, just go easy and make sure you chose Flash for a reason, not just because you can. (regretful example: gdc.net/graphex)
International Home Fashions - what is the purpose of this intro? If you MUST have an intro, then it should be to say something about the brand message or tell a story.
Please use meta tags, page titles and register your sites with the search engines. And consider including short descriptions in page titles. It may not be full-on SEO, but it’s the right thing to do.
Please don’t make me say “Less is more.” Oh shit. There, I said it. But remember, as great as simplicity is, sometimes less is too little. Don’t fight for minimalism and start quoting Bauhaus crap if there isn’t a real need for it driven by the audience and brand message. (show canada.com or newyorktimes.com example and then Rethink.com example. Kanto and Delibato good examples)
Rethink - gotta say: they went too far.
Davedelibato.com - better
The Brown Corporation - ridiculous product, great website
Get early access to the actual host server and work from there as soon as possible. Don’t get it all dialed in, only to discover the version of PHP or MySQL on their box is different and difficult to change. Confirm the Apache install, how to set up DBs, permissions, where files go, etc.
Iterate with a backup plan. Use a development environment, staging environment and live environment. Be ready to fall back if bug fixes cause more bugs. Suggestion: Use a system like TRAC & SUBVERSION or REDMINE for bugs and version control.
But know it will happen. It’s inevitable. One “simple” change may have a cascade effect. Never assume it’ll be a no brainer and allow adequate time.
I don’t care if you coded your mom’s blog in four hours or did a whole website in a weekend. They both suck and the kind of web you WANT to be working on takes time. Fight for it and convince your clients to give you time to percolate as well as time to research, plan, organize, document, write good code and TEST.
For god’s sake, check it on various platforms and browsers. Use your friends as guinea pigs and watch them interact with the site! (Yaaway example - developers in Atlanta hadn’t tested on Mac yet)
Use sites like www.browsercam.com or www.browsershots.com.
Facilitate clear indications of where a user is in the site. Not everyone knows a logo is the home link! Provide a home button. And avoid “mystery meat” navigation.
Example of baffling navigation design. Duff may be able to make good cakes, but his website is confusing.
If pop ups, new windows on click or browser resizes are so great, why do all the latest browsers block them? No pop ups! And I’ll open a link in a new page or make the browser fullscreen if I want, thank you.
Have you read Bill Moggridge’s Designing Interactions yet? Do it today.
Don’t assume clients—or even designers or art directors—will be able to envision what you are talking about: show them. Send proofs in situ so they see it live, online in a browser (www.industrialbrand.com/CLIENTS/yaaway)
We’ll see more of this later.
Avoid using Lorem Ipsum as placeholder text in favour of designing around real content. Using Lorem Ipsum isn’t creating a *real* user experience and may be forgotten, running the risk of launching a website filled with gibberish.
No joke folks. This is a friend’s site and it has been live for two years with Lorem Ipsum for his bio copy. How easy would it have been to put a real bio here. Dumb.
NOTE also the URL http://new.qbprint.ca/node/13 - this really should have been a human readable permalink, such as http://new.qbprint.ca/behind_qb.
Straight up web safe fonts using CSS baby. Small headline = font-family: Gill Sans, Verdana; Large Headline = font-family: times, Times New Roman, times-roman, georgia, serif;
Bad font choices, small type or low contrast are common boo boos. Don’t make this mistake—make your text easy to read. If it doesn’t survive the squint test, fix it. And learn the basics of typesetting—they are just as relevant here as they are in print. For example, long line lengths cause eye strain and decrease readability.
Wanna go to Game Aquarium? I don’t.
How about the old Microsoft site? Classic low contrast woes.
If your site design doesn’t afford room for large images, but products or photos are key communicators, then build in the functionality to enlarge the images so the viewer can take a closer look. We often use Lightbox JS, which is a simple, unobtrusive script used to overlay images on the current page. http://www.huddletogether.com/projects/lightbox/
meja.ca - required larger images of their projects, so we used Lightbox
Davedelibato.com - another way of handling larger images using thumbnails in WP linked to the full sized images.
I don’t need a website that plays music, thanks. And if you MUST have a video auto-play on the site, set it up to do it on first visit and not repeat visits via cookies. If the site has a mute button or “skip” button, something is likely wrong.
VFS.com - an acceptable exception? Auto play video first visit only.
Don’t create sites with a “News” sections if it’s not really needed, your client isn’t committed to keeping it fresh or they aren’t able to update the page. There’s a new thing called CMS, learn how to use one.
Especially if you’re providing coding for a design firm. How do they work? Do they need working files? Are there confidentiality issues? Are you even allowed to take credit for the work you did?
Don’t try to do everything—regardless of how tempting it is to get monthly fees for hosting a site. The responsibility will yours to keep it up.
Old school works. Don’t follow what everyone else is doing and avoid trying to fix what ain’t broke. And don’t try to be an innovator (yet anyway). There are so many variables and technical limitations—be flexible and work within the basics. If you want people to know it’s a link, then use hinted text and make it obvious it’s clickable (i.e coloured & underlined).
Capstone Publishing - don’t try to re-invent navigation. You’ll just confuse people.
If you assume everyone has a web connection as fast as yours, you’re a fool. The majority of the world is still on slow connections like dial up. So strive to create tiny website to reduce load time. And use intelligent techniques such as dynamically loading menu/nav items using PHP so you have only one file to update.
Browsing all the wonderful “best of” lists and award-winners is great, but consider looking at BAD websites and learn from them.
Check out www.webpagesthatsuck.com
Lovely code is gorgeous. And well commented and organized code is much easier to understand and update when you (or someone else) needs to make changes six months later.
Ryan Ilg - Langara EMD Graduate
Super clean code.
Get off your computer and consider the problem as a spatial one.
Grab your sharpie and draw. Plan. Consider the content and space with client objectives and audience needs in mind.
All the previous stuff should be obvious to you. If not, you have some work ahead of you. If I had my way I’d make you draw grids and wireframes each class for an entire term before turning you loose on any code.
It’s all about usability folks. Web is not just pretty graphics or cool tricks. Your final templates should be pixel-for-pixel swaps for your carefully planned wireframes.
Then why are you laying out web pages in Adobe Illustrator? We’re striving for precise pixels here folks—use Photoshop or Fireworks. This is huge.
I disagree that backgrounds should be unnoticeable. While primarily a framing element behind text and images, I think backgrounds are a powerful way to add tone, emotion and style to a website when used with care and with reserve. Add to that some consistent graphics element from page to page and you can create a “sense of place”. But for god sack, avoid using image backgrounds.
Dave Shea (CSS Zen Garden) - excellent use of subtle backgrounds
Dave Shea (CSS Zen Garden) - excellent use of subtle backgrounds
Learn shortcuts. Find resources and tools. Create a methodology that allows you to differentiate yourself as a fast, accurate and dependable developer. And start collecting code, images, objects, etc so you can quickly solve repeat challenges in future. Start using tools such as the Coda, Developer’s Toolbar, Firebug, ColourPicker and XScope.
Validate that beautiful code you developed so quickly!
Anyone want to test their website? :-)
Use simple language and spell check you scallywags! There’s nothing worse—from as branding perspective—than typos and bad grammar. Most good code editors, such as TextMate for example, have built in spell checking.
Yup. It’s true. And should be obvious to you. If you’d like to have a career in the interactive media arts, you have to think mobile and design and develop for the fourth screen.
Who’s ordering a new iPhone now that Rogers is carrying them legitimately?
The web needs good designers more than good coders. Learn the basics of composition, colour, layout, grids, typography, etc. Bad design is still bad, regardless how sweet the back end is. Remember the “form follows function” lesson? Common traits of good websites:
• Simple layout with plenty of whitespace
• Centred orientation and scalable
• Designed around real content (not content created to fill a page a design)
• Animation used sparingly
• Soft, neutral backgrounds
• Strong colours and cutesy icons used sparingly (Web 2.0)
• Easy to read text (not too small)
Veer - top of their game really
Manducatis.com - wow
What can you teach me? What did I miss? Or what can I clarify for you?