Real World Web Design

What Pokémon Go can teach coders

July 24, 2016

Hi!

In this video, I use the fantabulous example of Pokémon Go, to illustrate key app development principles. Here you go:

Thanks!

Stefan Mischook
Killersites.com

January 22, 2016

great-aunt

Hi,

Killersites.com will be officially 20 yrs old this March. This makes it one of the first web design, and code training sites on the Web!

What’s it like to clean up a 20yr old website?

Cleaning up a 20yr old web site, is like cleaning up your (recently deceased) 93yr old aunt’s attic – it’s full of old junk!

Since Killersites.com falls into that ‘dead old aunt’s attic’ category, whenever I do a cleanup, I just do what Microsoft does with each new version of Office, I just create a new layer on top.

… Why do you think Office has gone from a hundreds megs, to a few gigs?

This reminds us why using a CMS makes sense:

These days, for content heavy sites, I would never NOT use a CMS. Besides being able to easily add new content to your site, a CMS will make it MUCH easier to keep the look and the feel of the website up to date. Just change the visual template (WordPress calls these ‘themes’,) and your whole site has the new look, and any new header and footer text you need.

… CMS is short for: content management system.

January 14, 2016

coders-lower-back-pain

Hi,

Coders can get lower back pain because:

They sit all day.
They don’t exercise.
They don’t stretch.

How to end lower back pain:

First, do the opposite of what is listed above: don’t sit all day, take breaks, walk around, and do some hamstring stretches. Here’s the list of what to do to end lower back pain:

May 8, 2015

I decided recently to dig into the Killersites website (on the directory level,) to see what I could clean up. It is one of the oldest web teaching sites in the world, it’s been online for over 19yrs now, and so it has had many changes over that time.

After 19yrs, you find yourself with a website directory structure that is deep and riddled with many nooks and crannies. So I went on the hunt and found some bugs down deep inside.

… 4-5 hrs later, I was able to clean house. I think! In the process, I gave Killersites a much needed spring-cleaning, if you will. I got rid of a bunch of pages and sections that might have some historical/sentimental value to me, but was filled with dated and irrelevant information. Besides, these are spots that hackers can leave their smelly eggs behind!

Some words of advice:

Keep your sites clean in terms of the directory structure.
Use a consistent naming convention for files and directories. This will make easier for you to spot malicious planted code.
Delete your cgi-bin if you are not using it. Malicious code can be dropped into those.
Don’t use PHP pages unless your site absolutely needs it. Each new PHP page is a potential attack point.
Once your site is up and running where you want it to be, create a clean copy of it on your computer and zip it. This backup might come in handy if you need to wipe out an infected site. Of course, backups after each change is a must do.

Stefan
Killersites.com

December 11, 2014

Hi,

I started building websites in 1994, making 2015Â myÂ 21st year of web design. I’ve reached the web design drinking age!

In that time, much has changed in the web design world – both in terms of the technology and the way we build websites.

… It may be obvious to some of you, that the advancement in web design technology (and the Web itself) plays a major role with the web design conventions that come about. So what’s going to happen in 2015?

Web Design in 2015

The last big shift in web design happened a few years ago with the rise of HTML5 and the death of Flash. Another trend that continues to grow is the rise of the awareness of code.Â Today more than ever, people realize that all web professionals should learn to code. This movement started in the early 2000’s but it just keeps accelerating where code awareness is even being recognized for its’ importance outside of the web design and development fields – even elementary, middle and high schools are adopting coding as part of curriculum!

… I’ve even developed a system (studioweb.com) that makes teaching code easy, and is now being used by over 1500 schools.

TheÂ top 3 Web Design Tech Trends for 2015

Ok, enough with the preamble, what are the top 3 trends in web design for 2015:

Code is still king. Learn to code if you haven’t.
Web Frameworks. In modern web design, knowing how to use Bootstrap and Jquery are almost essential.
HTML5 and CSS3. As the last of the old crappy browsers disappear, the importance of HTML5 and CSS3 continues to grow. If I had to pick one thingÂ in HTML5/CSS3 to learn, it would be CSS3 web fonts.

In another article I will go over the top 3 design trends in web design.

Bye for now,

Stefan Mischook
killersites.com

August 25, 2014

I like to start my articles with the conclusion – saves you time:

Dreamweaver is not relevant in modern web design. Why?

To make good websites, you need to understand the code behind the sites. You need to learn code.
Dreamweaver does have a code editor but there are many more capable code editors out there that are free or at least much cheaper than Dreamweaver.
Because you need to understand code, Dreamweaver’s point-n-click tools are becoming relics of the 1990’s when web code was so bad, that tools like Dreamweaver were a godsend.
The code behind web sites (html, css, javaScript) is so well structured now, and so much more powerful (HTML5 and CSS3 rock!) that you can easily put out great websites with relatively little coding – as compared to what is was like in the past.

Let’s elaborate on the last point. Web design in the past, when the languages (HTML, CSS) were not as mature, the process of coding a website was rote; it was repetitious and mechanical. You had a lot of crappy tinkering to do, just to get a website up. In that environment, tools like Dreamweaver were welcome because they wrote the code for you.

These days, with the much better browsers (that read and process code properly) combined with highly effective web design frameworks like Twitter Bootstrap and JQuery, apps that try to hide the code from you (like Dreamweaver) are not that useful. In fact, they are counter productive because often times, the code they generate can get in the way of building a clean effective website or web application – it’s just too thick.

Browser Developer Tools Put another Nail in Dreamweaver’s Coffin

All the modern web browsers have a very powerful set of developer tools that allow you to see exactly what is going on in your pages codewise; you can even change (for example) your CSS on the fly and see how it effects the page without touching your underlying code. This makes for ultra fast development.

Dreamweaver has these sort of tools but you have to be in Dreamweaver to use them and they are not necessarily 100% accurate in terms of what the web browsers will display – you might as well test in the web browser since people visit sites with web browsers and not Dreamweaver!

Conclusion

There is nothing wrong with Dreamweaver if you largely ignore the point and click tools, and stick to the code editor. But if you do that, why bother forking out the big money for Dreamweaver, when you can find more effectively code editors like Sublime Text or Notepadd++ for free or for much much cheaper than Dreamweaver?

Stefan Mischook
Studioweb.com

June 16, 2014

design skills

Hi,

So I’ve cracked out my designers brush (mouse,) and started to work on a new website that we are setting up to log our adventures in Swift programming – Apple’s new programming language for both iOS and Mac OSX.

The Web Design Process is Iterative

You can watch the video below … but here’s the summary:

design/layout ideas should be explored by creating many versions and variations as quickly as possible.
don’t try to fine-tune your layouts when you are just working on basic themes and ideas.
once you’ve picked your basic style, then you can get into polishing it up.

Bonus tip: you want to leverage web frameworks like Twitter Bootstrap – it will make your life as a web designer or developer about 356.23 times easier!

Check out the video:

I hope that helps,

Stefan Mischook
killerSites.com

June 5, 2014

Hi,

Web development can be an exciting game but it is also all-consuming – you cannot casually code. You cannot casually write good software while listening to tunes. You must be 100% there or your code will suck. Burnt-out developers are not uncommon … and I was one.

How to Burn Yourself Out

I loved to write software, it was something I would do even on Friday nights! It sounds really bad now but at the time, exploring a new Java library or building out a new module to some app, was exciting to me. The weekdays were for writing commercial code and the weekend was for playing with new code.

I still remember seeing the first members on my dating site posting profiles and sending messages. It was great fun. You start with few messages here and there being exchanged, then hundreds and (to my amazement) soon thousands!

… I eventually shuttered that growing dating site because I was not interested in making big money with it; it was just a hobby site for me, a vehicle to learn with. Maybe I should have left it running!? I think all the swingers posting profiles on there made me shut it down … not sure now, it’s been 15yrs.

I could tell you about many other similar projects/sites … but I think you get the idea.

The burnout Formula

You get burnt-out when you go too deep, too long and too fast into something. After years of code, code and more code … I was burnt. So for several years after, I did everything/anything but technology. It was sometimes almost painful for me to even pay attention to KillerSites, KillerPHP or any of the other sites/communities/apps I developed. The people were great but I just didn’t care what was going on in the tech world.

Interest slowly builds again

I don’t know why but starting a few years ago, my interest in technology slowly started coming back. Slowly. Psychology is a strange thing and any number of hidden variables can play into your mood. So for whatever reason(s), my interest is coming back and for the first time in years, I find myself learning a new language … it just seems like fun to me again.

Stefan Mischook
Killersites.com

February 20, 2014

Hi!

I’ve been building websites since 1994 … that’s makes it 20 yrs now! Anyway, it only takes me 9 minutes of video to give you my perspective … I think young nerdlings might find useful. Check it out:

Stefan
Studioweb.com

January 7, 2014

design skills

Hi,

Let’s start off this article with the conclusion – web design in 2014:

Code – learn more code: HTML, CSS, HTML5, CSS3, PHP and JavaScript.
Usability – learn to make websites easier to navigate.
Simplification of design.

Code:

In the last few years, the web design world (finally) totally embraced the importance of understanding code. The move in that direction started back during the web-standards evangelizing days … in about 2002-2003. There was resistance, but my feel for it now, is that the vast majority of web designers accept the fact that you can’t just rely on point-and-click web visual web design tools, if you want to build sites on a professional level.

… Yes, if you just need to build a brochure website that promotes your raspberry muffins, you can use simple website builders and a template. But if you are building a website that will have any depth to it, code is king and is required. Why? In a nutshell: control and optimization.

Usability:

Usability is as much as art as it is a science because each site requires it’s own innovation (if you will) when comes to making a website easy to use. That said, there are simple conventions that people come to expect:

Top left logo is always a link to the homepage.
Navigation is found at the top and footer of the pages.
Breadcrumb navigation is fantastic for deep sites.

I would argue that the hardest part of building a website is in making it usable. It also probably the most important aspect of any website because if a site is too hard to navigate, no one will use it.

Simplification of design

This trend towards simpler minimal design I believe is a reflection of the growing understanding in the importance of usability. Usability is hard enough, but making a complex visual design easy to use it mega hard! Simple design means:

More whitespace – more ‘breathing room’ on the page.
Use larger sans serif fonts – less fancy.
Less images, but larger and higher quality.

Putting the money where my mouth is, we kept all this in mind when building the StudioWeb e-learning website.

Thanks,

Stefan Mischook
killerSites.com

KillerSites Blog