Arcel Residences Official Website

Screenshot of Arcel Residences website

Arcel Residences’s website allows you to book their rooms online for night stays to short-term leases.

Colour Scheme

The site’s colours are primarily red and blue, which are based on its logo. A 3rd colour is aqua.

Color Name Hex RGB    
Primary Scarlet #E93001 rgb(235,49,1) hsl(12,99%,46%) cmyk(0%,79%,100%,8%)
Secondary Navy blue #010075 rgb(1,10,117) hsl(241,100%,46%) cmyk(100%,91%,6%,54%)
Accent Aqua island #9CDDD0 rgb(156,221,208) hsl(168,49%,74%) cmyk(29%,0%,6%,13%)

WordPress Template

The design of the site was built from HotelOne template — a simple and elegant design. I like its animated effect on its front page because it catches attention. This was made possible by integrating it with Elementor plugin, a WordPress wyswyg page builder.

To achieve elegance, you have to choose the right colour. For the reason that I had to base the site’s colour scheme from Arcel’s logo, I had to sacrifice that elegant feel.

One of the changes I did, aside from its original colour, was the button, which I changed from rectangular to oblong. Equipped with Elementor, I designed the other pages on my own.


Aside from the Elementor plugin, which already comes with Font Awesome and Google Fonts, an important plugin that I had to add was Advanced Booking Calendar. The free version of his plugin does not include booking discounts and payment gateway integration. Also, it is limited only to 15 rooms.

Sandy Beach To Ocean Deep Colour Scheme

Colour Scheme Beige beach deep ocean blue

Colour Scheme Beige beach deep ocean blue
An elegant colour scheme from sandy beige to deep ocean blue. It is a twist from the common white beach and aqua blue ocean. You can apply this colour scheme to interior, invitation and even wedding colour motif. These colours contrast well with Old Rose.

The colours have no equivalent colour names. So, to keep it simple, let their names be:

  • Hex #d8d6d6 is Light sand
  • Hex #d1cebb is Wet sand
  • Hex #9bacac is Washed green
  • Hex #7bb4bb is Old Teal
  • Hex #2c6474 is Ocean Deep

Café / Coffee Shop

If you own a coffee shop, break away from the traditional coffee and chocolate browns accented with a shade of tangerine. These colours will give your café a look above the rest.

Paint the walls of your coffee shop with Light Sand as primary and Wet Sand as secondary colour to give your walls some dimension. Give your café an Ocean Deep accent by furnishing it with this upholstered colour. For your tables, top it with Old Teal. For your fixtures, paint them with Washed Green.

Living Room, Bedrooms, and Hotel Rooms

For a masculine look of your living room, give your wall a light shade of Light Sand accented by Washed Green colours. Your upholstery would look elegant with Ocean Deep. Complement your sofa with Old Teal throw pillows. For the rest of the items in your living room, colour them Wet Sand.

If you want to be more adventurous, paint the walls of your bedroom with Ocean Deep. Use light fixtures such as white or Light Sand. For your bed, alternate your bed sheets, linens and pillows with Wet Sand, Washed Green, and Old Teal.

To brighten your rooms a bit, add a few items with Old Rose or white.

Wedding Colour Motif

For a change, the bride may wear a Light Sand wedding gown accented with Ocean Deep waist band, flowers, embroidery, or other ornaments. Instead of the common black, let the groom wear an Ocean Deep suit, Light Sand shirt, and Ocean Deep butterfly.

The bridesmaids, flower girls and maid of honour shall wear Old Teal gowns or dresses accented with Ocean Deep. The groomsmen, bearers, and best man can wear Washed Green suits accented with Wet Sand.

House Exterior

Your house will be eye-catching with this light sand ocean deep colour scheme. Paint the exterior of your house with Light Sand and complement it with Wet Sand. Accent your exterior with Ocean Deep doors, window sills and frames, and roof. For the colour of furniture and fixtures outside your house, choose Wet Sand or Washed Green or a combination of both.

Other Applications

This colour scheme will also make your shops and boutique look elegant, cool and fresh all the time. If you own a resort or restaurant near the beach, you can never go wrong with this cool and fresh sand and ocean colours.

A Collection of Rich Web Cards and Banners

Images on web sites call attention. To web content managers, looking for images or web cards appropriate for a post or article has become like routine or standard procedure. Thanks to sites like Pexels and Canva, these online photo and graphic design sites have made my work easier at times when I needed to finish something right away.

Rich Cards

Facebook calls it Open Graph while Twitter calls it Twitter cards. Pinterest calls it rich Pins while Google+ calls it rich Snippet. Simply, web cards are graphics especially designed to capture attention and engage site visitors to your site contents. It functions more than just an image because it contains information called meta tags, which social media sites use to integrate your social site post with your web post or page . It is for that reason why webizens call it rich cards.

My Own Collection of Design Inspirations

The following are some of the header banners, post cards, social site cards and covers, info cards, etc that I have used on a variety of web sites and social media sites. You are free to use any of these graphics. Consider them under CC0 license, which means you can download them for free and use them for whatever purpose without attribution. This is my collection of design inspirations.

Header Banners / Images / Social Site Covers

Web Cards / Blog Featured Images / Social Site Post Cards

Cheaper Green Web Hosting Promo Sale Discounted Subscription Price

Green web hosting promo sale

Today Only!

Green Web Hosting Discounted Subscription Price

Avail yourself of a cheaper web hosting subscription price.

Web Hosting at $2.95 per month only.

This price is good for one year. This promo is valid today only (US Time). Tomorrow, the price of this web hosting service goes back to its regular price.

Should you continue to subscribe after a year, price goes back to its regular price. One way to save is to sign up for a 3-year subscription. Price for a 3-year subscription is cheaper always. You will be billed every 3 years unless you cancel your subscription.

Your first Domain Name is always free for the first year life as long as you continue your subscription.

In case you missed this sale, you can avail yourself of still a cheaper discounted web hosting price at $3.95 monthly. Simply subscribe for 3 years to enjoy this discount.

Learn What I Have Learned Building Websites

Notebook and pencil


The first time I read the Parable of the Talents, I didn’t understand its meaning or what message was it all about. But now I know that the parable was not about money but about gifts you have acquired through time, or even gifts you are born with like a beautiful singing voice. The message is that whatever you are gifted with, God will be more pleased if you will have to share it with others through good means such as teaching or educating, inspiring by speaking before an audience, or by writing a book. If you will think deeply about it, it is just common sense. Imagine if no one will ever speak about the difference between peace and violence, the next generations will always be at war.

My Own Talents

The gifts I have acquired are those that I learned at school such as accounting, computer programming, web design and building websites. There are also those I learned by experience such as graphic design and writing; and those that I learned by myself through self-studying such as blogging and  the use of a variety essential and productivity softwares. There are also those that I learned through mentors such as to understand the human-ness of a person, including myself. My innate gifts are my abilities to use my intuition in making simple and major decisions, and  of course the love that I was born with and gifted by my parents.

To Teach You Is My Way Of Sharing It

It will not be fulfilling if I won’t be able to pass to others the gifts that I have acquired through education, mentoring, self-learning, and experience. I feel that it is my responsibility to share the knowledge that I have learned. And one way to put that in action is to teach it to other people like you. My skill is not to speak before a crowd; thus I have chosen the Web as my platform to share my knowledge. After all, my forte is about the Web.

Learn What I Have Learned

This site contains lessons and tutorials on how you can become a web practitioner or specialist, specifically in building web sites and how you can earn from them. The lessons are arranged in graduated manner, which means that the next lessons may depend on your understanding the previous lessons. For that reason, I suggest that you follow the lessons as numbered.

If you have any questions, just comment below. Your message will go directly to my inbox. As soon as I can, I shall reply.

Sacrificing Design Elements In Favour Of Client’s Preference

T-shirt print design lent inspired

Design is your pride. You created it from your mind out of nothing. It’s like you are the mother of your design. You carry it in your “womb” then you give birth to it.

Like a mother, no matter how your design looks like, you love it. When you start dressing it up, that’s when you make different versions.

You believe in yourself. You know that you are objective when choosing the best design. But sometimes, you get frustrated when your best pick is ignored.

Yes, it’s true that most of the time you have to sacrifice good design elements over your clients’s preferences. There’s nothing you can do about it but accept it. Anyway, it may be your design but the final output is your clients’s. They paid for it.

Don’t cry over spilled milk. Instead, talk about it. Good thing, in this technological generation, you can blog about just anything. So, go ahead, talk about the design that your clients did not pick.

Elements of Design + Your Style

It’s true that in designing, you observe the good elements of design. Plus, you add your own style to give it a character that is uniquely yours or that can be identified to you. From time to time, you violate a few elements to make it alternative or something like “exotic.” Breaking some traditional elements is a brave thing to do to creating your own style.

My Typical Style or Design Preferences

This is one of the design I recently made for an organisation. It is a design to be printed on the upper left of a beige, khaki, or taupe tee shirt.

In this design, to the best of my ability, I tried to apply design elements such as colour harmony, balance, and focus.

The large text Visita Iglesia gives focus. It is what it is all about. The rest are just bells and whistles, but necessary to create impact and attractiveness.

The dark chocolate bar gives emphasis to the word Iglesia because it is the more important word than visita. It also balances the existence of all elements as a whole, and to complement the round insignia.

The map background, though serves as aesthetic, is included to convey a journey or a travel. The event after all is about a travel, which is a pilgrimage. The details of the map are softened and blurred because they are not important to the design. Instead, it emphasised seven location points in the map which are the destinations of the pilgrimage.

The mocha background (which should be the colour of the textile) blends with the design to exude harmony. After all, the theme is about communion of communities. Moreover, the colour blend projects some expensive taste.

My style is simple and minimalist. My reason for that is to communicate effectively the message that I want to convey. If there are too many elements in a design, it creates confusion.

I also prefer related hues or monochromatic. Nothing loud, bright or vibrant. A bit desaturated or hazy, and soft. I like my design peaceful.

How This Design Has Evolved

It is common for a client to request adding other elements such as insignias, images and texts to your original design. Much as you didn’t like it, you have to sacrifice some design elements. Following next, I demonstrate how my original design has evolved into something that is not my personal preference.

Version 2

The client requested adding some texts. In order not to sacrifice some elements of design, this is what I did. Though I softened the text powered by peaceworks103 in order not to steal the main idea, that space looks crowded. So, I created another option.

Design inspiration Visita Iglesia

Version 3

The client suggested positioning the added text around the insignia. It looked better than version 2; but the client requested further adding more texts.

Design inspiration year of the parish

Version 4

In this version, visita iglesia is mentioned twice which is a big no-no in a design. As much as I wanted to avoid redundancy, I had no choice but to submit to the client’s preference.

However, the client further requested that peaceworks103 be around the border of the insignia.

Design inspiration Communion of Communities

The Final Verdict

I didn’t want the additional text to be around the insignia as well. That will be too much. So, instead, I positioned peaceworks103 inside the insignia. However, it left the dark chocolate bar empty, and therefore meaningless. I would like to retain it to maintain balance but I had to sacrifice that design element. As a result, it left that lower part of the design bare and too much useless space.

Design inspiration Peaceworks

But I had not choice. This is what the client picked. Some design elements sacrificed in favour of the client’s preferences.

Take a look at the designs in this slide show.

[ngg_images source=”galleries” container_ids=”4″ display_type=”photocrati-nextgen_basic_slideshow” gallery_width=”600″ gallery_height=”400″ cycle_effect=”fade” cycle_interval=”1″ show_thumbnail_link=”1″ thumbnail_link_text=”[Show thumbnails]” order_by=”sortorder” order_direction=”ASC” returns=”included” maximum_entity_count=”500″]

Video Editing Tips for Beginners – YouTube Editor

In today’s video tips for beginners, you are going to learn to:

  • Edit your video using free background music
  • Fade music at the end of the video using YouTube Editor
  • End your video with an image instead of a black screen
  • Optimise the quality of your video for your website’s home page or landing page

4 Video Editing Tips for Beginners Using YouTube Editor

If you are looking for a free video editor that you can use to stitch video clips and images, the YouTube Editor may just be the answer to your video editing needs. YouTube Editor is a free online application that you can use to edit your videos online via YouTube. It is simple and it can do the most basic video editing tasks. All it needs is for you to have an account with YouTube. Don’t worry, signing up for YouTube is free.

Following are a few tips and techniques to get the best out of YouTube Editor. This assumes that you are already familiar with the basic functions of YouTube Editor. If not, you can start learning the basics via YouTube Help. To learn about what aspect ratio and resolution that are best for your video, read Aspect Ratio vs Resolution.

Where To Get Free Music

Music are copyrighted. If you upload on YouTube a video with a background music that is copyrighted, YouTube will warn you about it. Either YouTube will mute your video, or should you continue, it will warn you that any ad that appears on your video would be for the benefit of the copyright owner, if the owner intended it that way.

A safe way to do it is to use music from YouTube’s audio library. There are music that you can use for free without ads, and there are music that you can use free but ads will appear on your video. Either way, it is better than using a copyrighted music.

Adding Background Music To Your Video

To use YouTube’s music from its audio library, you must first upload your video to YouTube. Once uploaded, click the audio icon to see some featured tracks. Simply click a music and that’s automatically added to your video as background music. You can listen to the music first before you finalise which background music you want to use. Once you have picked a final one, you can save your video.

Another way is to create a new video from scratch using YouTube Video Editor. Then, while on video editor, click the audio icon to bring up a list of music. Select one that you desire to use by dragging it down to the audio panel. Once done, save your music.

To illustrate, here’s a video that I made using iMovie. It has no background music.

[su_youtube url=””]

Fading Out the Music Background of Your Video via YouTube Video Editor

After uploading my video to YouTube, I picked a music from the Audio Library to serve as background music. The result is this video.

[su_youtube_advanced url=”” controls=”no” rel=”no”]

Notice that the video ended with a screech sound due to the music that was abruptly cut. Unfortunately, YouTube’s video editor does not have a feature to fade in and fade out audio. The technique is to use a transition after the video. For my video, I used cross-fade transition.

Here’s the result of the same video with transition added at the end. As the video cross-faded at the end, the background music faded out.

[su_youtube_advanced url=”” controls=”no” autohide=”yes” rel=”no” theme=”light”]

Notice that at the end of the video, a black screen flashed as a result of the cross-fade transition effect.

End The Video With an Image Rather Than With A Black Screen

Lighthouse towerAfter adding a cross-fade transition effect to the video, the video ended with a black screen. For the reason that I will be using this video as video header on my website, I do not want a black screen showing up at the end of the video.

The technique I used is to end the video with an image.

How To Add An Image With YouTube Editor

  1. Go to YouTube Video Editor
  2. Click the camera icon to upload an image
  3. Click Add Photos To Project
  4. Select Upload Photos from the choices
  5. Click the button Select photos from your computer and pick the photo that you want to upload.
  6. Once your photo has been uploaded, drag the image to the end of the video that you are editing.
  7. Save your edited video.

Optimise The Quality of Your Video on Your Website

By default, YouTube sets your video quality to “Auto.” This is good because your video will load faster with any device. If you want to maintain the HD quality of your video, especially, if you are using this as hero video on your website, on YouTube, set the video quality of your video to 1080p.

The Final Video

Below is the final output of my video after adding a background music, fading out the music by using a cross-fade effect at the end of the video, and adding an image at the end of the video to cover the black screen caused by the transition.

[su_youtube_advanced url=”” controls=”no” autohide=”yes” showinfo=”no” rel=”no” modestbranding=”yes” theme=”light” wmode=”transparent”]

Customising WordPress Theme Twenty Seventeen

Every year, WordPress comes out with a default WordPress theme. This year 2017, WordPress came out with – your guess is right – Twenty Seventeen.

This article is about how I customised WordPress theme Twenty Seventeen for my site First, let me talk about a bit of what’s new with WordPress 2017. Immediately following that is my own customisation of WordPress Twenty Seventeen.

What’s New With 2017

The main feature of WordPress Twenty Seventeen is the use of a header video on the front page of your website. The featured image is immersive that it occupies the entire width of your screen (referred to as hero images).

WordPress 2017 focuses more on business sites. It features multiple sections on the front page which you can use to showcase your portfolio, featured items, etc. Twenty Seventeen works on any device.

This site – – shows an example of a site built with WordPress Twenty Seventeen.

Introducing Header Video

A video on the front page of your site is a good way to attract viewers because of motion. Use a header video that is related to your site or a product. Use subtle and soft music. Some viewers do not like loud sounds because they annoy them. With WordPress Twenty Seventeen, you have no problem with that because it mutes the audio.

WordPress Twenty Seventeen recommends a video size of 2000 x 1200 pixels. In order not to confuse you how is that set, most video editors have a default of 1080p, which means 1920 (width) x 1080 (height) pixels. If it is not the default, usually it is among the choices asked upon creating a new video, so just select 1080p. Settle on this size and you are already safe. Moreover, that’s the maximum dimension that YouTube can accommodate.

The header video is responsive that it covers the entire screen of any device or computer display. However, in order not to distort (video stretched ugly) its aspect ratio, the video produces pillar boxes, if the screen is too wide for its height, or letter boxes if the screen is too tall for its width. Pillar boxes are black vertical bars that appear on the sides of the video. Letter boxes are black horizontal bars that appear at the top and bottom of the video.

Most preferably, upload your video via YouTube and enter its URL in the customizer header settings rather than upload it natively on your site. Your video loads faster via YouTube compared to a video that you uploaded directly on your site. For now, WordPress 2017 accommodates only YouTube videos.

Native Video vs YouTube Video

The recommended video dimension is 2000 x 1200 pixels in order for the video to cover the entire with of the screen. YouTube accommodates only up to 1920 x 1080 (1080p). As a result, if you are going to use a video header via YouTube, your video header will show pillar boxes (black empty space on both sides of the video). Even if you tweak the YouTube URL by specifying the width and height to 2000 x 1200, the settings are ignored. In some cases, maximizing your browser to full screen may do the trick. However, you cannot expect all users to do that for you.

As a remedy, or to take advantage of a 2000 x 1200 video, you must upload it to your site via WordPress media library, however —

  • Your video must be less than 8 MB. This is the maximum size that WordPress can allow you to upload.
  • Your host server must be able to stream your video.
  • Not all bandwidths are created equal. Internet users with low bandwidth might not be able to see your video. I tried a 5 MB video but it couldn’t play. So keep your video as light as possible. The video used for the demo site  was only 3.9 MB and 17 seconds long.
  • Your video editor must allow a customized 2000 x 1200 aspect ratio settings if you want to adhere to this recommended size. iMovie, for example, cannot create a 2000 x 1200 video. However, a 1080p video is just good enough.
  • Adding an audio to your video makes it size heavier.

Keep Your Header Image Lightweight

If you do not like to use a video header on your front page, you have the option to use a header image. Likewise, WordPress Twenty Seventeen recommends a header image that is 2000 x 1200 pixels in dimension. This is to maintain the good quality of your image even if viewed on larger screens; however, limit the weight of your image to 300 kb or lower. Upload images that are exactly 2000 x 1200 pixels. It makes your images lightweight and saves space on your web host server. There are software, that you can download for free, to crop and resize images such as Fotor and PhotoScape for Mac and its native Preview; and for Windows, FastStone.

If you want to use multiple images for your header, give your photos a common character or attribute by using filters. For example, you can make all your header images all sepia or retro. Multiple header images are displayed randomly.

You can have both a video header and an image header so that while the video buffers, your viewer can see your image header. Otherwise, your viewer is going to see a blank black space before the video starts to load.

Header Image vs Featured Image

If your header image is enabled, and you used a featured image on your post, you will see a horizontal crop of your header image above the navigation menu; and below it, you will see your hero (featured) image full screen. With the two together, your page can look unappealing.

Either you disable your header image or not use a featured image. A featured image, however, is helpful especially when sharing your post on social media sites. If you disable your header image, your viewer will see a blank screen before your header video starts to load.

Customising WordPress Twenty Seventeen

The following sections assume you already know how to use WordPress at backend. For beginners, WPMU DEV has written a detailed tutorial on how to customise your site with WordPress theme 2017.

My Preferred Style

My preferred design is simple and minimalist. For my website, I want it to look neat and elegant. I don’t want clutter.  So, the first thing I would do is not to use the header media.

Disabling the Header Image

Disabling the Header Image is simply easy. Just go to WordPress’s built-in Customizer and head for the Header Media. In Customizer, click Hide Image.

Site Identity

I prefer to show my logo somewhere else instead of in the header. Since I have disabled the media header, my logo, site title and tagline won’t be showing.

For my site, I only uploaded my site icon. I have entered my site title and tagline (you should), but I opted not to display them.

If you prefer to use the theme’s options, you have the following choices whether to show or not the following on the home page of your website.

  • Title and tagline
  • Logo with the title and tagline
  • Logo only

Colour Scheme

Colours give your site a characteristic. Since I am aiming for minimalist and elegant look, I have chosen monochromatic colours. With the aid of W3 Schools monochromatic colour scheme online tool, I have picked this palette.

If you prefer, you can just pick from W3 School’s ready-made color palettes.

Once you have picked your colour theme, head to WordPress’s customizer and customize Colors. WordPress 2017 offers only three color scheme options: dark, light or custom. Choose Custom and move the slider to the hue nearest your colour theme. With custom you can see in the live preview the changes in text colours. 

Customise color scheme of WordPress 2017

Once you have picked your colour theme, head to WordPress’s customizer and customize Colors. WordPress 2017 offers only three color scheme options: dark, light or custom. Choose Custom and move the slider to the hue nearest your colour theme. With custom you can see in the live preview the changes in text colours.

Specifying Exact Colour Scheme

The custom colour slider to choose a colour scheme is helpful but not exact. If you have specific colors for your site color theme, you have to use CSS. There are plugins that allow you to do this, but if it’s only a short line, I’d prefer CSS.

Hex color #282216

Used as background color of the top menu and footer. To force the background color to change, add this CSS line.

navigation-top ul {
background-color: #282216 !important;

Hex color #F4F7ed

Used as default background color of the body and HTML. All pages and post would have this light background. To alter the original background color, add this CSS.

.site-content-contain {
background-color: #f7f4ed;

Hex color #625741

Used as color of all headings h1, h2, h3, h4, h5, h6. To specify the color of all headings, add this CSS code.

h1, h2, h3, h4, h5, h6 { 
color: #625741 !important;

Hex color #A28E67

Used as secondary accent such as background color of other elements, buttons, and links.

.coming-soon { }

Hex color #D3C19C

Used for hover effects.

.coming-soon { }

Footer Color

To change the background color of the footer, add these CSS line.

footer { 
color:#d3c19c !important;
footer .widget-column a {
color:#d3c19c !important;

Customising the Top Menu

By default, the top menu is aligned to the left. When viewing your site on a wider screen, the top menu appears off. I leave it that way. I like it a bit off than centered. To keep my top menu simple, I’m dropping the drop-down menus. That means that I’m not adding any menu item under the main menu items. I’ll think of another way but that will come later.

In case you want your top menu centered, add this short CSS line. In WordPress customiser, click Additional CSS. In Customizing Additional CSS, enter the following line.

#top-menu {
text-align: center;

If you want it right-aligned, change center to right.

Changing the Hover Effect of the Top Menu

The default hover effect of the top menu is very simple; a horizontal line appears below the word when you mouse over it. I tweaked that a bit by increasing the thickness of the horizontal line and changing its color and by adding a transition effect. In CSS, these are the lines I added.

The following CSS line sets a transition when you hover on a menu item, decreases the spaces around it, reverts the font weight to normal, and forces to change the color of the menu item.

.navigation-top a {
transition: 0.8s;
color:#f7f4ed !important;

The next CSS displays a thick 50% opaque white border below the menu item when you hover it and decreases the bottom padding to zero, giving a rising effect of the border. If the menu item is active, the border appears without the transition (it’s actually there; you just don’t see the effect).

.navigation-top a:hover,
.current-menu-item >a {
border-bottom:3px solid rgba(255,255,255,0.5);
padding-bottom: 0px;

Disabling the Sidebar

For my minimalist site, I won’t use the sidebar. If the sidebar contains many elements, it tends to clutter your single page or post, aside from the reason that it distracts your readers. I just want my viewers to focus on the main content.

Additional resources:

Video Editing Tips For Beginners – Aspect Ratio vs Resolution

In this video editing tips for beginners, you are going to learn the differences between aspect ratio, dimension, and resolution; and, which aspect ratio, dimension, and resolution should you use for your videos.
Learning Curve: Beginner

Dimension vs Resolution vs Aspect Ratio


Dimension, in general, refers to the size of something such as length, width, height, or depth. In video production, when you talk about dimension, you talk about the width and the height of the video. Video dimension is not measured by inches or centimetres. Though a TV screen or computer monitor is measured by inches diagonally from one corner to its opposite corner, the video is measured by the number of pixels called resolution and aspect ratio.


Resolution is the density or quality of an image or video. It is the number of pixels per unit of an area, for example 72 pixels per inch or 72 ppi. The lower the number, the lower the quality of an image. In graphic design, a 300 ppi is a good quality image best for magazine production. The web standard is 72 ppi. Resolution, therefore, refers aptly to the quality of the picture rather than to its width and height.

In video production, however, when you talk about resolution, you talk about 480p, 720p,  or 1080p; not ppi. The ‘p’ stands for progressive; in contrast with ‘i’ which means interlaced. Which one is better? Look at it this way: ‘i’ is old school, ‘p’ is today’s school. What about the numbers? The numbers in 480p, 720p, and 1080p refers to the height of the video in pixels. So, 480 means 480 pixels in height.

Which resolution is the best? 480p is the standard dimension for box type displays such as the square TV or computer monitor prior to the millennium; while 720p and 1080p refers to a widescreen display. In another context, VGA is to 480p; while 720p and 1080p are to HD (high definition). Therefore, the higher the number, the better the quality of the video.

TV monitors and screen displays of computers and mobile devices come in different dimensions. If you are producing a video for a specific device, then use a resolution that fits that device. However, if you want your video to be played on any TV monitor or screen display, use the standard ones. You can either use 720p or 1080p if you want high definition (HD) quality. This ensures viewing your video in good quality picture even in larger screens.

Aspect Ratio

The aspect ratio follows a certain width relative to its height, or vice-versa. The most common aspect ratios are 4:3, 16:10, and 16:9. The first number refers to the width; the second number refers to the height. For example, you can look at 4:3 like 4 inches wide and 3 inches in height.  However, in video production 4:3 may be at 640 x 480 dimension in pixels, or 800 x 600. The aspect ratio of 16:9 may be in 1280 x 720 dimension in pixels, or 1920 x 1080. The aspect ratio can be in any number of pixels. The higher the number, the better the quality. 

You have learned that the numbers in 480p, 720p, and 1080p refer to the height of the video. These figures are shorthands to mean that 480p refers to the 640 x 480 dimension in pixels; while 720p refers to the 1280 x 720 dimension; and 1080p refers to 1920 x 1080 dimension.  Therefore, the aspect ratio may be in any dimension or number of pixels so long as it follows the width-height aspect ratio. Some people call this width-by-height dimension as resolution rather than dimension.

What happens if you play a 480p video on a widescreen monitor?

If you play a 480p video on a widescreen, your video will still play but you are going to see pillar boxes (black bars or blank spaces) on the sides. On the other hand, playing a 1080p video on a standard 4:3 TV produces letter boxes (black horizontal bars or space) on top and bottom of the video. The same is true happens when you play a video, the aspect ratio of which is different from that of the mobile device.

Guide To Buying Screen Displays

The screen display of a MacBook Pro (mid 2012) is either 13-inch or 15-inch measured diagonally from one corner to its opposite corner.  You commonly refer to that physical dimension as the screen size. If the diagonal measure (or hypotenuse in Geometry) is 13 inches, its possible height and width is 5 x 12 inches.  In the case of a 13″ MacBook Pro, it is approximately 7 x 11.25 inches. In terms of pixels, the 13″ display is 1280 x 800; the diagonal measure is thus 1509 pixels. Divide 1509 pixels by 13 inches, you get 116 pixels per inch, i.e. a resolution of 116 ppi.

With that in mind, the next time you buy a computer laptop, or a computer widescreen display, ask for a resolution that is at least 116 ppi. If the resolution is 72 ppi, that’s good for browsing the Internet. For gaming, 96 ppi is good enough. For video editing, go for higher than 100 ppi. Current 13″ MacBook Pro displays a resolution of 227 ppi; while a 15″ displays a resolution of 220 ppi. iMacs have a resolution of 217 or 218 ppi. Professional editors would go for even much higher.

Further, therefore, a big screen does not mean better resolution.

The Best Aspect Ratio, Resolution, and Dimension For Your Video

Most screen displays today, whether TV displays or computer, fit the 16:9 aspect ratio. The old box type TVs and monitors, configured to the 4:3 aspect ratio, are already gone. Most TVs and computer displays available in the market today are widescreen. However, widescreen TVs and monitors that fit the 16:10 aspect ratio had a short life in the market. Therefore, when producing a video, you are safe with 16:9 aspect ratio.

In terms of resolution, choose the standard 1080p. This is to ensure that your video delivers good quality with any device. If you are going to upload your video on YouTube, YouTube automatically downgrades the quality of your video depending on the resolution of the device it is being viewed.

In A Nutshell

The most important thing is resolution (i.e. density), which delivers the quality of the video (and even photographs). A larger screen does not mean better resolution. You have to ask for the ppi (pixels per inch). If the pixels per inch is not given, ask for the dimension in pixels such as 1920 x 1080 pixels or higher. If the store cannot understand the meaning of dimension, call it resolution.

Most widescreen displays adhere to the 16:9 aspect ratio. So, you’re safe when buying a widescreen monitor if the aspect ratio is your concern.

Here’s your gauge. A 21-inch iMac has 4K display, which means 4000+ pixels wide at 200+ pixels per inch resolution. A 13-inch MacBook Pro has 2K display, which means 2000+ pixels wide at 200+ pixels per inch resolution. So when buying a laptop or display monitor, ask for a resolution that’s within this range. If budget is your constrain, go for around 116 ppi.

When producing a video, you’re safe with 16:9 aspect ratio and 1080p. Professionals would go for higher than 1080p or what is called ultra HD. YouTube currently accommodates only up to 1080p. iMovie creates video at 1080p.

amikvs kreativs – A Different Perspective

This video serves as a video header on this website. It is a synopsis of what I do as a designer and creative writer.

Using Video Headers On Your Website

Video or image headers are good attractions on your website. If used effectively, it can engage your site’s visitors for a longer time on your site. You can use a single image, a slide of images, or a video. Whichever media you use, it must be able to trigger an interest from your viewer.

Video or image headers are commonly used on landing pages, which may be the home page of your website or special pages you use to promote your products or services.

There are simple ways to capture an audience’s interest.

  • Motion such as a slider or a video
  • Captivating images, or images with a story or emotion
  • Music
  • Stories or message

For the one I’m using on this website, I used a video of images. I picked images that “tell a story” and enkindle an emotion. For the music, I used soft, low-volume ambient music. This is not to startle your viewers ears especially if they are listening with headphones.


Your image or video header must be able to tell something to your visitors, such as a story. For example, in my video, its storyboard is something about the process of what I do as a designer and writer.

  1. “Everything begins with an idea.” Whether in design or writing, it all starts with an idea. You cannot move further without it.
  2. “Imagine. Design.” Idea creation goes with imagining or visualising. In your mind, you picture what you want to design or write. Design requires serious imagination.
  3. “Think. Plan.” Once you already have an idea, you ponder on it and allow to incubate it in your mind. You gather more thoughts then you start to plan on how you to go about it. Planning is an essential tool to puts you on the right track. It requires serious thinking.
  4. “Build. Explore.” It is on this stage that you start designing, doodling with your pen on your paper, making sketches, and exploring more ideas. You usually don’t settle with one idea or design. You eventually will have to explore more.
  5. “Write. Share.” You write what you have just created and you share them to the world. This is where blogging and social media come in.
  6. “Impress. Express.” Impress to express. When someone appreciates what you have designed or written, there is no doubt that you would feel good. People’s appreciation are your psychological rewards. Therefore, to impress them, your design must be good; what you have written must be worth reading. Likewise, your designs and stories must be able to express their true purpose, meaning or message.
  7. “Talk. Listen.” Simply put, communicate. Your skill is not just about talking well. You must also know how to listen. In social sites, you interact with your audience. Listening is more important than talking because you have to learn the pulse of your viewers or followers, or target market.
  8. “Learn. Inspire.” Knowledge is a continuous learning. Studying does not end today. Enhance your skills with further education. You don’t need to attend a formal school unless it is necessary. You have the skill to learn by yourself. As a form of gratitude for the knowledge that you have earned, it is your responsibility to share your knowledge. Inspire others. Remember the Parable of the Talents. Share what you have.
  9. “A Different Perspective.” Designing and writing are not easy tasks. Being just one of the many puts you in the last line. Designing and writing uniquely, or having your own style is a feat that is hard to achieve. In my own little way, my notion of having a different perspective is more like a character rather than a design or writing skill. Whenever I could, I looked at a different perspective aside from what a common mind sees. It is for this reason, why I chose an image of a lighthouse because a lighthouse looks at different angles and points of view.

What Stories The Images Tell

    • Clear sky. Almost empty. An idea starts from emptiness.
    • Complicated staircase. Can you imagine how brilliant the mind of this designer?
    • The photographer. Before he captures a scene, he thinks, he plans.
    • Wooden path on a lake. This is symbolism of building something and exploring.
    • Laptop, notebook, and pen. This is straightforward. The photographic filter, however, adds a mood to the photograph.
    • A tranquil lake. Look how simple this photograph is, yet its simplicity and mood makes it impressive and expressive.
    • Father and infant. Silence is a means of communication.
    • A young man in metropolis. You can picture this in many ways such as job hunting, going to school to study or teach, or going to work.
    • Lighthouse. A lighthouse is a watch tower that guards the ocean 360 degrees – a symbol of different points of view.

Technical Note

WordPress theme Twenty-Seventeen comes with a feature, called video header, that plays a video on the front page of your website. By default, the video loops. To other users, this can be annoying. The video auto-plays. It gives no option to users whether they want to watch the video or not. Music add user experience, unfortunately, the sound of the video is muted. So far, there are no options to disable the auto-play, or to loop the video just once.  Perhaps, in the future, a plugin would be available to control how the video is played on WordPress theme Twenty-Seventeen.

What if the browser cannot play the video for some reasons? The fallback is to set image headers.

Be Earth-Friendly, #Go Green Web Hosting

For a cheaper, true green web hosting, you pay only $3.96 monthly, your domain name is free for life. Better yet, by choosing green web hosting, you contribute to reducing carbon footprints that harm us and the Earth.

Where To Get Cheaper Green Web Hosting

Green Web Hosting

This site, and my other websites, are hosted by GreenGeeks. This is my favorite web host. It’s honest, its web hosting plans are affordable, and it is earth-friendly. Its web servers are powered by renewable energy such as wind energy. I am also happy about that my first domain name is free for life.

Features of GreenGeeks Web Hosting Plans

I have compared GreenGeeks web hosting plans with other plans. Beside being enviro-friendly, the following are the reasons why I have chosen GreenGeeks to host my websites.

  • Your primary domain name is free for life (i.e. as long as you maintain your web hosting plan with GreenGeeks.)
  • Unlimited domains on one account. Other plans allow only 1, 2, or 3 domains unless you pay more.
  • Unlimited web space and data transfer. Other plans offer wider web space and data transfer for additional fee.
  • Free domain name registration or transfer.
  • Site building tools.
  • Free website migration.
  • Secure IMAP/POP3 e-mail accounts.
  • Free marketing and SEO tools
  • 24/7 US-based support
  • 99.9% service uptime
  • 30-day money back guarantee

Visit GreenGeeks to learn more about their web hosting plans and cheaper subscription prices.

GreenGeeks’s web hosting servers are 300% powered by wind energy. By using green web host, you give our Earth cleaner air and zero-carbon footprint. GreenGeeks green web servers are located in US, Canada, and Europe.

Web Hosting Regular Promo

When you sign up for a 3-year web hosting plan, your monthly subscription starts at US$3.96 per month for one year. This special discounted price is good for the first year. For the succeeding years, your monthly subscription reverts to its regular discounted price of $4.96 monthly. You can avail yourself of this discounted price if you opted for the 3-year subscription plan. You are billed every three years for this particular plan. That means, every three years, you pay the total amount of US$166.56. That’s already a good deal for a 3-year web hosting plan.

If you opted for the year-to-year annual subscription (instead of every three years), the web hosting price is $5.96 a month. You are billed annually.

Note. The web hosting promotional prices mentioned above are subject to change without prior notice. Visit GreenGeeks for the latest discounted prices.

Web Hosting Explained

Why Do You Need A Web Host

For those who are not familiar with what a web host is and what it does, a web host is what puts your website on the World Wide Web. Though there are organizations, such as WordPress and Google, that provide free web hosting (with limited features), a web host subscription is typically paid. If you want to be in full control of your website, opt for a paid web hosting.

What Is Green Web Hosting

Green web hosting uses renewable energy to power the web servers. Renewable energy may be solar, wind, rain, tides, waves, or geothermal. GreenGeeks, which hosts this website, uses 300% wind energy to power their web servers. By choosing green web hosting, you contribute to the reduction of carbon footprints that harm our planet earth.

Carbon footprint is the amount of carbon dioxide and other carbon compounds emitted by vehicles, electrical appliances and equipment, and other human activities, due to the consumption of fossil fuels. Deforestation and burning of oil, coal and gas are the primary sources of carbon dioxide emissions. Climate change is the ultimate effect of large carbon footprints.

The best I could, I try to be enviro-friendly. For that reason, I personally recommend GreenGeeks as your green web host as well.

GreenGeeks’s Web Hosting Promos

From time to time, GreenGeeks would give much lower discounted prices on special occasions, holidays, and events. Here are some that you can look forward to.

New Year Flash Sale

Note. This promo has ended.

As a way of thanking the year 2016, GreenGeeks offered for a very limited time their web hosting plans at only $2.95 a month for 3 years. The flash sale was good until January 1 only.

Welcome 2017 with a bang! and big savings in your bank account!

This New Year, my favorite earth-friendly web host offers web hosting subscription at a lower monthly subscription fee — only $2.95 a month good for three years. After this 3-year period, should you renew your subscription, price goes back to its regular rate, which is still at a low affordable monthly price of $4.95 a month. I can say that this is truly cheaper green web hosting compared to other web hosts. Some web hosting companies say they use green energy for their servers, but actually they do not.

$2.95 a month for three years is already a great deal. That’s only $35.40 a year. This discounted price is available only until 11:59 AM New Year’s Day (eastern time). After this time, the monthly subscription goes back to its regular price. So, hurry! Avail yourself of this discount.

First Day of Autumn Sale

Note. This promo has ended.

Last Autumn 2016, GreenGeeks’s web hosting plan was slashed by 50%. The sale was offered for a day only.

Brainstorm Ideas For Your Website

Brainstorming is a process of putting down on the table every idea – good or bad – that comes out of your head without censorship, justification, or disapproval. It is a process to get that perfect idea. When you brainstorm, you just let the ideas flow. The idea that you may think of may be funny or ridiculous, or even non-sense. It does not matter. Just write down every idea. Use this brainstorming technique to conceptualize what your website is to be about.

What Your Website Is All About

In the previous lesson, you learned about the things to consider before putting up a website, such as:

  1. ‘Do you want it’ versus ‘do you need it’
  2. The purpose and content of your website
  3. Your target audience, aka market niche
  4. The budget and time you need to spend
  5. The platform from which to build your site

At this point, I assume that you already have figured out whether you want a website or need to have one. Regardless, you still have to go through the next process – to brainstorm ideas for your website.

Brainstorm An Ideas List

I can no longer count how many times I had changed the content of my website. Every time a new idea was in my head, I changed my site. It’s not a good practice. Brainstorm ideas and keep a list for future reference.

Now it’s time to brainstorm ideas for the content of your website. Remember that brainstorming is a process, so take your time.

List every idea that comes out of your mind. If you can list a hundred or less, that’s cool. Write the ideas down. Once you have run out of ideas, stop. Set aside your list and forget everything you’ve written.

The next day, or whenever you feel like it, go about your list. Read your ideas a little bit aloud. Make sure that you hear what you are reading. Then start crossing out an idea that you don’t “feel“. If a new idea comes in, add it to your list.

Repeat the process. Go over your list again and see if there are other ideas that you can cross out, or un-cross. If a new idea pops out of your head, add that idea to your list. Once you could no longer cross out anything, take a rest. Set your list aside. Get busy with other things.

At times, a new idea will come to your head. Take your list and write that idea down. Remember that you are still brainstorming at this stage, so don’t censor your ideas.

Think Sources of Information

Whenever you feel like it, go over your list and read every idea. Start crossing out again. If there’s not an idea that you could cross out at this point, think sources. Where are you going to get information about your ideas.

For example, if you are thinking of blogging about gardening, do you have a garden? Do you have knowledge about plants? Suppose, you don’t, then you can blog about your learning process on how to build and start gardening. Now, think. Do you have a space where you can build your garden? Do you have the resources such as books and seminars that you can attend?

Your website also needs images. Make sure that you will have access to a source of rich images as well. There are images that you can buy, and there are free ones; but you cannot use copyrighted images. If you can take pictures with your smartphone, then you need to explore your surroundings so that you can take pictures of the plants you wish to feature on your blog. The stuff mentioned in this example are the sources of your contents.

Now, go back to your list. Check the ideas you think have a rich source of information that you have access to. Cross out the ideas you think require information that you have no access to.

Your Top Ten List

You come now in the final step in brainstorming ideas for your website. Repeat the whole brainstorming process of crossing out and checking those with rich content until your list is narrowed down to at most, ten ideas. Rank them one to ten. Write your top ten on a clean sheet of paper, or preferably on a notebook that you keep. If your list contains less than ten, that is just fine. You may have top seven or top five, or even top 12.

Your Top One is most likely the best idea for the website you wish to build.

The reason why you are keeping your list permanently is that you may need it in the future. In case you need to build another website, then you don’t have to go through the same brainstorming process again. All you have to do is pick an idea from your top ten or top 12 list.

In A Nutshell

It is not easy to come up with the best idea for your website. At often times, you don’t know what to put there. To help you come up with a good idea, you need to brainstorm. Brainstorming allows your mind to be creative and exploring. Brainstorming is not a quick step to a solution. It is a repeating process of letting the ideas flow fluidly through time. Therefore, you need not hurry. In between repeating process, there’s a time to pause and relax. This is to allow the ideas to incubate in your mind. While your mind is at a relaxed stage, it continuously search for the creative idea. Usually, the idea just comes out of nowhere in the middle of the process.

Now that you already have a good idea about your website, your next move is think of a domain for your site.

Available Materials

[su_menu name=”jobBuildWeb” class=”graybg”]