Key Aspects of Work Practices:

• Methods and Procedures: Work practices define how tasks are performed, including the steps involved, the tools used, and the sequence of actions. 
• Formal vs. Informal: Practices can be formally documented in policies and procedures or evolve informally through established habits and routines. 
• Task Allocation: This aspect determines who is responsible for which tasks and the number of people involved in each activity. 
• Efficiency and Productivity: Well-defined work practices can streamline workflows, reduce errors, and improve overall productivity. 
• Safety and Compliance: Many work practices, particularly in industries with inherent risks, are designed to ensure worker safety and meet legal requirements. 
• Employee Well-being: Some work practices focus on creating a positive and supportive work environment, contributing to employee satisfaction and morale. 
• Adaptability: Work practices should be regularly reviewed and updated to incorporate new technologies, best practices, and evolving industry standards. 

Examples of Work Practices:

• Safe work practices: These include procedures for using ladders, fall protection, electrical safety, handling hazardous materials, and using personal protective equipment (PPE). 
• Remote work policies: These practices cover communication protocols, collaboration tools, and expectations for remote employees. 
• Communication policies: methods and strategies used to convey information and ideas effectively between individuals or groups, ensuring clear understanding and efficient collaboration.
• Quality control procedures: These practices ensure products or services meet specific standards. 
• Performance management systems: These practices guide how employees are evaluated and how their performance is improved. 
• Recruitment and hiring processes: These practices ensure fair and consistent hiring procedures. 

Importance of Work Practices:

• Increased Efficiency: Streamlined work practices can lead to faster completion times and better resource utilization. 
• Reduced Risks: Safe work practices minimize the potential for accidents and injuries. 
• Improved Quality: Well-defined procedures can lead to more consistent and higher-quality outputs. 
• Enhanced Employee Morale: Clear expectations and a supportive work environment can boost employee motivation and satisfaction. 
• Legal Compliance: Adhering to work practices can help organizations meet legal obligations related to health, safety, and employment. 

Tools used to enhance workplace communication and collaboration practices:

• Virtual Meetings
  • Zoom
  • Teams
  • Google Meet
• Shared Document editing
  • Google Doc
  • Confluence
  • Notion

By Device License: A by-device license allows the installation and use of software on a specific device or hardware unit. The license typically binds the software’s usage to that particular device and doesn’t grant permission for use on other devices.
Example: Windows OEM License – When you purchase a new computer, it often comes with a pre-installed Windows operating system. The OEM (Original Equipment Manufacturer) license ties the Windows usage to that particular device.

Per Seat License: Per seat licenses provide permission to install and use the software on a specific number of individual devices or seats. Each seat requires its own license, and the software can be used concurrently on as many devices as there are purchased licenses.
Example: Microsoft Office 2019 Standard – If an organization buys 50 per seat licenses of Microsoft Office 2019 Standard, they can install and use the software on 50 individual devices.

Network License (Concurrent License): A network license, also called a concurrent license, allows a certain number of users or devices to access and use the software simultaneously within a networked environment. The total active users/devices cannot surpass the licensed number at any given time.
Example: Autodesk AutoCAD Network License – Organizations can purchase network licenses for Autodesk AutoCAD, enabling a specific number of users to access and use the software concurrently over the network.

Site License: A site license grants the right to install and use the software across all devices or users within a particular physical location, such as a school campus or a corporate office. It often provides unlimited access to the software within that location.
Example: Adobe Creative Cloud Enterprise Site License – Educational institutions or large enterprises can acquire a site license for Adobe Creative Cloud, allowing unrestricted access to the creative suite within the designated location

Enterprise License: Enterprise licenses cater to large organizations and offer flexibility for deploying software across multiple devices and locations. These licenses may include features like volume discounts and centralized management tools.
Example: IBM SPSS Enterprise License – IBM offers enterprise-level licenses for their SPSS statistical software, which includes advanced capabilities and options for managing software deployments.

Subscription License: Subscription licenses provide access to the software for a specific duration, often on a recurring payment basis. Users can use the software during the subscription period, and access might be revoked if the subscription lapses.
Example: Adobe Acrobat DC Subscription – Adobe offers subscription-based licenses for their Acrobat DC software, granting access to PDF tools on a monthly or annual subscription basis.

Floating License: A floating license permits a certain number of users or devices to share a limited number of software licenses. When a user utilizes the software, it consumes one license; when they finish, the license becomes available for another user.
Example: MathWorks MATLAB Floating License – MATLAB provides floating licenses for concurrent usage within an organization. As users access MATLAB, licenses are dynamically assigned and released.

These diverse types of installed software licenses accommodate different user needs and business requirements, ensuring proper software usage in line with legal agreements and practical deployment scenarios.

There are several reasons why relying exclusively on licensed software for all PCs within an organization might not be the most efficient or effective approach:

1. Cost: Licensed software can be expensive, especially for large organizations with many computers. Purchasing licenses for every PC can strain the budget, especially if there are alternative solutions available.
2. Flexibility: Licensed software often comes with restrictions on how many devices it can be installed on or how it can be used. This lack of flexibility can be problematic for organizations that need to adapt quickly to changing technology needs or scale up their operations.
3. Maintenance and Updates: Managing licenses for numerous PCs can be administratively burdensome. Additionally, ensuring that all software is properly updated and maintained can be challenging, especially if there are different versions or licenses spread across the organization.
4. Vendor Lock-In: Relying solely on licensed software from a single vendor can lead to vendor lock-in, where the organization becomes dependent on that vendor for all its software needs. This can limit flexibility and hinder innovation.
5. Open Source and Free Alternatives: In many cases, there are open-source or free alternatives to licensed software that offer similar functionality. Using these alternatives can significantly reduce costs without sacrificing quality.
6. Piracy Risk: Depending on the region and the nature of the organization, there might be a temptation to use pirated software to save costs. This exposes the organization to legal risks and potential security vulnerabilities associated with unverified software sources.
7. Subscription Model: Many software providers are moving towards a subscription-based model rather than perpetual licensing. This can result in ongoing costs that may not be sustainable for all organizations, especially smaller ones.
8. Diverse Needs: Different departments or teams within an organization may have unique software requirements. Relying solely on licensed software may not accommodate these diverse needs effectively.
9. Cloud-Based Solutions: With the rise of cloud computing, many organizations are transitioning to cloud-based software as a service (SaaS) solutions, which often have subscription-based pricing models. In this case, relying solely on licensed software may not align with the organization’s broader IT strategy.

Overall, while licensed software certainly has its advantages, organizations should carefully consider their specific needs, budget constraints, and long-term goals when deciding whether to exclusively use licensed software on all PCs.

For more information about software licenses you can check out these links

https://www.ibm.com/docs/en/developer-for-zos/14.0?topic=tasks-managing-licenses

https://workingmouse.com.au/innovation/software-licensing-and-cloud-service-models/

In print copy we use pt for font sizes because usually we want a “fixed” size because it is going to be printed out on a piece of paper that we have specified the size of. And in a similar fashion px, are fixed not relative sizes and it means that we have hardcoded the font-size to all of the users of the text on our webpage. This means that no matter whether our users are on a phone, desktop computer or tablet the font size will be exactly the same. Which will more than likely mean the font size will be tiny on a phone device. The end device can’t change the value so if they have set their device to show text at a large size you have said no way I know better and I’m not letting you.

So what is the CSS font best practice or solution?
REM and EM

Rem and Em is a relative unit that many developers use to preserve accessibility.

Rem (root em) stands for “root element’s font-size”

If the default root font-size is 12px. So, if we see a font-size that is 1rem, we are looking at 12px but if a user has set their default root size to be 18px then our 1rem will be 18px not 12px.

Because Rem means root element’s font-size, we can also override the default value by using CSS like this:

:root {
  font-size: 20px;
}

So now you have changed the root font-size, now 1rem = 20px

What if we want to use values on our pages other that other than 18px?

We can get the rem value of a pixels by using decimal options to go up or down sizes. For example, if we want to use a larger font-size we will write font-size: 1.25rem. And if we want a smaller font size we use 0.8rem

But it’s so annoying ?!

Yep, using rem will make the development process longer because we need to calculate the rem value. But this gives some freedom to the user, and we are not messing with the accessibility.

So how do em works?

Em stands for “parent element’s font-size”

Because css is cascading and support inheritance then em will inherit font-size value from the parent element. For example, we have a parent div, and p tag inside:

<div>
  <p>hello work </p>
</div>

<style>
  div {
    font-size: 0.5rem; // 8px
  }

  p {
    font-size: 1em; // ??px
  }
</style>

Because p inherit the parent element’s font-size, so 1em = 8px. This means, that the p will have font-size: 8px.

You can read more on W3Cschools site

The HTML 2.0 specification was published in November of 1995. Since then, the HTML 3.0 draft specification expired on September 28, 1995, without becoming recommended, but HTML 3.2 became a W3C (World Wide Web Consortium) recommendation on January 14, 1997.

The public draft for HTML 4.0 was released on July 8, 1997 and was officially recommended by the W3C in December that year. Then the current HTML5 standard was first published in 2009 but not ratified as a standard until October of 2014.

In addition to this official work on HTML, the browsers have been making their own additions to HTML. Some changes were eventually adopted into W3C HTML Recommendations; others remain proprietary coding aspects that only the individual browsers recognize. The browsers’ versions of HTML changed, too, in a game of marketing and programming one-upmanship, hoping to lock Web developers into using one browser or the other exclusively.

HTML characteristics

html stands for Hyper Text Markup Language- it is a “formatting” language not a programming language. An extremely simplified explanation of how works is that it works by turning on and off formatting options TAGS.

for example the following html :

<p> the <i>silly</i> <b> dog</b> jumped up </p>

over the <i><b>tree </b></i>

would render in a browser as below:

the silly dog jumped up

over the tree

Writing html rules

• The formatting options are called TAGS
• Tags are always written within < > angle brackets eg <p> beginning of a paragraph
• Generally TAGS are closed off by writing the tag with a </  > eg </p> end of paragraph
• Tags can be nested but they should be closed in the reverse order of what they are opened
  eg: <i><b>tree </b></i>
  NOT
  <i><b>tree </i></b>
  
• With the implementation of html tags can written in upper or lower case
  eg <P> is the same as <p> and both are completely valid

As the title state this is just a quick overview so that will do on rules for now 🙂

HTML development Tools

To write html you only need the simplist of text editors (MS Word is not a text editor!!) a program such as Notepad will allow you to write perfect HTML – I’ll admit slowly but it is still a perfect tool. And then all you need is a browser such as Chrome, Internet Explorer, Microsoft Edge, Firefox or Safari to name a few to check your rendered HTML documents.

In professional environments you would more than like be using tools along the lines of  Notepad ++, Sublime text, Composer, Dreamweaver or a million other options.

Your development tool doesn’t matter its how well you know and how well you use it!!!

Here are a couple of handy links

html tag reference guide

CSS reference sheet

html colour codes

Bootstrap is a framework utilizing a collection of HTML, CSS, and JavaScript technologies that can be used to create websites. It was developed by and for Twitter. But now it is being used in so many other websites for many reasons such as it is flexible and easy to work with. And especially because it is responsive by design aso the developer doesn’t have to worry about browser and device compatibility. Bootstrap is consistent design by using re-usable components, and it is very easy to use and quick to learn.

So what does this have to with Richmond House cleaners– not much really except that it is the technology that Cleos Cleaning website was developed with. The development time was very efficient just like Cleo Cleaning services and like Cleos cleaning bootstrap is very adaptable.

1. Get the clients functional and non-functional requirements. (basically this is the clients needs- what does the website need to DO)

Eg The client has said they want a photo gallery but did they mean 1 or 20 photo galleries. Did they want the images in the galleries when clicked on to open or not open a larger version? Or did they want on clicking the image to go to an actual web page with more information about the image? (you read more about functional and non-functional requirements here)

Client’s needs

Before starting your plan, you’ll need as much information from your client as possible. The more you know, the less back-and-forth e-mails you’ll need to sift through.

Listen to their ideas

Usually, clients won’t tell you what they want, it’s up to you to ask them. They want reassurance that their brief will be fulfilled the way they visualized it, but they have a hard time explaining how they see their future website. The best way to overcome this problem is communication. It’s essential to get to know your website design clients by asking questions that will tell you about their business. You want to find out the mood they’re going for, what they like and what they don’t.

But don’t be scared to give them your ideas

You are the “expert” so if what the client has in their head is unrealistic or unreasonable then tell them and work with them towards a good solution.

Useful tools at this point are client questionnaire

A useful and efficient way to find out more about what the clients needs rather than what they think they need or want is to get them to fill out a questionnaire.

List the most important questions that will help you understand the project. What’s the purpose of this website? Who’s the target audience? Who are your competitors? What actions do you want the visitors to take? Etc.. I prefer in the first instance for the questionaire to have no more than 10 questions.  And from these 10 questions I will have at least 10 more for the client but these first 10 are a good starting point. It is important that you get this questionaire filled out by the client before you start drafting the proposal and not after.  Once you have your questionaire answers you will be able to hopefully give them ball park costings , and finalize your formal agreement on budget, scope of project, timeline, and ownership.

2. Define what success means

So you have the websites functional and non-functional requirements and based on this specification you should be able to define what success will mean in regards to the website. Yes a working website is a success measure but other success measurements could be the amount of traffic, user interactions, search engine position etc.

As stated in the original article “Besides the description of the site, you need to know what the expectations are for it. Take a news site for example, what’s the goal? Is it to make make as many ad impressions as possible or is it to provide the best reading experience? How are those goals going to be measured? “

3. Start planning a top-level framework/storyboard  and navigation map

A top level framework doesn’t have actual images but more defines where the structural elements such as the main navigation, header, social links, slideshow, galleries etc will go. There are lots of free tools as well as high end commercial ones or you could do it on paper. what you develop it in isn’t important- what is important is that you include ALL of the structural elements. Therefore you may need to do more that one top level sketch/storyboard if your website will have more than one page layout. You can read more about storyboards and navigation maps here

At this point you are thinking about the following:

Element placement

You can’t start your website without knowing where things go. Here’s where you decide that. You can even meet up with your client to discuss the best placement for your content.

Information hierarchy

A sitemap with a list of links can be overwhelming to a client and even the designer. By laying out the sitemap, you will be able to see how the pages fall into place which will allow you to make adjustments before you get too far ahead.

Interactivity

When creating your wireframes, you must ask your questions: How are these elements going to interact with each other? Will the visitor take the actions I want him to take? How will the visitor move around the site? Here’s where user experience plays its role. So you created your layout. Next, you will create your interface.

This is a great resource about web layouts  10 Rock Solid Website Layout Examples

4. Add or think about a grid

There are many CSS Website frameworks now that make responsive websites using Grids incredibly easy. Grid also allow you to mathematically ensure that your page layout will adhere to design golden rules such the rule of thirds etc.  My favorite CSS grid framework is Bootstrap but there are many other available.

Before starting to design anything you need a proper grid. There are no valid excuses for starting without a grid – they will definitely ensure that your design will look as good as it possibly can. A grid will help you to structure the layout of the different sections; it will guide you through the specific screen size requirements, and help you to create responsive templates, so you’re consistent in terms of spacing as well as many other design issues.

5. Choose your typography and colour scheme

Exploring different typefaces and colours is part of the discovery phase of a project. Generally you don’t want to use more than two different typefaces in a website. One for headings and one for the body type. For websites Google Fonts is a great typography resource and tool.

Your colour scheme maybe defined by the clients existing branding or you may have alot more freedom but you can some great colour resources are:

https://color.adobe.com/create/color-wheel/

https://color.hailpixel.com/

https://www.canva.com/learn/website-color-schemes/

http://colorschemedesigner.com/csd-3.5/

You may also like to read simple intro to colour theory and web design

6. Gather all of the main resource

You are just about ready to design the visual components and what the main visual design will actually look like but to ensure that you have the images that you need

7. Design the Visual Components and Visual Design

(Content coming soon)

8. Develop the prototype

(Content coming soon)

9. Refine everything

(Content coming soon)

10. and possibly repeat

This step really depends on the type of project

Defining (Designing) the functional and non-functional requirements is a key step in the web development process and one that not only applied to software development, but website development as well.

Defining (Designing) the functional and non-functional requirements of a website BEFORE you begin may seem tedious and I will admit with some clients it is like pulling teeth but it is very important that you know what the website is actually “meant to do” and “how it is meant to act” before designing the way it is meant to look.  And from this perspective the functional and non functional requirements can ensure that you meet the clients expectations and what I use as a handover checklist and the basis of the contract to ensure there is no spec creep.

And while the terms come from software engineering they are just as important in web development to ensure that your pages interact, perform (behavior, load time etc.) with each other and user in the manner that client expected.

Functional Requirements

Functional requirements describe what the software / website should do (the functions).  Think about the core operations.

Because the “functions” are established before development, functional requirements should be written in the future tense. In developing the web application for the portfolio website, some of the functional requirements could include:

• The website shall/will show galleries of images that open to new pages
• The website shall/will allow galleries to be sorted by date and topics
• The website shall/will be responsive
• The website shall/will allow users to complete a contact form
• The website shall/will show address and directions to office
• The website shall/will have about page
• The website shall/will have homepage
• The website shall/will on the homepage have a custom instagram feed
• The website shall/will allow website owner to update all page content from a web based admin area

And the list would go on. Tedious and not to the same level as software development projects but still important so you do not miss anything important in the website development.

Non-Functional Requirements

Unlike functional requirements the non-functional requirements are not concerned with the functions of the website but instead  look at the criteria to which website is expected to conform to. Non-functional requirements can include things like response time, development time, usability and reliability. It can also be closely tied to user satisfaction.

Some non-functional requirements for a portfolio website could include:

• The website shall/will be easy to use by all external users
• The website shall/will be easy to use by all website admins

Each requirement is not related to an operation or what the application should do. Instead, the main focus in this case is the ease of use and performance. That’s the idea of non-functional requirements. Which can make non-functional requirements hard to measure and define when they have been successfully met.

Developers should always establish requirements before any coding begins so that they can effectively meet the projects requirements and to avoid project spec creep. Identifying functional and non-functional requirements is key to defining the projects over success or failure. By establishing the functional and non-functional requirements, you have a guide to follow in ensuring that a website meets it specifications.

An algorithm is a detailed step-by-step instruction set or formula for solving a problem or completing a task. In computing, programmers write algorithms that instruct the computer how to perform a task.

When you think of an algorithm in the most general way (not just in regards to computing), algorithms are everywhere. A recipe for cooking a cake is an algorithm, the method you use to solve addition, subtraction or a long division problems is an algorithm, and the process of stacking a dishwasher is an algorithm. Even your morning routine could be considered an algorithm!

Algorithms are fascinating and, although some are quite complex, the concept itself is actually quite simple.

The Benefits of Algorithmic Thinking

Algorithmic thinking, or the ability to define clear steps to solve a problem, is crucial in subjects like Math and Science. People use algorithms without realizing it all the time, particularly in Maths but also in everyday life. Algorithmic thinking allows people to break down problems and conceptualize solutions in terms of discrete steps in a procedure.

An algorithm is a way of designing something so it can converting into code that will adhere to the six basic computer operations. So every line in an algorithm must be match one of Six Basic Computer Operations.

The Six Basic Computer Operations are:

1. A computer can receive information
2. A computer can out put information
3. A computer can perform arithmetic
4. A computer can assign a value to a variable or memory location
5. A computer can compare two variables and select one of two alternative actions
6. A computer can repeat a group of actions

Algorithm Rules

Algorithm

• A set of step-by-step instructions to accomplish a task.
• An algorithm must have start instruction
• Each instruction must be precise.
• Each instruction must be unambiguous.
• Each instruction must be executed in finite time.
• An algorithm must have stop instruction.

Examples

Algorithm Example 1

Write an algorithm to add 2 numbers

 Step 1: Start

 Step 2: Let a=10,b=20

 Step 3: c=a+b;

 Step 4: print c

 Step 5: Stop

Algorithm Example 2

Write an algorithm to determine a student’s final grade and indicate whether it is passing or failing. The final grade is calculated as the average of four marks.

 Step 1: Input M1,M2,M3,M4

 Step 2: GRADE ← (M1+M2+M3+M4)/4

 Step 3: if (GRADE < 50)  then
­            ­   Print “FAIL”
­            else
­            ­   Print “PASS”
­            endif

Pseudocode and Flowcharts

Pseudo code is an artificial and informal language that helps programmers develop algorithms. Pseudo code is very similar to everyday English.

FLOWCHARTS
(Dictionary) A schematic representation of a sequence of operations, as in a manufacturing process or computer program.

(Technical) A graphical representation of the sequence of operations in an information system or program. Information system flowcharts show how data flows from source documents through the computer to final distribution to users.

Program flow charts show the sequence of instructions in a single program or subroutine. Different symbols are used to draw each type of flowchart.

Flowcharts shows logic of an algorithm. They also emphasizes individual steps and their interconnections e.g. control flow from one action to the next

What is browser caching?

• Browser caching stores webpage resource files on a local computer when a user visits a webpage.
• “Leveraging” browser caching is when a webmaster has instructed browsers how their resources should be dealt with.

When a web browser displays your webpage it has to load several things like your logo, your CSS file, and other resources.

What browser caching does is “remember” the resources that the browser has already loaded. When a visitor goes to another page on your website your logo, CSS files, etc. do not need to be loaded again, because the browser has them “remembered” (saved). This is the reason that the first view of a web page takes longer than repeat visits.

When you leverage browser caching, your webpage files will get stored in the browser cache. Your pages will load much faster for repeat visitors and so will other pages that share those same resources.

If you have tested your webpage for speed and found out that you need to leverage browser caching, here is how you do it.

How to leverage browser caching

1. Change the request headers of your resources to use caching.
2. Optimize your caching strategy.

Change the request headers of your resources to use caching

For most people, the way to enable caching is to add some code to a file called .htaccess on your web host/server.

This means going to the file manager (or wherever you go to add or upload files) on your webhost.

The .htaccess file controls many important things for your site so be very careful when editing it as you can easily break your whole site. Make and keep a backup of your .htaccess file before making any changes.

Browser caching for .htaccess

The code below tells browsers what to cache and how long to “remember” it. It should be added to your .htaccess file.

Save the .htaccess file and then refresh your webpage.

How to set different caching times for different file types

You can see in the above code that there are time periods like “1 year” or “1 month”. These are associated with file types, as an example the above code states that a .jpg file (image) should be cached for a year.

If you want to change that and say you want your jpg images cached for a month you would simply replace “1 year” with “1 month”. The values above are pretty optimized for most webpages and blogs.

Alternate caching method for .htaccess

The above method is called “Expires” and it works for most people using .htaccess so it takes care of caching for most people who are just getting started.

After you are more comfortable with caching, you may want to try Cache-Control, another method of caching which gives us more options.

It is also possible the expires method did not work for your server, in that case you may want to try to use Cache-Control which is topic for a different post.

Common caching issue

If you list your html and images to be cached for one year or some other long time period, remember that this can mean if you make a change to your pages they may not be seen by all users. This is because the users will look to cached files rather than the live ones. If you have file that you tweak occasionally (example – a CSS file) you can overcome the cache issue by using URL fingerprinting.

URL fingerprinting

Getting a fresh (not cached) file resource is possible by having a unique name. An example would be if our css file was named “layout.css” we could name it “layout_1.css” instead. The next time we change it we can call it “layout_2.css”. This is useful for files that change occasionally.

      <!--here is the html thats goes in the head to include the viewport tag -->
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />

Each media query may include a media type followed by one or more expressions. Common media types include all, screen, print, tv, and braille. The HTML5 specification includes new media types, even including 3d-glasses. Should a media type not be specified the media query will default the media type to screen.

The media queries below would go after your css rules in your css files with the specific rules for the specified device size. If you need to set a media query for a specific device such as an Samsung Galaxy 5 or iPad2 you will find media query sizes for specific devices here https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ but generally being more generic will make website maintenance easier.

The other option for including media queries is to include them as separate files but this more requests made to the server which Google discourages but as with everything you may have a valid reason to setup your media queries this way and it is straight forward as demonstrated below:

<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

 But generally setting up your media queries as below in your css file works well.

/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }