Real World Web Design
December 11, 2014
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,
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.
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!
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?
June 16, 2014
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,
June 5, 2014
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.
February 20, 2014
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:
January 7, 2014
Let’s start off this article with the conclusion – web design in 2014:
- Usability – learn to make websites easier to navigate.
- Simplification of design.
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 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.
November 27, 2013
I get a lot of questions from people wanting to build a web based business. I’m not talking about becoming a web designer or a web programmer, I am talking about building a website and then making money off it.
Sometimes, people just want to put up articles and then sell other peoples products (through affiliate programs) other times they simply want to put up a bunch of ads.
The more ambitious want to sell a service or a product. This blog post is going to be about how to do that … in a nutshell.
What do you need to know (and what to do,) to set up a web based business?
Well, before I get into it, I should mention the stay at home mom who contacted me recently. She had an idea for a website and her goal was to generate ad revenue and sell memberships/access to premium content. She was asking a bunch of questions about setting up a forum, an e-commerce system etc …
So the first thing I ask when people come to me with these questions, is if they know anything about building websites? If you don’t know much, you will either:
- Need to hire someone.
- Or, learn some web skills.
Since this mom in question had no money to pay someone to build her site, she was going to have to learn. Before I get into what you have to learn, when you are a do-it-yourself web entrepreneur, let’s quickly talk about NOT ‘putting the cart before the horse’.
October 15, 2013
Building a website can be a daunting process … there is a lot to do! And sometimes, itâ€™s hard to figure out where to start!
No worries though, after nearly 20 yrs experience, Iâ€™ve figured it out for you!
1. Diagram the site:
Create a hierarchical map of the website. This will allow you to properly plan out all the pages and as an added bonus, the main menu for the website becomes easy to map out.
No need to use any special software … just a pen and paper will do! Draw boxes (that represent web pages) and connect them with lines that represent the links between pages.
2. Create the Content:
Write out the content (text only) for each page in the site diagram. Be sure to include sub headings and sections on the pages. You can use any simple text editor (MS Word, Apple Pages etc …) to do this.
Once you have the websites content in place, itâ€™s time to look at how you can rearrange the order/placement of page elements … to make it easier for people to find things.
Hint: logical menus can play a big role in this. So again, the quickest way to get this going is to draw out your pages on paper.
With the first three steps complete, you are ready to consider the design/look of the site. Though the design phase of the process is largely about making your site look good, a lot of consideration for usability has to be kept in mind – be sure that the design does NOT get in the way of how easy the site is to navigate.
In the PDF attached to this blog post I’ve included a couple of images that I was too lazy to link embed directly here.
If you want to learn much more about web design, you may want to check out my popular training package: Complete Web Designer
October 8, 2013
In the last year or so, Google has basically turned the whole SEO industry on its’ head: once coveted ‘techniques’ and strategies that permeated the SEO industry, actually went from being a benefit to websites to sometimes being the cause of their doom.
… Many, many highly ‘optimized’ sites got taken to the woodshed (and then behind the woodshed!) because of SEO!
Why did the vast majority of SEO fail?
In a nutshell: most SEO techniques gamed the system.
Rather than structuring websites (and their web marketing efforts) in a way that the Web wants, most SEO firms went the route of trying to exploit weaknesses in the search engines.
… Any system based on loopholes, will eventually get wrecked as those holes are filled. Common SEO practices suffered the same fate.
Not all sites got killed – why?
Some people realized a long time ago, that SEO practices and strategies based on loopholes, was not the way to go. A very few forward thinking web masters, adopted a long term view of SEO and web marketing practices and as such, the avoided the trashing and thrashing the others got.
… If you want to properly promote your site, you need to understand how to be forward thinking. That what’s I’ve always practiced at KillerSites and that’s why all our sites still rank well in the engines …. for well over a decade now.
If you have any questions, you can reach me at: stefan@killerSites.com
January 14, 2013
One of the things that I see time and time again, is a (once hot) technology … fall into a niche.
This time, I think it is native iOS programming that will slowly fade away. Why?
Here are my top five reason why native iOS programming will become niche