Fabio Basile - Digital Graphic Art main wallpaper
Fabio Basile - Digital Graphic Art main header

Fabio Basile - Digital Graphic Art main menu x

Web Design Projects:

Wyldsky

Wyldsky

Web design, Brand Identity Development, Graphic Design, Production

January 16th 2019

web design

Sachs Day Spa

Sachs Day Spa

Web design, Graphic Design

August 15th 2018

web design

Wolf Plumbing

Wolf Plumbing

Web development, Graphic Design, Logo Design, Brand Identity Development

June 13th 2018

web design

Commercial Web Design


Commercial websites in the early 1990's were very different from what we see today, due to the limitations of the available technology. CSS was very new, and web developers were restricted to using the table elements provided by the first iteration of the HTML markup, to wrestle graphic elements together into a format that would make sense to the intended audience.

When Adobe Corporation made Adobe Flash available to the masses, it sought to fill that need for consistency of brand identities on the web, through a browser plugin that would magically allow websites to, not only reflect the brands they belonged to a lot more freely, but also to incorporate new exciting elements such as animations and video, and even a degree of interactivity.

In a world where desktop PC's dominated Internet usage, Adobe Flash was the go-to technology to know, for anyone interested in creating commercial websites.

The advent of touchscreens and mobile devices featuring far higher hardware specs than their desktop predecessors, lead to a shift. Companies moved away from Flash, as they discovered responsive design, with the integration of Javascript and CSS3, to enable users to browse services and products using their smartphone screens.

Today, Flash is a relic of the past, one that has been actively deprecated by browser vendors like Mozilla and Google, often on account of security concerns, which happens to be a big deal nowadays, considering the frequency of data leaks affecting web users worldwide.

Mobile Responsive Design - Navigation

The "Mobile" following "Responsive Design" is an important descriptor of a type of coding style that takes into account touchscreens, versus point-and-click navigation.

Building websites for touchscreens requires a different approach, as the way buttons and other interactive elements respond on a touchscreen differs, when compared to what happens within a desktop operating system.

On touchscreens, an element is clicked the moment it is touched, unlike on a desktop PC where hovering a cursor on any element doesn't do anything unless a physical button is clicked, or a trackpad is tapped.

Also, on mobile websites it's very common to find elements that are triggered while being dragged, or swiped. Click-and-drag is available on desktops too, but it's not as functional or useful as it is on a smartphone, where such interactivity is native of the operating system in a much more intimate way.

Swiping is a type of dragging action, but it is only used on touchscreens, because it's typically something that is triggered when interacting with specific hidden elements present along the edges of a screen.

Another differentiation between desktop and mobile experiences is represented by rollover, or "on-hover" events, that occur when hovering a cursor on a link, or a button. This action, on desktop computers may trigger the element to change its color, size, or effect, to convey the illusion that it is being physically pushed or touched.

On mobile devices, this effect is less common, because clicking on elements is a one-step operation that instantly brings the cursor to the interactive elements, and clicks it immediately, leaving no time for any visual effect to occur.

Mobile Responsive Design - Content

The way content is presented on mobile devices is different than on a desktop screen, because the space available is limited.

While desktop websites require a large amount of empty space, with a typically centered fixed-width format that allows for multi-column text, and more complex and elaborate graphic elements, a mobile screen is restricted to showing only the bare minimum in terms of graphic layout. Websites designed for mobile screens, usually display content in a single column, with large buttons and other interactive elements that allow the user to browse all available content using a finger.

Beyond Mobile

While it's easy to think that mobile responsive web design is restricted to smartphones, we often forget that there is a wide range of desktop devices that need a mobile approach to web design. For instance, ultra-portable devices like smaller laptops and Windows tablets may have trouble displaying some websites correctly, if the desktop width of the content extends beyond the device's screen size. This is why it's important not to lump up all desktop devices into one big standard category, when organizing how content is displayed.