Page Size Optimization

Page size optimization means boosting a website’s speed and performance to the max. So switching from “About Us” to “Home” button will take one fifteenth 1/15 of a second instead of fifteen seconds. Finding the problem is the first step of optimizing a website.

Most slow websites consist of:

• Multiple CSS files
• Scripts
• Heavy images
• Third-party plugins
• Marketing tags
• Tracking tags

Use the list above as things not to do when making a website. Be aware of the content in the website and make sure its short and on the point for whatever purpose the website may serve.

Next step is to optimize code in CSS and JavaScript (JS) to erase any extra lines or even shortcuts to make it easier for the computer to process and display in shorter time allowing for better performance for the website.

Gzip compression is a powerful tool that can guarantee any website better speed and performance overall. Gzip compression cuts down the size of the requested resource by almost 90%. This creates a ton of space to add in more elements to websites like more images, icons, text, buttons, graphics, and videos!

Almost nothing looks pretty without an image. recent studies show that page sizes consist of 64% on average. Most times, images are added in high quality to make a website have a crisp design. However, high quality images take a heavy toll and ultimately slow down page size optimization. Luckily, there is image compression to minimize the loading time of a website. Another great contribution is the metadata added when a picture is taken like the aperture, shutter speed, iso, and geo information which should be removed as well.

Browser caching is another technique to improve page size optimization. Using the cached data allows it to not need to redownload the resource again. It reduces the load server and allows more space for graphics and other elements.

Lastly, web fonts are used to minimize space held in the text. Unfortunately, some browsers do not support it web fonts.  Web fonts can be attained from external resources along with CSS and JavaScript. When using custom fonts, it is best to use it locally.

To learn more about web performance and page size optimization click here.

To learn more about more direct instructions to improving your website click here.

Photo by Kirstyn Paynter on Unsplash

Bootstrap CSS

A bootstrap is a line of code that makes the framework for websites easier for developers. They are also used as templates for typography, buttons, tables, navigations, models, and several other functions. Bootstraps prevent repetition between projects, add consistency to design and code between projects and between developers, quickly and easily prototype new designs and ensures cross-browser compatibility. Another advantage of bootstraps is that they are responsive. This means that they adjust to whatever device is being viewed on like smartphones, tablets, laptops, and desktops. Ome way to get bootstraps to create a website is through the website getbootstrap.com. This website allows any web developer to get a bootstrap to include in their work.  These shortcuts also have pre-styled components like dropdowns, button groups, navigation bar, breadcrumbs, labels, badges, alerts, progress bar, and several others.

Essentially, bootstraps are shortcuts of code in HTML and CSS; instead of typing fifteen lines of code, it could be shortened to three with the power of the bootstrap! Here is an example of a bootstrap being used for accommodating to different electronic devices that are accessible to the internet.

When creating a page layout for websites it is essential to use the grid system which allows the creator to easily make a website with efficiency.

• “Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be immediate children of rows.
• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
• The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
• If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
• Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.”

These key points to starting a website are from the website itself that makes bootstraps, https://getbootstrap.com/docs/3.3/css/#overview.

Photo by Ryan Everett on Unsplash

Web Safe Colors

Web safe colors are colors that are supported by a majority of web browsers and virtually any operating system back when computers could only handle 256 colors. However only 216 colors out of the 256 were constant enough to be considered to as “web safe”.

  Nowadays, we don’t have to worry about using web safe colors because of how technology has greatly advanced. Monitors now support millions of colors. There may be a slight difference in color depending on what operating system and software is being used to display all the wonderful vibrant colors.

  CSS and HTML formats specifically allow for over sixteen million colors to be displayed without any distortion of lightness, saturation, or hue of the color. To break it down further the colors support 256 shades of red, 256 shades of green, 256 shades of blue, when combines make exactly 16,777,216.

  Most designers of web determine colors by hex codes. Hexadecimal notation is a six digit/alphabetical code that when is typed in Adobe software produces a specific color. For example, the hexadecimal notation for magenta is #ff0ff. Or if you want a darker shade of magenta just type in the code #8b008b. Another helpful guide to finding the perfect color is RGB notation. This method functions by adding and/or removing the colors red, green, and blue. Adding all the colors (each 255 shades of RGB) create white because they’re additive colors. An example of RGB notation is if you want to create a pastel lavender. Simply type in the notation R: 216 G:205 B:255.

  To pick a website’s color is very challenging. Instead, search for color picker in Google and several pretty color combinations will show up and help you decide which color suits best for your website. Color schemes like monochromatic, analogous, and complimentary colors are typical ways for picking colors for any website.

Web safe colors don’t really apply nowadays but as always, can still be displayed in monitors. But now, the world is unlimited to any color pallet ever. Web safe colors can be applied in Photoshop simply by clicking the “Web Safe Color” check box.

Colors can change on what kind of brand you have. The red on a Windows monitor is different on a Macintosh monitor. *cough cough* (Macs suck)

To play around with RGB notation click here

To find the exact hexadecimal code for your website click here

To learn more about web safe colors, hex codes, RGB notation, and a whole lot of other stuff click here

Photo by Thomas Charters on Unsplash

File Types

EPS

This file format is used in vector based images in Adobe Illustrator. EPS stands for Encapsulated Post Script. Its purpose is specifically to open in Adobe Illustrator which contains text and graphics.

PDF

Portable Document Format file, (also known as PDF) is usually used for saving documents like fill- out forms online. Fortunately, it can be viewed on multiple programs and software. This includes: Google Chrome, Bing, Adobe Acrobat Reader, and Firefox. However, it can only  be edited in Adobe Acrobat Reader.

TIFF

TIFF, meaning Tag Imagine File Format, is responsible for switching raster graphics images back and forth through application programs. TIFFs are commonly used in faxing, medical imaging, 3D application, and desktop publishing.

JPEG

JPEG is a common file extension to save images. If a PNG file with transparency were to be saved as a JPEG, the transparency would not be recognized and would be replaced into white.

PNG

The file format extension, Portable Network Graphics, is designed specifically for network image data transmission and storage. Nowadays, PNGs are used to replace GIFs. GIFs show animations like a stick man doing the macarena.

ASCII

 ASCII is synonymous to the file format extension, .txt. Its purpose is to show text that can be used in any word processor or text editor.

MPEG

Moving Picture Experts Group is the extension of MPEG. As the name suggests, it is a video file that is compressed (to occupy less space in bytes.) Since it doesn’t take up as much space, it is used for downloading and streaming movies.

MIDI

MIDI is used for professional audio for making music that is supported by computer sound cards. MIDI is specifically used to add synthesizers to control: note- ons, note- offs, tempo, pitch, and voice of a song. However, technically there are limited options when it comes to adding a synth to a song. One advantage is that it it compressed to a very small file size. MIDI stands for Musical Instrument Digital Interface.

AV

AV is an Audio Visual Document file. It can also be recognized as .XAV or .XAVT. This file format is used to contain the script.  It makes the process of adding dialogue, scenes, character info, actions, emotions, and acting tips that are necessary for a script. Accessing AV files is easy; All you have to do is open it in Notepad provided by both Macs and Windows or by Final Draft AV software.

WAV

Waveform Audio Format is considered a raw audio format. Depending on what type of music is being recorded, WAV formats are more often used for non- digital music. One disadvantage is that it is uncompressed, meaning it is not sized down to a smaller size (in bytes.)

Photo by Hanny Naibaho on Unsplash

The Frightful Five Common Software/Hardware Malfunctions!

Knowing why your software is acting wacky is important because it allows you to find and essentially fix the problem. Here are five easy problems to identify and solve for software and hardware.

1.My Computer Froze!

Computer freezing is a hardware problem caused by heat. Overheating may be caused by the fan inside that is called the Heat Sink. Either the internal fan is broken or it simply needs a clean up from dust. Dust is bad because it can mess with the motherboard along with other essential components that can damage the computer. However, dust can be cleaned with pressured gas. Just make sure you don’t blow away any other parts.

2.Blue Screen

The scary blue screen is a case of another hardware malfunction. This is caused by the hardware failing. There are several ways to solve this depending on the cause of it.  Try correcting the hardware problem and if not, back up your data and reformat your hard drive. This will erase everything in your computer, including your operating system. At that point you must reinstall it as if it were brand new.

3.Laptop is dead

There can be many causes to why your laptop doesn’t turn on at all. It could be that the charger for the computer isn’t working or the battery could be defected. It may possibly be that there are cables that are not connecting to the motherboard which would need to be replaced. The last possible cause would be failure of the motherboard. You could replace the motherboard but it would be best to just get a new computer.

4.Viruses

Viruses is a software problem that can easily be caught just by visiting a website. You may notice your computer has a virus if applications are not responding or launching at all. Another effect of a computer virus is an overall slower performance than what it used to be. Don’t worry too much, it can be eliminated with an antivirus program. To prevent it from happening again, try not to click on fishy websites or ads that say “click here to claim your free iPhone X!”

5.Malware

Malware is a combination of two words which are malicious and software. malware is much more difficult to remove than a virus. Most of the time it comes through email attachments. It is important to be careful when it comes to opening strange and unexpected emails. To solve this problem, you must reinstall your operating system and install a program that prevents malware from ever ruining your computer.

Photo by Dana Vollenweider on Unsplash

Adobe Software Used in Multimedia

Multimedia is based on using software from adobe to create unique designs. There are six applications that are used to make the most minimalist to intricate ideas.

Acrobat

Acrobat is used to make, alter, and print files in a Portable Document Format. This is more commonly known as PDF. Important files that become a part of one’s portfolio are printed in this format.

Muse

Muse is and adobe application that is used to design websites. It is important to note that this does not include the code or functioning part of websites. Muse is only for looks. 😉   Web design are altered by where they are seen on like a desktop, tablet, and phone. Each mode have different limits of their screen ratio. However, Muse makes it easy to adjust and fit one’s website in any mode.

Photoshop

Photoshop is used to alter photos to make them prettier. This includes affects and several tools to make each of one’s photos unique and original. You can also make all of your subject’s blemishes disappear with the spot healing brush. Photoshop is also able to make cool optical illusions to trick one’s mind. Overall, Photoshop is a very versatile application that can be used in many ways and will be used frequently in Multimedia.

Animate

As of what I have heard, Animate seems to be one of the hardest applications to master or learn how to use it. Animate is used to create animations using vectors and such to make objects move. Sounds easy right? We’ll the challenge is to make it look decent enough to where it doesn’t look like a transition effect on PowerPoint. Animate’s features explain’s how it has a built-in camera to pan in and out. It also includes stock background pictures to use for one’s animations which saves time not looking for background photos. Along with being able to make your own custom vector brushes, you can save your work in 4K resolutions to make your animations super high quality!

Premiere Pro

Premiere Pro is an adobe application used for video editing.  Video editing will be used in multimedia for the yearbook project to show how great and amazing McFatter is. It may also be used for the Senior Exhibition. Premiere Pro deals with sounds and transitions for the video. For quality, it is depended on the camera used. In the case of being in multimedia, our DSLR camera would be the best bet to take high quality videos.

Photo by Ben Neale on Unsplash