AYCH TEE EM ELLE 5

23 Mar

According to HTML5 Rocks, “HTML5 accelerates the pace of your innovation and enables you to seamlessly roll out your latest work to all your users simultaneously.
From my research, it seems that HTML5 is the latest replacement for Flash. To this I say, thank you! Thank you! Thank you! The “unexpected” performance of Flash has haunted me throughout my student career.

HTML5 promises to replace all the flash issues: Lack of search engine optimization, compatibility issues, performance (see image above) and lack of iPhone support. HTML5 is said to build to be as “simp as possible”. Each element in an HTML5 structure has its own header, content and footer tags for easy to read code that is SEO friendly. But the real talent lies in the animated content it can deliver, as well as its responsiveness to multiple platforms, such as desktop, tablet and mobile devices.
So what are the drawbacks?
Security seems to be the biggest troubling factor. With increased popularity comes increased hacking, and many agree that the languages is not developed enough for proper online security. Other drawbacks include the limited features available, many argue that HTML5 offers nothing fresh to offer. Pair that with the browsers that still do not support HTML5 technology, and you have a few more problems to deal with, asking the question, is it really worth designing with at this stage in development?
The most informative article I read about HTML5 was written by Viki Hoo at sitepoint.com, called “The 5 things I love about HTML5”.
She illustrated the layout tags, form system, and explains the API’s for video and audio, geolocation and canvas with relevant pictures.


According to an article written by Chris Mills, “A developers introduction to HTML5”, on developerfusion.com,
HTML5 includes all the features from HTML4.01, but it adds several powerful new features that can be categorized into three types:
•    New semantic markup elements, to more accurately describe page features that we’ve previously implemented in non-semantic, inconsistent ways, such as page headers, footers, navigation menus, and form features like date pickers and range sliders.
•    Features that we’ve previously turned to plugins (like Flash) or JavaScript kludges to provide, such as video, audio, form validation and animated graphics. HTML5 is deliberately written to compete with plugins.
•    Background information that was never previously available, but really invaluable such as error handling: how a browser should behave when it encounters bad markup. Ok, so this is more relevant to browser vendors than developers, but it is still worth a mention.
I suggest to have a look at his larger list of HTML5 features, where he closely defines them and explains their usage in a little more depth. He suggests, as designer, you learn HTML5 without a doubt, but when you are ready, and with the understanding that it is still developing and still rapidly changing (but only to get better).

One feature I have been interested in using for recent projects is the video features. 1stwebdesigner.com has an easy explanation about implementing HTML5 video.


It explains the video tag and custom controls, and even how to use an HTML5 video background with jquery, along with other links for useful jquery plugins.

Since we have recently learned forms, and I find them rather appalling, I thought a forms explanation would be valid as well. Through my research I have read good and bad reviews on HTML5 forms, and John Cox covers them in detail on tutsplus.com. However, it doesn’t seem like HTML5 forms have much compatibility across browsers.
While looking for a website to critique, I came across MANY HTML5 websites that were down, currently working, not working, in development, etc. Also many links pointed to sites that were no longer as visually interesting as they were at the time of the blog post. I’m pretty sure this is due to the incompatibility of HTML5, and how much it is changing. Anyway, furthering my interest in HTML5 video, I had a lot of fun with experimental site
www.thewildernessdowntown.com


Partly because I was surprised I actually remembered the address I grew up on, and partly because the street hasn’t changed much, but mostly because of the video features you can include in a webpage. I think this site is a great example of the video features and capabilities of HTML5, and a good waste of 15 minutes or so. Enjoy!

Project 2 Mood Board

14 Feb

For project 2, I am going to establish the digital presence of my publication magazine project with a website and a digital version of the magazine. Although the additional components will maintain the same look and feel of the magazine, they will each present their own unique options. The magazine is based on raw food dieting, and the importance of nutrition and an active lifestyle. I researched many websites for the competitors  magazines, restaurants, and magazines in general, paying closest attention to their use of a grid system. I focused a lot of my research on layout and presentation of the material. Obviously, with restaurants and food magazines, there is a lot of emphasis given on the food and ingredients themselves, with vibrant, appetizing pictures. These will play an important role on the page headers. The magazine itself follows a clean, simple approach, and I intend on having the website do the same. I noticed that many were successful with white backgrounds and black text, a design choice I have not yet applied to any of my web designs. I would like to avoid being too playful with the design, but continuing to incorporate the wholesomeness and everyday aspect of the brand.

JavaScript

7 Feb

Personally, I feel as a web developer, designer, and user, javascript is essential if you want to be noticed, increase usability, and evoke user response. Web is all about interaction, and java enhances that interaction.
Java can be incredibly intimidating to the designer unfamiliar with C programming, but I think what it has to offer outweighs the complexity issue. While debugging and programming can be a virtual headache of their own, the chances are good that someone has already done it for you, and there are numerous plug-ins available that have already been tested and provide working enhancements for your static website.  Search bars, drop down navigations, and rotating images are all excellent and subtle examples of simple, easy-to-find-and-manipulate javascript. Sure, the programs can get seriously intense because java offers a world of possibilities, but there are plenty of resources on the web that will “hold your hand” through learning and manipulating scripts. One I found that was really interesting is AjaxDaddy.com

AjaxDaddy offers a vast array of javascript snippets– jquery slideshows, galleries, auto-complete text field widgets, tootips, etc.  You can see every demo in action, and all the sources are included for download. But the best feature is the embedded javascript editor, which allows you to make changes and instantly view the results. Making the script fully customizable for your own designs. It covers jquery and ajax examples, and I recommend everyone give the site a visit!

I’ve included some links to a few examples of beginners plugins on AjaxDaddy that can easily improve your websites design and functionality.

jQuery Tabs
A simple, sometimes overlooked feature that can be very impacting for navigation. It’s a quick and easy unobtrusive tabbed navigation interface that uses slide and fade effects.
http://ajaxdaddy.com/jquery-tabs.html

SlideShow Alternative
This is an easy to implement timed image rotator. Good for showcasing different features of a product or website, making your homepage more dynamic.
http://www.ajaxdaddy.com/demo-slideshow-alternative.html

Fisheye navigation
This is a fun plugin for enhancing a navigation or sorting through an image gallery
http://www.ajaxdaddy.com/demo-interface-fisheye.html

Since we are implementing forms, I thought a few form plugins would be appropriate as well.

Javascript Calendar
This is a handy tool that uses a calendar pop up to insert a calendar in a form. In my opinion, the easier a form is to fill out, the more likely someone is to do it.
http://www.ajaxdaddy.com/swazzcalendar-javascript.html

Scriptaculous Autocomplete
Uses an Ajax autosuggest script that presents real-time suggestions to help the visitor complete a form. Its a great gesture to enhance user experience.
http://www.ajaxdaddy.com/scriptaculous-autocomplete.html

Many of the sites we use everyday implement these simple techniques, such as amazon.com
They make great use of the autocomplete forms, and other techniques like tabbed navigation.

Digital Mood Board

11 Jan

Here is my moodboard with a bit of confusion attached. I based my moodboard on the rough that I felt was the best design choice. The theme is based on digital electronics, and the page would resemble the layout of a circuit board will similar elements and features. The design would most likely be vector based, with darker colors and a few bright electric colors like blue or green (I am thinking neon here). The design would be successful by focusing on the principles of repetition and contrast, with few organic shapes.

Responsive Web Design

6 Jan

My final project for Intro to Web looked something like this:

After researching, I feel that the easiest solution in optimizing the site for a mobile platform is to use the @media rule in the CSS. An alternative option, as listed in my previous post, would be to have the page measure the device awareness and link to a different stylesheet. But, I think I will try the @media rule here.  This way, I can target a specific screen resolution, and based on the dimensions, hide and scale elements on the page.

For the 320px resolution (standard iPhone), I would hide the info-graphic altogether. Chances are, if someone were visiting the page from their smart phone, they would be searching for specific information, and the info-graphic is more of a decorative informative addition to the page, but does not contain it’s core contents. The easiest way to do this would be to use the display property for the division that the info-graphic is located in, and set it to none.

The logo and navigation are essential to the design and functionality of the site. To optimize them for a mobile device, I would probably just scale the logo, and keep it as the first thing on the page when it is launched. Because moving from a desktop browser to a mobile browser typically means changing from a horizontal to a vertical layout, I think changing the navigation to a vertical list would be a good decision. As the user scrolls down, they would go through the navigation, then onto the contents of the page.

 

 

 

Following the navigation, I would scale the information (the problem: every piece of plastic still exists…) to fit within the target resolution. I would also remove the float attributes to the bottom green, blue and orange boxes, so that they sit on top of one another in a vertical format.

 

 

 

From the reading and research, it seems that the scaling can be somewhat difficult. The first article, by Ethan Marcott from A List Apart, simply states, “Don’t mind the unsightly percentages” in his examples. But after further reading, these percentages are quite important. According to Nick Pettit’s article, A Beginner’s Guide to Responsive Web Design, the floating point value is very important, and the number shouldn’t be rounded off. He states that the design will benefit from the “seemingly excessive mathematical precision”.

For iPad and other tablet devices, it seems that scaling the entire page to fit within the screen resolution would not harm the design or functionality of the page. However, if it were necessary to make changes, they would be similar to the one’s made above. There would be a fluid grid with no floating columns, and the images and divisions scaled to fit within the screen resolution, and stacked orderly on top of one another. A more in depth solution would include @media techniques found in Smashing Magazine’s article by Kayla Knight which target the specific layouts, either portrait or landscape.

After reviewing the articles and techniques, then writing this post, I began to implement some changes to my web page, to further test my understanding. It became very clear why it would be easier to design the page for the smallest resolution first, then work one’s way larger.

#8 The Final Shaahbang! Optimizing for Mobile Devices

30 Nov

Cell Phone evolution
I thought a relevant topic for future web design would be the implication of mobile devices. It is estimated that there are more than 2.4 billion mobile phone users, with over 30% of which browse the internet from their phone. While researching, I found a stunning amount of online services one can use to make a mobile website, or make their website compatible with mobile devices. But, as with anything code related, if you don’t really know what is going on with the code, its near impossible to manipulate to suit your needs.

The first thing to consider are the mobile devices that will be browsing your site. Element Fusion has a handy tutorial for optimizing your website for a mobile device, and breaks them up into three basic categories:

  1. Devices with screens that have widths between 320 and 480 pixels and support CSS, screen media types and media queries. This is includes everyone’s lifesaver, the iPhone, as well as Android devices.
  2. Devices with screens smaller than 320 pixels wide that support CSS and that either support the handheld media type or support the screen media type and media queries.
  3.  Devices that don’t support CSS.

The third type are (boring, but) easy. These devices render only content from the markup. Since most of us use HTML standards, it will render effectively on these devices. For the other two, we must manipulate the CSS to accommodate the layout for a mobile device.

The first step in optimizing an existing site is to decide which visual elements should be kept for mobile screen and which to remove. In their example, they highlight which elements to keep (blue), hide (orange), and replace (green).
EF website

The next step is to create a mockup layout for a 320 pixel screen. Their mockup can be seen below. Notice they replaced the standard footer from their homepage with mockup iPhone buttons.

EF mobile mockup

After the design is complete, the implementation must take place. There are certain pieces of code which will tell the mobile browser to change the viewport to the device’s width and link up the correct style sheets. Fortunately, this doesn’t require much explanation, just copy and paste following code into the <head> of your XHTML page:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

The next tag, which is added to the head as well, directly below the previous link, will link to another stylsheet called mobile_simple.css. This style sheet is for the second group of devices we discussed earlier.


<link media="handheld, only screen and (max-device-width: 319px)" href="mobile_simple.css" type="text/css" rel="stylesheet" />

Notice in the code that it only targets screens with a max width of 319px.
For the first group of devices, (screens larger than 320px) the following line should be inserted as well:


<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" />

The final step in optimizing your website for mobile compatibility, is the development of the actual stylesheets. This style sheet, called mobile.css, is to format the mockup shown previously. This is where the difficulty lies, in changing dimensions, modifying the backgrounds, hiding and showing elements, etc.

There are many helpful sites and examples on the web for modifying your code specifically, I have listed a few below, but that detail is for another blog post. Perhaps in Advanced Web next semester.

Fluid Grids by Ethan Marcotte – a helpful article on understanding minimum screen resolution, and converting units using percentages to target mobile devices.  Pixels to Ems taken to a whole new level.

Create A Mobile Site by Designer Break – good ideas on strategy and mobile design, along with helpful examples for HTML links to call and email directly from the mobile device.

But now, for the final touch, some Java script. This script hides the URL bar when the page loads, a pretty cool trick if you ask me.


<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}

function hideURLbar() {
window.scrollTo(0, 1);
}
</script>

As you can imagine, there is a lot to consider when designing and building a mobile website. I think the best idea is to keep it as clean and as simple as possible to allow it to be viewable across as many platforms and portable devices as possible. It is my experience that browsing the internet on a phone is usually for a quick answer or reference, and it shouldn’t be hard to find or the user is unlikely to return.

As a final touch, I added a few links to some free sites which let users build a mobile site quickly and easily. I figure these can be good practice for analyzing and understanding the code. Enjoy!

#7 website deconstruction

21 Nov

I decided to dissect and analyze the one-page website found at
http://thegreatbeardedreef.com


It is a website about a guy named Josh Willis who is applying to be the first ever Island Caretaker in The Great Barrier Reef. I picked this website for several reasons.

  1. It has a fun light-hearted illustration style similar to the website I am building for my final project.
  2.  It uses the j-query/java script for scrolling which I would like to incorporate into my single-page website
  3.  There were several container/division problems I encountered while making the single-page website for the last exercise, and I thought this would be a good opportunity to learn how to fix these problems.

The first thing I noticed is how the designer, Matthew Spiel of TheManInTheSea, uses the auto margin to center the graphic, but also make it work with the background and make the little island man seam to float on the see. How cute. The navigation, also centered, is fixed at the top of the browser at all times, and does not scroll with the content. The page is designed to fit in the 960 browser window and the content designed around the navigation at the top of the page.

The page has one main container, and the first division is for the navigation. The navigation is divided into two sections. The first section is the main navigation, which is made using an unordered list on top of an image placed in the background using the CSS id and background image tags. The second is for the title for the page, The Great Bearded Reef, and a link to vote for the candidate. The link uses some j-query scripting for a lightbox, which may provide to be useful sometime down the road. The designer references his source for the navigation scripting that he uses:
/*————————————————-
I liked the Navigation so much from http://www.huddletogether.com/projects/lightbox2/
I mean let’s face it, it works really well and is very easy to figure out.
——————————————-*/

The first division is simply a place holder for the island guy image and the navigation sits on top of it. The second division starts the first linked section of the site, the introduction to Josh. The division has a left padding to accommodate the navigation banner and an added graphic, then two columns which are each divided again to accommodate the content.

When reviewing the HTML and CSS I was very impressed with its readability and organization. The tags, ids, classes and divisions are clearly labeled and easy to follow and recognize. The container has four divisions total, for the four sections, and is followed by a footer. The footer contains an image and a division for the contact and other information, and also contains all the java script for the site. It uses a background repeating-x value image for the dirt, and the other elements are added within the footer using the img src tag to sit on top.

The website’s coding was relatively easy to follow and understand. The HTML is simple and the CSS takes care of most of the designing while the java script is implemented for the scrolling and lightbox effects. When analyzing the site, I found a few tricks that seemed to work better for this site than in my own. For example, he puts one of his unordered lists within its own division, and it sits along with the content perfectly. Whereas, in my website, I had a hard time positioning the lists and was trying to use margin and padding to fix it.

I think the look of the website is appropriate for its content, and is designed technically appropriate as well. It is interesting to see how the margin/padding is used to keep the divisions separated, and provided a useful example of how to fix the alignment issues with my one-page site.
Sadly, Josh did not win the position he was aiming for, but it wasn’t because of a lack of effort in designing his website.