Visual Effects and Mobile Websites

“Visual Effects and Mobile Websites” Please respond to the following:

Imagine that you add Internet Explorer filters to a Website containing fixed images to enhance the images with a shadow. After adding the filters, it fails to work. Explain why this may have happened. Propose another solution that you can use to get the desired effect.

If I applied the filter in-line using the “ELEMENT STYLE=
“filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)”” syntax, this filter will only work in IE, and only in versions 8 or earlier. This feature was deprecated as of IE 9. Also, this syntax it isn’t supported in other browsers.

If I defined the filter in my CSS file, it’s possible I’ve forgotten to include the browser extensions for the browsers in my declaration block. My CSS file only includes the ms-filter: property.

I would remove the in-line style reference from my HTML and add the following to my declaration block:

-webkit-filter: filter(value); — Chrome, Safari, Opera

-moz-filter: filter(value); — FireFox

-ms-filter: filter(value); — IE

I used -webkit-filter: filter(value); in Assignment 8 and it worked in Chrome, FireFox, IE 11 and Edge, which would indicate that IE 11 and Edge are playing a little better with other vendors. Also, Microsoft is transitioning away from IE and to Edge, and both IE 11 and Edge appear to have good support for standard HTML5 and CSS3.

References:

https://msdn.microsoft.com/en-us/library/ms532985(v=vs.85).aspx
http://www.w3schools.com/cssref/css3_pr_filter.asp

Mobile Websites, in most cases, should be simpler than standard sites. How could you design a mobile Website so you would not have to eliminate graphic elements? 

I would design the site that is primarily text, and only use graphics that are absolutely necessary to communication information to the user or enhance the user’s mobile experience. I would especially avoid large images and ads, because this content detracts for the mobile user’s experience.

Indiscriminately using images on a mobile site results in a site that is excruciatingly difficult to view by mobile users. Mobile networks are slower than fixed data connections and have much higher latency. Also, many providers change for data transfer; it’s important that the data be meaningful to the user.

Reference: http://www.w3.org/