Blog Post 5: Advice

Browser Battle

Battle of the Browsers. Source: http://www.watblog.com

32 weeks of web.

64 classes of web.

192 in–class hours of web.

500+ hours outside of web.

That’s a lot of web

Looking at all the numbers, you need to embrace yourself for ton of web. As the new crop of students, you have a lot to look forward to. You will be starting from knowing nothing about html and css, to being able to hand–write all of the mark–up. I would suggest paying attention to the material learned in the beginning since it the is basics for everything you do from here on out. Building blocks that can potentially cause a problem elsewhere on the site. I would also suggest reading the book since the authors do a good job of breaking down the steps into simple examples. If you understand the basic principles of a given rule, you will have a much easier time when approaching it in a more extreme instance.

Before entering this class, I would suggest having a higher understanding of using a grid layout. You will have a much easier time in this class if you are placing all of your design elements based on a grid. Speaking of which, 960.gs will become your new best friend in web design. This website contains free downloadable Photoshop templates and sketch sheets that will aid you in your designs. If your designs are built based off of this grid, the correct proportions will make for a headache–free process.

960 homepage

Download free photoshop templates and sketch sheets.

While this class is very technical in nature, really concentrating on the designs will allow you to go much further then if you were to keep things to a basic level. If you push yourself to add additional, more complex elements, it requires you to dig deeper and gain more insight. And in the long run, you will have a better understanding of the Internet.

When you start building responsive websites, the way you go about building a site will also change. Don’t get used to using fixed–positions and exact pixel amounts, since it will only cause problems when you start scaling down your layouts. Probably the most helpful advice that I could give when it comes to web design, build your site responsively from the start. If you use media queries from the start, everything will fall into place much easier and faster.

Here are some links that I feel are needed to succeed:

HTML Validator

Html validator

HTML Validator

CSS Validator

Css Validator

CSS Validator

Always validate your mark–up. Most of the time it can point out a problem down to the specific line.

Kuler

Kuler Icon

Choose your colors with Kuler.

A helpful site to all designers. Never have a problem finding a color again.

Smashing Magazine

Smashing Magazine Logo

Smashing Magazine is everything Web Related.

A website all about web development. There are a ton of helpful articles that can help guide you through.

Advertisements

Blog Post 4: HTML5 Revisited

HTML5

It‘s time to take another look at HMTL5 and all that it has to offer. HTML5 is bringing web developers many more tools to help provide ease and function to websites while keeping up with current web standards. There are many different elements that are being added with this version of HTML but I‘m going to highlight the Audio and Video elements and the Form elements.

HTML5 Audio and Video

Mozilla Developer

Mozilla‘s developer page on HTML5 provides us with the basic mark–up that we need to embed these new multimedia elements. There are two new tags, Audio and Video. By simply inputing a src within one of these new tags in the body of your site, it will allow the browser to render the given file allowing it to be played. It is also helpful to add supporting text that will show up if the user does not meet the requirements to play the video, which could include a download link for the latest version of the web browser.

Mozilla Developer Site

Mozilla Developer Site

Tutsplus

When adding multimedia elements to your site, the process does not end after the first step. Adding controls to your video⁄audio gives the user full control over what is being played. For example, having a song auto-play on loop in the background of a website could be a problem for a user that is visiting this site in a quiet library. This can be done adding "controls" within the tag, providing a basic play⁄pause, seek bar, and volume control. Additionally, these controls can be customized with the use of JavaScript.

Tutsplus Controls

HTML5 Controls

Gingertect

Now that we have a basic understanding for how these new multimedia tags work, we can now look at some of the fun features that can be applied. Using JavaScript, we are able to add some fun elements such as Waveform for the audio tag. This will provide a waveform graph that syncs directly to the audio. Also, it is possible to merge the video with the new canvas element to create a background–color that takes the average color of the video screen, changing as the video plays.

Waveform Example

Waveform Example


Average Color Example

Average Color Example

HTML5 Form Elements

W3Schools

As with most things web related, w3chools is the perfect place to start your search. The next new feature that HTML5 offers are form elements which includes new tags: datalist, keygen, and output. The datalist gives us the option to add a drop down list to the form, giving the user pre–defined options. Keygen is used to help create security for the user when filling out an online form. By creating both a private and public key, it allows the browser to authenticate the user. When using the new output tag, it allows a calculation to be generated and show its results.

W3Schools Forms

W3Schools Forms

Html5Rocks

For more detailed information on new form options, html5rocks provides us with a nice table showing all the new input types that can be added to the form as well as all the new attributes. Instead of having to have different ID‘s applied to each input tag, you can now use one of the more specific tags such as tel, email, or time. Using these new tags will create organization within your website, giving the website a stronger structure.

List of new tags

List of new Tags

Wufoo

In relation to the new tags in the previous article, this website provides developers with a list of which browsers support the new input types, attributes, and form elements. As you can see, Opera is currently the browser that supports most of the new form elements. This list can be helpful when designing a new site because you need to make sure that the type of users viewing the site will be able to receive the correct information. You must always keep in mind that there still are IE users out there.

Wufoo Table

Wufoo Table

Video in use:

Html5Video

This website is the perfect example of the new video tag being put into use. Directly on the feature of the homepage is a video with control options. Looking at the mark-up of the site you can see the video tag and all of its components. Whats nice about this example is that it uses "poster" which is a new element that allows a image to be displayed on the screen while the video loads. This makes it so that you don‘t have to use JavaScript to disable an image once the video starts. Additionally, the video does not auto play, giving the user the option of whether or not the video will start.

HTML5 video example

HTML5 video example

Blog Post 3: HTML5 Research

HTML5 is the newest and greatest in markup language that will allow web developers to not only design for the desktop platform, but for apps that are used on a variety of different mobile devices. With the many new features, it will increase the performance of a website for developers and most importantly, the user. Refer to my previous post, HTML5, for some of the new features offered that makes this language different from HTML4.01 or XHTML 1.0, of which include: Multimedia, Tags, Local Storage, and CSS3.

HTML5 logo

HTML5 Logo.

In current time, there are a few drawbacks of this new language. With it being new, not all of the features are available on outdated browsers. Since the ultimate goal of any website is to be available to the widest range of consumers, it must be taken into account that a lot of them either use Internet Explorer or just haven't updated their current browsers.

Resource 1:

Engineyard

This first resource is a guide to designing websites for mobile devices. What I found interesting is the explanation of Viewports, with an example of what they do to increase usability on a mobile device. The default view on a phone is zoomed out intentionally, allowing for the entire site to be viewed on the page. Viewports change this so that the scaling is viewed exactly as it would be if you were to minimize the resolution on your desktop.

Viewport Example

Viewport Example

Resource 2:

Sitepoint

This portion of Sitepoint.com is a HTML5 development center that does exactly that. Here there are articles upon articles of everything related to this new language. Whether you are looking for the latest updates on a specific browser or looking for recent web trends, this site should diffidently be added to your bookmarks.

Example from sitepoint website.

Example of threads on Sitepoint.com

Resource 3:

Movethewebforward

Movethewebforward.org is a very helpful website for web developers of all experience. The website features three different main categories: Level up!, Dig Deep, and Virtuoso. Each category has its own link of valuable resources that help define web standards.

Level Up! portion of Movethewebforward

Level Up! portion of Movethewebforward.org

HTML 5 Website:

Colorz

Above the fold view.

Above the fold view of Colorz.fr

Colorz is a french web development agency that pushes for unique web designs. When first opening the page, you are presented with a large slider that not only slides from image to image, but also animates each element in the image. Just from this alone, you can already get a feel for how interactive the site is. Scrolling down the page, you are presented with callout images that vary in interactive effects.

When opening up firebug to see how the website was built, I noticed that there where scripts all over. After digging deeper, I found the container that nested all of the HTML5 elements. What I noticed first was that the HTML contained element styles, meaning there were style elements contained within the same line as the div id's. Even though these styles were in the HTML, they also showed up in the CSS styles with the tag ‘element’.

Markup of Colorz.fr

Markup of Colorz.fr

This website seemed to work well in Firefox, Chrome, Safari, and Opera but when I viewed it in IE, right off the bat I noticed a problem with the image slider (who would have guessed). Not only was the positioning off center, but the slider didn’t ‘slide’ between the different images. It just simply stayed on the first image.

Internet Explorer bug.

Internet Explorer bug.

The only downfall to this elaborate website, other then a few bugs in IE, is that it is not responsive. This came to me as a surprise considering how much detail went into the actual design.

Blog Post 2: JavaScript Frameworks

One of the amazing things about the web is that it offers us so many different tools to enhance our everyday life. As a web designer, JavaScript coding is not something that is often taught to graphic designers since it requires a completely different major (Computer Science). But that doesn’t mean applying JavaScript to our websites is out of the question. Fortunately for us, there are many different open-source JavaScript frameworks that provide pre-made, fully customizable plugins that are free to download (such as jQuery, MooTools, Aculo, and YUI).

What makes these frameworks so beneficial is how easy it is to use and apply customizable plugins to your website. Everything that you need to do in order to successfully apply a plugin can easily be found online with details on what to place where in your HTML document. On top of that, the libraries of different functions is endless with new plugins being developed and released day after day by a strong following of field-experienced JavaScript developers. The only downside with applying it to your site is that it will require all new visitors to have longer download times while your browser reads the JavaScript file, but even then the outcome will be worth the marginal wait.

As I was browsing through all of the different options available in the jQuery library, here are some of plugins I found that could benefit my future website designs:

liteAccordion v2

Horizontal image sliding bar.

This is an interesting image display that horizontally slides through the list of images while also providing click-able tabs to each specific image. By keeping the tabs visible, it allows the viewer to say in control and decide which image he or she would like to see.

Login or Signup with jQuery and PHP

Simple log-in form.

Filling out lengthy registration forms is not something internet users like to do. A long questionnaire can be a instant turnoff and potentially scare the user away. By simplifying the process, it could lead to increase hits to the website and gain your site more registered users.

JTextTranslate

Easy drop-down menu translator.

Since websites are viewed on a global scale, why limit your website to just one language. This plugin allows users click a small icon and select their language from a drop-down menu, automatically translating the text. By breaking the language barrier, this simple plugin could potentially allow your website to gain more views since it will give access to a larger population.

xBreadcrumbs

Add breadcrumbs to prevent user frustration.

When designing a large multi-page website, user usability must always be the first priority. If the user gets lost while digging deeper into your site, it will cause frustration and force the user to just leave your website. By providing a breadcrumb navigation, it will help guide the user back to a previous page.

gMap

Embed Google map.

This plugin is a simple way to embed a Google map onto your website. This could be key on a business website to provide customers with a map to the store or providing the directions to an upcoming event.

Inspirational jQuery Website

Grunnarbeid.no

Large-scale imagery calls attention.

A website that instantly caught my eye was Grunnarbeid.no. This single page website is for a Norwegian construction contractor that provides its services to the region of Mid-Norway. What first brought me to the website was the large-scale images that use jQuery to periodically slide across the container. When the image first slides onto the screen, an additional title box quickly slides on and off from the left-hand side; giving details of what the image is about. When hovering over the image, along the right side is a small panel with mini-icons that provide the link to each of the images.

Translation bar opens up the target audience.


Icons provide links to previous images.

Without this next jQuery plugin, I would not even be able to know what this company is about if it wasn’t for the horizontal in-line translation bar. By providing me with an “English” option, this company has opened up their target audience to more then just Norwegian users.

Concerning the design of the website, they are very successful in portraying the hard-working people that the company values. The high quality images come from the working environment which includes dirt-covered workers that match the dark texture in the background of the site. Additionally, the workers are wearing the same red color as the red accent lines throughout the page.

Under the sliding image box the layout turns into a three column grid that gives the “about us” content with high contrasting light-grey text. In this 400 pixel high container, all the information for the site is contained here. Below this is the footer that gives the contact information for the company.

Blog Post 1.5: CSS Zen Garden

CSS Zen Garden is web development tool which provides web designers with the challenge of creating their own CSS styling to a standard, unmodifiable HTML document. For project one of Advanced Web, we have been given the task of creating our own one-of-a-kind Responsive Zen Garden webpage, which we should challenge ourselves by using a different illustration style then in previous projects. For me personally, many of my previous designs have been vector-based illustrations, therefore I want to trail away from the norm.

Moodboard for Project 1: Responsive Zen Garden

Illustration Style

For this first project, I plan on using a black and white hand-rendered style that will at most incorporate one or two additional colors. From here I am presented with a few options: keep my illustrations black and white while having a color in the background, use another color instead of black lines, or use a single-solid color to fill in some of the illustrations. Examples of each of these are found in the above images. By doing this, not only do I feel that I give myself the challenge of trying out a new style but it will also add diversity to my portfolio.

Blog Post 1: Responsive Web Design

Responsive Web Design is a fairly new term for how web developers should approach building a website that is consistent in design and legibility, regardless of the device internet junkies are using. With the rise of mobile devices, tablets, gaming consoles, and future technological inventions, designers are challenged with building a website which the layout and image sizes change depending on the resolution of the screen.

Last semester for my final project, I created a website that looks good on a desktop or laptop, but once the resolution width of the browser becomes smaller then 630px (width of my container), content disappears. By using responsive web design I could alter the website, forcing it to adapt to the screen size, regardless of the resolution.

1024px Wireframe

Fluid Grid:

The first step in transforming my fixed-width website would be to use a fluid grid. Simply put, by changing the width values from pixel to percentage, it allows the browser to alter the content to proportionally fit the current resolution size. In my current design, I have all of my images set to the exact px size of the file. If I wanted to change this and make it responsive, I would take the pixel width of the image and divide it by the size of the division it is contained in. I would then use this percentage in place of the original absolute number.

Media Queries:

Placed within the CSS of the site, Media Queries allow the browser to determine the resolution size of the screen the viewer is using before it gets rendered out. Once this is determined, the browser will load a different style sheet. For example, if the resolution is smaller than 480px wide (a typical smart phone), the browser will then load a designated style sheet specifically designed for any resolution 480px or less.

Example of Media Queries from Smashingmagazine.com

Adaptive Images:

Let’s pretend that I already rebuilt my website using fluid grids and media queries. There is still one major problem, image resolution. When browsing on a mobile device that has a pixel width of 480px, it doesn’t make sense nor does it provide good usability to have the mobile device download the same large image that you use on a computer monitor with triple the resolution. Instead by adding a client-side script into the HTML of the document, it allows the browser to use the same media queries for the layout of the site and re sizes the images into more compatible resolutions.

Adaptive Image script created by Pornelski

Helpful Tip:

Less to download, better user usability. Not all the images in a standard 1024px resolution website need to be kept when scaling down the browser. Therefore, in my website, some of the extra images would disappear by using a simple command, display: none;.

480px Wireframe

Additional Links:

Inspirationfeed.com

Webdesignshock.com

Blog Post 8: HTML5

Since 1997, web developers have been using the same language (HyperTextMarkupLanguage4) to develop their websites. That’s 15 years of manipulating older technology to keep up with the current demand of the fast growing world-wide-web. Now that smart phones are on the rise, developers need an alternative to the out-dated flash plug-ins. The introduction of HTML5 will solve many of these unanswered questions.

Multimedia:

One of the best additions to HTML5 is the support of new multimedia elements:

<video>

<audio>

Example of video markup from w3s

 

 

 

 

 

 

 

 

 

 

Placed into the html of the document, these elements allow videos and audio to be added directly into the content of the website. This eliminates the need to use flash-plugins.

Tags:

HTML5 brings many new additional semantic elements to the table, allowing for better organization of the markup for a web page. Some new important tags to take advantage of include:

Example of a standard HTML5 layout via. webmonkey.com

<header>

<footer>

<nav>

<section>

<article>

<aside>

 

 

These tags are helpful when creating the layout of the page. Instead of having many different divisions with either identifiers or classes assigned to each, by simply adding these tags, browsers will be able to separate these elements from the other divisions within the content. For a full list of the new tags, visit: w3schools.com.

W3schools.com gives a full list of the new tags.

Local Storage:

This is a new feature that is implemented with HTML5. When a user is viewing a webpage, normally cookies are used to track the data collected. Now, this information can be stored on the local-machine of the user (up to 5MB). What makes this special from cookies are that the data is only accessed as needed, instead of during every request to the server. This allows for a better viewing experience without slowing down the performance of the website.

CSS3:

Visit Css3.info for information on the new features in CSS3.

Currently, not all CSS3 features are available to every web browser, making it hard to develop for all of the different browsers. With the launch of HTML5, it will fully support all features that CSS3 makes available.

Release date?

So when do we expect to be able to fully use all the features being brought forth with HTML5? In the far future. Yes, some sources indicate that it could be as late as 2022 until the official release. This seems like a very long time away and you might ask what is taking so long. Well, HTML5 is completely changing how a browser renders a website so there is a lot of technical work that is involved. However, this does not mean you have to wait until then to start using some of the features; 2022 is just the estimated date of when the ”final” product will be ready. For example, Apple products that are using the latest version of Safari, support HTML5 and CSS3.

Helpful Links:

CSS3.info

Html5rocks.com

W3schools.com