Web Design Tutorials

Web Design Layout Coding Theory Compatibility

Web Design 101: What Not to Do
Before you even think about making a website, there are some things you should know to avoid. We apologize in advance for any disturbing images you are about to see. Let these sites serve as a cautionary tale. Do the world a favor and don't repeat their mistakes.

http://www.rogerart.com/

http://ronoslund.com/

http://www.lingscars.com/

http://www.galaxion.com/

Those website designs are pretty bad. Here's some more web monstrosities that are not recommended for the faint of heart. Some of these can literally trigger seizures
http://www.datadial.net/blog/website-fail-30-web-designs-that-will-hurt-your-eyes/

http://www.webpagesthatsuck.com/

https://www.hover.com/blog/10-things-that-used-to-be-on-every-website-that-you-totally-forgot-about/

HTML, CSS, and JavaScript: An Introduction to Web Design Code
Code languages are made up keyword instruction syntax for computers. If you know the syntax, you can program using just about any text editing software, such as Notepad.

HTML is the most rudimentary web code language. If you were around during the 1990's internet craze, you probably know what HTML looks like and have fond memories of Internet Explorer, Ask Jeeves, and painfully slow AOL dialup speed. The internet was originally developed as a simple tool for sharing scientific research papers, so aesthetics didn't play a major factor into the transferral of information. HTML expanded the way information could be visually displayed online, but it could still only support the very basics of what makes a website a website: Hyperlinks, images, gifs, backgrounds, color, page positioning, and eventually embedded video.

The World Wide Web has changed a bit since then. As a designer, it's no longer enough to just create a standard blocky HTML website: people expect a website to look good while conveying information. All the cool modern websites today use sleek interfaces and interactive features that wouldn't be possible using HTML or even the updated HTML 5 syntax. To create roll-down menus, comments sections, animations, lightboxes, widgets, or image viewers requires JavaScript and jQuery plugins, which are a little more complicated form of code used to modify HTML. JavaScript is primarily used to create responsive design and dynamic elements on a page. jQuery is an advanced type of Javascript that uses fewer lines of code to do the same things.

CSS is short for Cascading Style Sheet. It is a plugin language that is used in conjunction with HTML to make it easier to adjust the formatting of your website. If you have 50 pages making up your site, you don't want to have to try and alter every single page if you decide you don't like the way the font looks. A CSS style sheet will allow you to make the change once and it will automatically apply to every page. CSS is a web designer's friend.

There are a lot of other advanced web programming languages like PHP, Ruby on Rails, and Bootstrap, but knowing the three main types is enough to get started.

Red Website Design: The Evolution of wb Design Trends

Creating Mockups and Wireframes
Whether coding a website from scratch or using templates, you will need to first plan out the layout of the page and site map. A good place to start is to determine what type of website you want to make. Will it be an informal blog with lots of text, a business store, a portfolio site with images and videos, or a purely experimental website? Content is king. Knowing what the content of the site will guide the way you create the site.

Create a site map hierarchy that is easy to navigate by making the most important pages stand out from the third or fourth tier pages. Use a grid as a guideline for layout. Pick out a color scheme and fonts.

CharliMarieTV: How to wireframe a Website

Red Website Design: Website Guidelines

Julian Hansen

Choosing a Font
There are a lot of important decisions to make as an adult. Post-college careers, buying a house, possibly finding a significant other to spend the rest of your life with. But the most important decision of your entire life may be deciding which font to use on your website.

Before you go out and hastily download the entire library of Google Fonts just because they're free and have cool names like Critical Mass and Sprinkleberry-McAwesomeLollipop, calm down and take a step back. There are some basic guidelines to consider first.

It takes a good eye to determine what typography will work best with the content. Even professional typographers struggle with finding the right font when there are so many options available. Font styles can convey the wrong impression if the font doesn't match the overall theme of the web page. Curly text on a formal business website probably won't seem very professional. If the website is an artistic portfolio site, a boring Times New Roman font might not seem very creative or unique.

In general, you only want to use about two different types of font on a design project to retain a cohesive design. One will serve as the heading font, the other for body text. Mixing twenty fonts on one page will not look as awesome as it sounds, and it just creates an incoherent mess of clashing styles. Legibility is important, so even though there are thousands of fun graffiti and handwriting scripts for free, they won't work very well for anything more than titles or novelty. Web designers can test out possible fonts using Lorem Ipsum generators to see how a font looks on a webpage.

Hipster Lorem Ipsum Generator

Gangsta Lorem Ipsum Generator

Fillerati Lorem Ipsum Generator

Divs, Classes, and Containers
Divs are used to position blocks of content on a page. Classes are used to name divs and apply custom attributes. Containers are divs that are used to hold other divs inside them, generally for the purpose of holding multiple columns

Containers are also integral to creating Jello layout, which is a flexible compromise between static site layout and complicated responsive design

Content Spacing
Margins determine the amount of spacing outside the frame. Padding affects the spacing inside the frame. Padding and margins count as taking up space, so if you have a 5% margin and a 5% padding with no border, then your content div width should be 80% of the size of the screen in order to equal a 100% width. A horizontal scroll bar will appear on the browser if your spacing exceeds 100%.

Hyperlinks and Images
Hyperlinks and images are pretty straightforward. They can also be set up so that clicking on an image will link to another page.

W3Schools: Hyperlink Tag

W3Schools: Image Tag

Textures or images are not displaying
This is a common issue that is usually the result of files not being in the correct source folder. Check that they haven't been accidentally moved. Spelling, capitalization, and mismatched file types can also cause problems. Misspelled addresses and broken links happen a lot, so always double check that hyperlinks are working

How do I place text next to an image?
This is a lot trickier than it should be, but basically what you do is create a set width container div, and then create two divs named left_column and right_column. Float the left column to the left, and the right column to the right. Put both column divs inside the container div, then place a clear function after the container. Floats should always have a clear: both; div placed after them to prevent the float from affecting the other content. If everything works out, you should have a functioning nested div with text to one side.

W3Schools: Float and Clear

Liz Climo http://lizclimo.tumblr.com/

My boss found out I'm a New Media major and wants me to make a website. It must have a tiling background of narwhals.
Clients often make strange requests for designs. It is generally futile to attempt convincing them to let the designer do his or her job making a good website, so just put this code in the body style section of your page header: background-image: url(images_folder/narwhals_are_awesome.gif). Then cross your fingers and hope for a nice pay raise.

How do I make image and text rollovers?
Create cool effects when your mouse pointer is positioned over a hyperlink. Gifs can also be used, but use these in moderation as nothing will drag your website down to the ninth circle of bad web design hell faster than an overabundance of flashing gifs.

Vox: The Business of GIFs: Then and Now

Helplogger: Rollover Image

W3Schools: Selection Hover

Embedding Video
Videos can be fairly complicated to get working across various browsers. HTML 5 video default settings aren't fully supported by Safari or Opera, and embedded YouTube videos have to have special iframe containers set up to keep the dimensions from getting squashed when resizing the browser window. Luckily, there's a super easy solution. The website links below automatically create the code to embed videos responsively. One thing to keep in mind is that lots of embedded videos on a page will take up a lot of bandwidth and may cause the page to load slowly.

http://embedresponsively.com/

http://embedshit.com/

Images take forever to load on my website
Use Photoshop to scale images down to a smaller size. Ideally web images should be less than a MB. It's best to avoid anything close to 3000 px. Also, make sure you aren't using Internet Explorer or a slow wireless network. For free online compression tools, we recommend using TinyPNG.

https://tinypng.com/

Image Randomizer Algorithm
This trick involves some computer science programming experience, but it all boils down to an array that selects one seed from a collection of images. Every time a page is refreshed, it generates a different image. If you aren't great at programming, there are some sites that offer simple free randomization code that can be copy and pasted into the HTML.

Website Navigation
If you get feedback saying you need to improve the menu navigation, it generally means your menu system is too complicated. A caveman should be able to figure out how to browse through the entire site at a glance. If it takes more five clicks to get to a certain page, then you have a navigation issue that is going to frustrate or confuse certain people trying to browse your site. Find some human guinea pigs to test out your site beforehand to avoid these kinds of complaints.

What's the big deal with tables? Some people seem to like them, others hate them.
Some tutorials online will recommend using tables to format the layout of a website. This is supposdly an easy alternative to messing with divs, but it is frowned upon by most professionals. Tables are meant to be used for holding data, not for outlining your website. Using a table in this manner may serve as a quick fix in some situations, but it is improper coding syntax and can lead to bigger problems down the road if you need to reformat the site design. Divs and CSS style sheets are the way to go, because even though they may initially seem like a hassle to deal with, they make adusting site layout less of a headache.

Problems with Content layout and positioning
Basic layout problems can generally be fixed by creating containers, columns, and nested divs that are positioned using jello alignment. Try not to mix up absolute, relative, and fixed positioning. % and em are used for responsive design, px is for static sites. Make sure that multiple div columns only have a combined width percentage total of 100. Setting min and max widths can sometimes help.

Any first attempt scratch html site will inevitably have a few bugs to work out. Thank goodness prebuilt web templates exist. These templates provide a framework that takes care of most of the responsive layout for you, allowing the designer to focus time and energy on more important matters.

About Tech: Absolute vs. Relative - Explaining CSS Positioning

Thee Design: Pricing difference between Templates vs Custom built websites

Smashing Magazine: Fixed, Fluid, and Elastic Layout

Responsive web design
In this wonderful age of technology, people can use the internet on not only computers, but also tablets and tiny little phones. Unfortunately, this makes the web designer's job much harder, as it is expected that web designs work across multiple platforms and sizes. Static sites are easier to make and are more stable and reliable, but they don't look good on small mobile screens. This is why responsive design is now the modern standard. Responsive web design differs from static sites in that when a browser window scales up or down, the content divs shift around and reposition to better fit the screen. Coding responsive design from scratch is difficult and time consuming, which is why most professional designers prefer starting off with prebuilt web templates that have an existing responsive framework already in place. When they do code a unique responsive site, it usually only has a few pages.

Smashing Magazine: Fixes for Fluid Layouts

UI/ UX Design
User interface designers comprise the upper echelons of web design. UI design differs from regular web design in that it focuses exclusively on interactive elements. UI designers create login menus, profile pages, password screens, and multiple page architecture.

Mike Locke: How to Position Yourself as a UI/UX Designer

UX Mastery: Get Started in UX

SEM and SEO
Search Engine Marketing and Search Engine Optimization concern the way in which a search engine ranks the relevance of web pages in search results. In general, you want your website to easily be found online rather than lost to the dark netherworld regions of the deep web on page 9,287 of a Google search. There are good strategies to increasing traffic to your site, but there are also cheats and clickbait methods that are not advised.

Redevolution: What is SEO?

Domain Names
Eventually you will want to make your website available to the world online. To do this, you will need to find an affordable web host and a domain name.

Web hosts charge monthly or annual rates. $100 a year seems to be the average annual price. If you don't renew your website with payments, your domain name may expire, and someone else could register a website claiming your former address.

For portfolio sites, you generally want to have an independent domain name (yourname.com) linking to any other social media outlets like Behance, Instagram, or Facebook account. You don't want to keep default websites urls like those created by template site builders (.wordpress or .weebly.) The domain name should be short, easy to remember, and include keywords relevant to your site.

TheSiteWizard: Can I Recover My Files From a Website Discontinued a Long Time Ago?

Copyright, Trademarks, and Legal
It is advisable to register websites to copyright original content. Copyright law applies automatically to intellectual property of US citizens, so it isn't the end of the world if you don't officially register. However, a copyright or trademark license generally adds the extra assurance of a irrefutable legal safety net in court disputes, which basically means you can sue for more settlement money from anyone who attempts to purposefully steal work.

If your site uses cookies, stores personal user information, or requires other privacy disclaimers, it is a standard practice to put this information in the page footer. A site map and terms of use are also recommended for websites with more than five pages.

Support
A lot of people who want to create a website don't realize how much time and work is actually required to keep it running. For a web designer, the job ends once the site is made available online and the paycheck is in pocket. It's not the designer's responsibility to make sure the website owner posts updates and maintains things regularly. Many people find out the hard way that they don't actually have the time, patience, or the motivation to devote to a site and all the various social media outlets on the side. The option of hiring a full-time support team isnt really an option for most individuals and small businesses, so the website remains stagnant until the web domain eventually expires.

Portfolio sites that are neglected and never updated with new work tend not to attract the same amount of interest as sites where owners post weekly, if not daily. Before you create a website that you will maybe show to your friends once and never look at again, be aware that keeping a site running as a hobby for even just a few years will require some commitment. Even updating things once a month is better than not updating at all.

Advanced Tutorials- Hopefully Coming Soon
Web Design
Float
Sticky Footer
Optimizing loading time and Browser Compatibility
Javascript
Site Map
Lightboxes
Search Bar, Tags
CMO
DSP vs. SSP
Ad Exchanges
Wordpress
Other languages: PHP, Bootstrap, Ruby on Rails, XML