[Freebook] Basic Principles of Web Design & Development

[morganjp]

There's a lot of budding designers, and developers from the web sector on MC-Market whom I continuously see making simple mistakes which would get you lynched in industry.
Here I thought I'd outline a few of the simple, yet easily made faults that some people may have let go unnoticed.


Section Un
Design Principles

1. Image Downscaling
   
   It's a common misconception that a higher resolution image downscaled provides better quality. Perhaps you've been provided with a logo that is larger than displayed on a particular website. The correct way to go about including the image is to downscale it to the resolution that it is displayed at on the website.
   
   For example, say I have a logo which is 400x220 pixels in size. However the space it occupies on my website is only 100x55 pixels in size, the correct and most efficient method of displaying it is to resize (downscale) the original image to the size it is being displayed on my page.
   
   
   Spoiler: Why is image downscaling important? (Math Warning)

   This is done to minimize the amount of data your webpage takes up. The best way to look at it is by the total number of pixels. An image which is 400 pixels wide by 220 pixels high contains a total of 88,000 pixels (400*220).
   Whereas an image 100 pixels wide and only 55 high contains a total of 5,500 pixels.
   That means by downscaling your images, your users are only loading 5,500 pixels as opposed to 88,000 pixels (that's a whole 82,500 pixels which were loaded beforehand, but not necessarily needed). This means that not only will you site load faster, but it will have a much smaller footprint on a users bandwidth usage (especially those on a limited mobile data connection).
   
   
   Spoiler: How is image downscaling done?

   This can be done easily, especially if you are proficient with software such as Adobe Photoshop. However if you don't happen to possess any image editing software - there are many free sites which allow you to easily resize an image. I would personally recommend using http://imageresize.org/ due to it's easy user interface.
   
   
   Spoiler: Important Notes to Remember

   Images should never be upscaled using this method. If you need to upscale an image, simply use browser upscaling by increasing the pixel size in CSS or HTML.
   
   Image downscaling also doesn't apply to vector images (SVG).
   As it will make zero difference in network speeds.
   
   
2. External CDNs
   
   Now, first off I should probably explain what a CDN is. CDN stands for Content Delivery Network, and it is essentially when someone else hosts specific content for your site. Below I'm going to put three different scenarios as to why you may want to use a CDN.
   
   
   Spoiler: Scenario 1 - Speed

   Scenario 1 - Speed
   Let's say you host your site on a small VPS with a slow uplink (connection speed). You may want to host some of your larger content (ie. images etc.) with someone who has a much faster connection speed than you to load your site faster.
   Spoiler: Scenario 2 - Bandwidth

   Scenario 2 - Bandwidth
   You host your content on a reasonably fast server, with a decent uplink. However, you only have 1GB of bandwidth each month. It may once again make sense to host your larger content (ie. images etc.) with someone who doesn't have bandwidth limits in order to prevent your server from being turned off or suspended.
   Spoiler: Scenario 3 - Global Outreach (Speed Mk II)

   Scenario 3 - Global Outreach (Speed Mk II)
   You host your content on a US based server, which is great for serving US-based users. However users from places such as Europe and Asia would suffer from slower loading times based on their ping. Utilizing a CDN in this scenario would allow you to deliver content to people from across the world much faster through a global CDN network.
   
   Using a CDN is as simple as signing up for Cloudflare at http://cloudflare.com/ and pointing your domain to their nameservers. They'll automatically setup and handle everything else in such a way that traffic to your site remain uninterrupted. This is also a great way to get a free, trusted, SSL certificate enabled on your site.
   
   However.
   There's a big nono when it comes to using CDNs, and that's utilizing services such as Imgur and Gyazo to host content for your site. Why? Because these services are not designed to be used as a content delivery network, and they specifically state that in their terms of service. This is just a one-way ticket to eventually be blacklisted from their service, especially if someone notices and decides to report you.
   
   Think it wont happen? Well, it happened with MC-Market. Imgur blacklisted MC-Market from embedding any Imgur images directly.
   
   
3. That's So Meta
   
   One thing that people often forget to include is their meta tags. Meta tags are pieces of code which declare certain information about your site, and are vital to ensuring that search engines and web spiders properly find and place your sites. Not only that, but they're super simple to add!
   
   
   Spoiler: Document Type

   Make sure that at the top of you document (above your <html> tag) you declare your document type (HTML) by putting this line there:
   

   <!DOCTYPE html>

   
   
   Spoiler: Description and Keywords

   At least ensure you always include these basic two meta tags. The first one you should include a basic description of the site. The second one you should include some simple keywords about the site.
   
   However - when doing this is it vitally important that you never include unrelated keywords, and that you don't include too many. This is called forced SEO, and doing this will end up get your site blacklisted from all major search engines.
   
   I'd recommend you include a maximum of 15 keywords based on the search terms you would like people to find your site with.
   

   <meta name="Description" content="Description">
   <meta name="Keywords" content="Keywords separated by spaces">

   
   
4. Obsolete Tags
   
   I'm sure we're all guilty of using the <marquee> one too many times for amusement. However that tag is incredible old and obsolete, or deprecated. You really shouldn't use deprecated tags, especially if you plan on creating HTML5 compliant websites, as using deprecated code within your site would immediately ruin your HTML5 compliance. A few common obsolete tags used include:
   
   

   <marquee> - use Javascript instead!
   <center> - use CSS instead! (text-align: center;)
   <dir> - use <ul> or <ol> instead!
   <s> - use CSS instead! (text-decoration: line-through;)
   <u> - use CSS instead! (text-decoration: underline;)

   
   
   
5. Wrap Your Tags
   
   A common error which has been pointed out to me several times is that people often forget to wrap common tags. For example, you need to contain your list item tags (<li>) tags within either a unordered list <ul> or ordered list <ol> tag!
   
   Example list:
   

   <ul>
       <li>Item one!
       <li>Item two!
       <li>Item three!
   </ul>

   
   
   
   Spoiler: HTML5 Compliance

   HTML5 doesn't require that list item tags (<li>) actually be closed. This is useful, especially when displaying them as CSS inline blocks in order to prevent unnecessary spacing between elements.

________________________________________________

Spoiler: Work In Progress. Please disregard for now.

Section Deux
Development Principles

This section mainly focuses on PHP development. And although some of these points may be valid for other languages, please keep in mind that they may not be "politically correct" for that particular language's syntax.

1. Global Declarations are Unnecessary
   
   By global declaration, I mean when a particular variable is accessible in every section of code. The most common example of this is when someone declares a database connection statement which is accessible in every section of code. I'll lay down a few example pages below.
   
   
   Spoiler: index.php

   <?php
      include 'database.php';
      session_start();
      if(isset($_SESSION['id'])){
         echo 'You\'re logged in!';
      } else {
         echo 'You\'re not logged in. Login <a href="login.php">here</a>';
      }
   ?>

   Yes, I'm well aware this code is terrible in every way, including unfiltered inputs. However remember that this guide is titled the Basic Principles and is mainly aimed towards newbies.
   Spoiler: login.php

   <?php
      include 'database.php';
      session_start();
      if(isset($_SESSION['id'])){
         header("location: index.php");
         exit();
       }
   
      if(isset($_POST['username'])){
         // Check if details are correct
         if(detailsarecorrect){
            // Redirect somewhere
         } else {
            echo 'The user '.$_POST['username'].'could not be found';
         }
      }

   Yes, I'm well aware this code is terrible in every way, including unfiltered inputs. However remember that this guide is titled the Basic Principles and is mainly aimed towards newbies.

 

[mvilcis]

I'm honestly not quite sure how this can be overlooked by beginners (and if there are that many beginners here to begin with). Like, how (and why) would a beginner go out and try to find AND USE <marquae> or some sort of another deprecated tag from HTML4 or something?

Also:

<meta name="keywords" content="...">

This piece of code is useless. I wish I could add a source but I can't because I'm a new user and MC-Market says I'm spamming. I linked to GitHub. Just wonderful.

Anyways, that one unnecessary bit could add up to a byte and eventually impact performance on slow connections.

 

[morganjp]

I'm honestly not quite sure how this can be overlooked by beginners (and if there are that many beginners here to begin with). Like, how (and why) would a beginner go out and try to find AND USE <marquae> or some sort of another deprecated tag from HTML4 or something?

I know several people who have learnt such tags from say friends at school or whatnot who show this cool scrolling text feature. It's more common than you think.

<meta name="keywords" content="...">

This piece of code is useless. I wish I could add a source but I can't because I'm a new user and MC-Market says I'm spamming. I linked to GitHub. Just wonderful.

Anyways, that one unnecessary bit could add up to a byte and eventually impact performance on slow connections.

To you perhaps, however it's common practice that meta tags such as these are included on webpages. Like I initially stated, I'm coming at this from an industry perspective rather than your average joe freelance developer. There are people who specifically judge your work, and performance based on the inclusion of such things. It sounds stupid, but it's unfortunately true.

 

[mattrick]

If designers are making mistakes like these, I really think they should strive to learn more rather than trying to sell their services. This is pretty basic stuff.

 

[morganjp]

If designers are making mistakes like these, I really think they should strive to learn more rather than trying to sell their services. This is pretty basic stuff.

Hence why the thread is titled Basic Principles, and I state that several times throughout the thread.[DOUBLEPOST=1473219776][/DOUBLEPOST]Also mattrick you'd be surprised how some supposedly experienced designers are guilty of making some of the errors I list above.

 

[Pazzword]

Hence why the thread is titled Basic Principles, and I state that several times throughout the thread.[DOUBLEPOST=1473219776][/DOUBLEPOST]Also mattrick you'd be surprised how some supposedly experienced designers are guilty of making some of the errors I list above.

Especially the center tag... Even Google (somehow) still uses it on their website (http://www.google.com/)