Course Reflection – Web Technologies

I am so thankful for this term and Professor Akselsen. I have had years of learning, digital experience in manipulating existing HTML within a CMS or email template – but I have never been able to read the matrix until now. This course content and the style of presenting it have given me the basic HTML knowledge to understand what story the code is going to tell instead of scanning for words like image or color to make a small change. I went from having no idea how to start a page – to building a basic layout and manipulating a template to fit my needs of displaying family photos.

screen-shot-2019-03-08-at-7.25.13-pm.png

There are many skills that I am able to take away from this course. I had some previous knowledge but learned so many new things along the way to help refine my existing skills. We reviewed several important topics extensively. It is amazing how much we have learned in a short about of time. These topics included:

  • Customization
  • Establishing online presence
  • Color palettes, site maps and wire framing
  • Responsive design
  • CMS and FTP
  • Optimization
  • Website traffic
  • Cross browser and compatibility testing
  • Google analytics
  • HTML/CSS templates

Responsive design is the beginning

Whether you are the designer or  “do-it-yourselfer” using a template to create your site, basic understanding of how a site will be built is important. A successful site is the marriage of both design and code, each depending on one another to create a seamless experience. While designing, you have to envision each user experience and how your design/content will be displayed. If you chose to create your site with a template, many hosting sites contain templates which are responsive and easy to use. These pre-programmed templates will help save time and money as you develop your design.

Content is the driver

Content plays an important role in driving traffic to your website. Content has many purposes like describing products on ecommerce sites, educating on sites like Wikipedia, entertaining on sites like YouTube, and socializing on sites like Facebook or Instagram. With millions of sites available today, content creators have to find creative ways to drive traffic to their sites.

Testing can make you unstoppable

There are so many browsers available, which are viewed on all types of devices and on various screen sizes.  It is, therefore, essential that you perform testing on how the user will experience your site in each of these environments. Each browser handles the information it processes from the server in its own unique way. Testing your site on one browser is not enough; you need to view the user experience across several different browsers, devices, and screen sizes. Cross Browser testing involves testing both the client side and server-side behavior of your site, when it is accessed using different browsers. Through this testing you will ensure that your site displays properly regardless of which browser is used.

Cross browser and compatibility testing should be part of the initial site development and be a step that is revisited periodically.

Free tools are at your fingertips

Google Analytics is a free website analytics service offered by Google; it provides data and insight into how users find and use your website. You can also track ROI for your online marketing strategy. This website can help you view your visitors’ behaviors through your account dashboard.

Google Analytics helps you make decisions based on data. You can justify spending more on your advertising; decide where you should be advertising; and what type of content you should be exploring to add to your site. Google Analytics categorizes data into three main buckets Acquisition, Behavior and Conversions.

We are in this together

Designers, coders and savvy internet users will all benefit from the basic understanding of how each phase works together. Both design and code need to build upon each other in order to have a final product that will create a beautifully built user experience. In this new responsive design environment, all sides need to understand each phase of a site’s growth. Together we will create a beautiful internet experience.

Website design using templates

If you possess some basic HTML knowledge, you can easily build a fully functional website by using free templates. Templates expedite setting up a new website, and they do allow some customization to fit your needs. Some templates will be very simple and clean in their design, while other templates will offer advanced design and code options. Using these templates you can save a lot of time; because the creative design, layout and foundation HTML is already in place.

Templates are ready-made, and can be easily edited allowing you to instantly create a website. This saves money since you will not need a designer; and can be completed in a time frame that you decide upon. There are a lot of sites that offer free templates with amazing designs. I used W3 School for a responsive website template. You are able to use their templates without any restrictions and they have a large array of design options to choose from.

Screen Shot 2019-03-08 at 3.46.06 PM

How to get started

Once you have picked your template, you can play around with it on W3School to see if it fits your needs. Once you are satisfied, copy the HTML and paste it into your HTML editor of choice. Some common editors are DreamWeaver, FrontPage, or Web Express. The images that you use to replace what is in the template can be edited in a few different image applications such as PaintShop Pro, Gimp, or PhotoShop. I use DreamWeaver for my HTML editing and PhotoShop for my image editing. Some templates will also use CSS (Cascading Style Sheets) to control and standardize things like font sizes and colors across all your pages. These CSS files can also be edited using a CSS editor such as DreamWeaver.

Once your HTML is ready, you can upload it to your server. Congratulations, you now have a fully functional website!

 

Understanding Google Analytics

Screen Shot 2019-03-03 at 10.31.59 AM

Google Analytics is a free website analytics service offered by Google; it provides data and insight into how users find and use your website. You can also track ROI for your online marketing strategy. This website can help you view your visitors’ behaviors through your account dashboard.

Another feature is that you are able to add Google analytical tools such as Ads Account and Search Console. You can additionally add tracking codes; which allow you to closely monitor the success of any advertising, social, or PR campaign. To get this started, you need to install “tracking code” on each page of your website.

Tools and features

There are many features you can utilize within Google Analytics such as:

  • Data visualization tools including: a dashboard, scorecards and charts to display changes in data.
  • Segmentation for analysis, such as conversions.
  • Customized reports.
  • Email-based sharing.
  • Integration with additional Google resources, such as AdWords and Website Optimizer.

Google Analytics helps you make decisions based on data. You can justify spending more on your advertising; decide where you should be advertising; and what type of content you should be exploring to add to your site. Google Analytics categorizes data into three main buckets:

  • Acquisition
  • Behavior
  • Conversions

Acquisition

Acquisition is the website traffic. The acquisition reports show you how traffic is getting to your site. The overview tab provides you a view of acquisition, behavior, and conversion data for your top traffic sources by channel (referral, direct, organic search, and social). This information displays the number of sessions acquired, the bounce rate, and their conversions. The acquisition report is the best tool to use in order to evaluate what is working well in driving traffic to your site, and how best to maximize the traffic.

Behavior

The Behavior reports show the performance of your website, and what your visitors are doing as they move around your site. You are able to assess the performance of your website content and determine if changes need to be made in order to change the behavior of the site’s visitors. Under the overview within the behavior tab, you will see a graph showing the amount of traffic during a specific period of time.

Additionally, you will see page views, unique page views, average time on page, bounce rate metrics, and percent exit metrics. These metrics show how a user interacted with your website page.

Conversions

A conversion takes place when a visitor to your site takes an action that converts them to a customer. Examples of this could be: filling out a form, purchasing, or becoming more involved with your site. You will need to use the Google Analytics URL Builder to tag your URLs with custom campaign tracking parameters, and then set up a goal within Google analytics. Google Analytics can now create easy-to-read reports that reveal your campaign’s performance.

 

 

 

 

Cross Browser and Compatibility Testing

There are so many browsers available, which are viewed on all types of devices and on various screen sizes.  It is, therefore, essential that you perform testing on how the user will experience your site in each of these environments. Each browser handles the information it processes from the server in its own unique way. Testing your site on one browser is not enough; you need to view the user experience across several different browsers, devices, and screen sizes. Cross Browser testing involves testing both the client side and server-side behavior of your site, when it is accessed using different browsers. Through this testing you will ensure that your site displays properly regardless of which browser is used.

Cross browser and compatibility testing should be part of the initial site development and be a step that is revisited periodically. Browsers will change as new versions are implemented, so continuous testing is critical to making sure the user’s experience is flawless.

Increase SEO rating

Google is continuously updating their SEO (search engine optimization) algorithm. A site’s ranking will increase if the site is more responsive and cross-browser compatible. An improved site ranking ensures you are being seen by your audience.

Testing my site

I used Browserling to test my site on Explorer, Google Chrome and Firefox. I also tested it on tablet and mobile sizing. I found all three browsers loaded my site correctly. When it was brought down to tablet and mobile size, the site adjusted layout and content appropriately, resulting in similar user experience.

Explorer experience

download

Google Chrome experience

download-1

Firefox experience

download-2

Tablet experience

Screen Shot 2019-03-01 at 1.55.38 PM

Mobile experience

Screen Shot 2019-03-01 at 1.56.01 PM

 

 

 

Using content to drive traffic to your site

IMG_0584

Content plays an important role in driving traffic to your website. Content has many purposes like describing products on ecommerce sites, educating on sites like Wikipedia, entertaining on sites like YouTube, and socializing on sites like Facebook or Instagram. With millions of sites available today, content creators have to find creative ways to drive traffic to their sites.

“The best websites don’t just sell, they educate
and produce loyal visitors.”


Loyalty of users

Visitors don’t want to be overwhelmed with too much content. They want to be able to skim through sites to look for information relevant to them. When they find a site that relates to them, they will become loyal visitors and start to share with others. When they link to your site on their site or social media, this will increase traffic back to your site as others will be interested to see more.

Keywords and links

Adding blogs to your site is another great way to boost your SEO. The links will signal to search engines that your site contains relevant information to specific questions. Sprinkling keywords and links will further broaden your website’s reach. As search engines look through the web for specific words or links, your site will become more visible to others.

Mobile content

The mobile world is top priority related to users. You need to consider the readability of your content for mobile users. Format your content for small screens using bullets, subheads and infographic images. Using videos, social media shares and pictures help make your content bite-sized for users on the go.

Driving traffic back

Below are five sites that I have identified for driving traffic back to their site via strategies such as social media, email, signup forms and mobile app pop ups.

Home depot

While looking for some home improvement items on the Home Depot app, I placed something in my account cart. Later in the day I received an alert on my phone to remind me about the item I had left in my cart. While I didn’t purchase it, the mobile app alert did drive me back to the site to continue browsing for new ideas and price checking. After having a conversation about the items I saw on the app, we then drove to our local Home Depot. I honestly don’t think I would have thought about Home Depot during the chaos of the week unless I had received the mobile alert late in the day.

0

IKEA

I love IKEA and the way they advertise their products by displaying their merchandise in real life scenarios. We are looking into redoing a kitchen, and we always head back to IKEA for ideas on how to layout the room using the space we have. I don’t know if we will actually purchase our cabinets from IKEA, but the way they market certainly gets the creative juices flowing. I was looking through their site regarding room ideas for kitchens; later that day, within my Facebook feed, were the kitchens I saw while on their site. Brilliant on their part because I clicked on the link and spent another 30 minutes dreaming about the kitchen I wish I had.

Screen Shot 2019-02-19 at 3.55.58 PM

Warby Parker

I wear glasses on my casual days, and I love Warby Parker for their price point and fun styles. Every time I receive an email about what’s new, I immediately click and go to their site to poke around. Although I didn’t purchase this time, I added a lot of frames to my favorites for future purchasing. Their emails, ads and pop ups are well done with their clean design and funky photos; they cause the user to want to seek out more. In addition, they always follow-up with emails after a purchase and I see them show up in my social media feed whenever I have visited their site.

Screen Shot 2019-02-19 at 3.48.22 PM

Starbucks

Starbucks has figured out how to market to those who are frequent visitors. They entice me with challenges, popups on my phone when I am near a Starbucks’ location, emails to remind me that I have a free drink to use, or how I can earn more stars. This particular email didn’t get me to click through since it was for a credit card application. But usually when I receive a challenge email, it’s a quick click to get started from the email; and you can view in your app how you are progressing towards earning more stars. The Starbucks’ app makes it easy to add money to your account for more purchasing power, or in my case, easy to satisfy my teenager’s addiction to her latest ice tea craving while out with friends.

0-1-1-e1550897268222.jpg

JCrew

A lot of sites have immediate coupons when you sign up for their email newsletter. It’s a great way for the site to capture emails for future campaigns in order to drive traffic back to their site. While visiting the JCrew site, I signed up to receive the savings; since then I have received several emails showing me new styles and sales that are available that day. They also market their other sites, such as JCrew factory, to theses captured emails. The signup form is a great way to make the user feel special for getting a deal and joining for future communications about their products and site.

Screen Shot 2019-02-18 at 8.12.13 PM

 

Image quality and size

We have all experienced a site where the images take what seems like forever and a day to download. It’s frustrating and can lead to the user leaving the site. Large images take longer to download and by large I am not referring to the dimensions but rather the file size. It is important to make sure that the images loading on the site are small enough in size to download quickly as the site loads.

“47% of consumers expect a web page
to load in 2 seconds or less.”

 

Images have a way of bringing a user into the story you are telling, or selling a product the user wants. Crisp, high resolution images are a must to give the user a sense of texture and color. But you need to keep in mind the file size when saving your images, as well as, maintaining high image quality.

JPGs are the most common file type for images on the web. JPGs will maintain the colors, shadows and gradients of photos, because they have a large color palette to work with. JPGs can also be saved in several ranges of quality, allowing you to adjust these settings before saving. You are able to balance quality and file size to get exactly what you need.

Three things to reduce the file size of an image

  • Reduce Image Size: Image dimensions
  • Save Image for Web to Reduce File Size: File size
  • Compress Image: Eliminate additional metadata

Screen Shot 2019-02-16 at 10.02.21 PM.png

Using Photoshop, save your image by exporting and saving for web – File > Export > Save for Web (Legacy). Next you will be able to adjust the quality. Usually a quality setting between 60-75% will work best in file size with no noticeable difference in the quality of the saved image. It will sometimes require a little playing around to find the perfect quality to use. For further compression, an easy way to reduce the file size an additional 5-10% is with image compression apps. I use ImageOptim which is a tool that will remove hidden data in the image file. This type of app can remove additional color profiles and metadata that aren’t needed. It’s a quick and easy way to reduce the file size without losing the image quality.

Ready to get optimized?

Images on the web are more than just a picture. They give the user a visual into a story or an image of a product they are looking to purchase. Images are so important to the success of a site. But it’s important to find a balance in image quality and image file size so that your site doesn’t take a long time to load. If users start dropping from your site, this may affect your SEO.

To get started I chose one of Professor Akselsen images that were shared with us. To optimize this image, I started with the high-resolution photo and brought it into Photoshop. The original file was 900 x 1200 and 987KB.

Once in Photoshop, I exported the image, File/Export/Save for Web (Legacy) and put my quality at 75%. When I saved the image, it brought my file size down to 442KB.

Screen Shot 2019-02-13 at 8.11.30 PM

I then brought my JPG into ImageOptim which was recommended in this week’s module. ImageOptim removes bloated metadata to make images load faster. Additionally it saves disk space and bandwidth by compressing images without losing quality. This brought my image size down to 418KB. It’s amazing how the image was cut down more than half in file size but was I able to keep the quality.

Screen Shot 2019-02-13 at 8.11.30 PM

If you still need the image to go down in file size, you can choose to resize the image in Photoshop as well as try decreasing the quality when exporting the image.

Helpful tip:
Always remember to keep the original in case you start to lose the image quality you can always start over and play around with the quality or size.

 

Uploading to your website

To create a website, you need to upload your files to your web server using an FTP (File Transfer Protocol). The FTP will transfer your files immediately to view on your site. There are several FTP clients to use such as Fetch or Filezilla. With FTP clients such as these you are able to drag and drop files from your hard drive to the hosting server location.​

What you need

To get started in uploading your files you will need the following information from your web host to get access to your site.

    1. Your username
    2. Password
    3. The hostname or URL where you should upload files
    4. Your URL or web address

Ready, set, go…

Next you will open the FTP client that you have downloaded to work with and following the instructions supplied by your FTP client.

  • Put in your hostname or the URL where you should upload your files.
  • You should be prompted for a user name and password. Enter them in the space provided.
  • Select the correct directory for your hosting provider.
  • Select the file or files you want to load onto your website, and drag them to your FTP client.
  • Visit your website to make sure all of your files have uploaded correctly.

Tip: If your web host tells you that you do not have FTP access, you will have to use their FTP site to upload your files. Remember to check your website to ensure your files have uploaded correctly.

 

Designing with Responsive Web Design in mind

target.jpg

Responsive Web Design (RWD) is now the web design standard best practice. It uses flexible layouts, images and CSS (Cascading style sheets) to design web pages that detect the user’s screen size and page orientation. Responsive design makes sure that the design works on all devices which utilize various screen sizes such as: mobile, iPad or desktop. What The Heck Is Responsive Web Design?

When the iPhone was introduced, developers were tasked to build separate sites to accommodate whether a user was on a desktop or mobile device. This caused a lot of additional costs and frustrations. Web designer Ethan Marcotte developed “Responsive Web Design”, publishing an article in 2010 that discussed the ever-changing world of web design. Responsive Web Design Marcotte explained that building separate sites for every device would not be sustainable in the fast-changing environment of web development. He came up with a new concept called it responsive design which calls for flexible and fluid layouts that adapt to any screen size.

Getting started

Choosing to design with responsive web design methodology is essential, so that your site will be presented properly on any device. Responsive design will give the user a seamless experienced as well as increase how your site will rate in SEO algorithms and be visible in search results. Is Responsive Design A Ranking Factor?

Whether you are the designer or looking to use a template to create your site, basic understanding of how a site will be built is important. A successful site is the marriage of both design and code, each depending on one another to create a seamless experience. While designing, you have to envision each user experience and how your design/content will be displayed. If you chose to create your site with a template, many hosting sites contain templates which are responsive and easy to use. These pre-programmed templates will help save time and money as you develop your design.

Helpful tip:
Remember, as you put your content together, keep previewing your site. It is important to see your site in the different screen environments to make sure the user experience flows well between each screen size. 

We are in this together

Designers, coders and savvy internet users will all benefit from the basic understanding of how each phase works together. Both design and code need to build upon each other in order to have a final product that will create a beautifully built user experience. In this new responsive design environment, all hands need to understand each stage of a site’s growth. Together we will create a beautiful internet experience. Designing for a Responsive Web

QUINNIPIAC UNIVERSITY GRADUATE BLOG