Desktop vs Mobile: The Importance of Proper Page Layout

This week, I took a look at two different companies that provide their users with both a desktop site and a mobile version of the company site. These site versions varied in size, content available, layout, imagery, and in some cases, function. Read on to see what I found.

The first site I visited was Bungie.net. Being very familiar with this site, I know the company has a tendency to favor wide, boxed layouts with expanding navigation panels.   This was the case with the desktop site. The main focus of the page is the image reel that acts as the company news panel. Beneath the reel is a scrolling set of boxes each featuring other news via Bungie’s Twitter, Facebook, their customer support, store access, and so on. The more active user intensive navigation bar rests at the left side of the site, providing access to feature more likely to be used by an individual who is both registered on the site and who uses the social gaming features the site provides. Bungie’s mobile site, however, seems to be strongly focused on catering to those aforementioned registered members. The mobile site focuses on being logged in and the features that are most commonly used by logged in members, such as game stats, character status, clan information and the like.

The second site I explored was the Dell website. The desktop website has a simplistic layout but depends heavily on the navigation panel at the top of the page. The home page merely gives a way for customers to log in, however, it does provide nearly direct access to customer support. The mobile website seems more focused on the shopping side of the company, and gives expandable menus to categories such as laptops, desktops, deals, tablets, etc. Support links are located at the bottom of the mobile site rather than right in the center as in the desktop version.

Obviously, the different screens sizes provided to the public today require companies to shuffle and reorganize page layout and content to give the user a comfortable and clean experience. Some websites succeed in making their mobile sites just as comprehensive and navigable as their desktop version while others focus on providing heavy site users simply with content they need access to. Page layout is very much a vital portion of website design no matter what the screen size is. Users expect easy navigation and access to content without a struggle. Having a bad mobile site can cut site traffic down to an extreme. These are all things one should take into consideration when putting together a website for themselves or a client.

Until next time! Have a great week!

About CSS and Why it is Vital to Website Design

Today I am going to talk a little about one of my person favorite parts of web design: Cascading Style Sheets. Now, if you’ve spent a lot of time designing sites you probably know that CSS is the preferred way of giving a website a more aesthetically appealing look.

Essentially, a cascading style sheet contains the selectors and elements that choose the element to be modified and define the properties and values that will applied to the element respectively. The cascading style sheet is then linked to the HTML website page using the “link”element. This allows all of the element changing properties and values to be connected to the HTML elements on the website, giving them the designer’s desired color, style, and arrangement.

Fortunately, since CSS saves so much time and helps create cleaner HTML code by allowing the style of the webpage to be set outside of the main HTML pages, most browsers have a solid level of CSS support and may only seem a bit buggy at times. This allows web developers to keep their HTML coding mostly clean and free of pesky inline and embedded styling.

The W3C recommends using and external CSS page rather than inline or embedded styling to improve content accessibility and create overall cleaner HTML pages. They also recommend external CSS for simplicity’s sake when styling sites with many, many separate pages than needs to stay consistent in style and setup.

CSS3 is the newest set of standards for CSS overall. This new set of standards is completely and totally backwards compatible with the older versions of CSS. CSS3 introduces several new features that are still are being adapted and implemented by most leading browsers. For example, images can be used to create borders now using the new “border-image” property. CSS3 has also introduced box-shadow properties. CSS3 brings all kinds of new style options to the table of developers everywhere.

For more information on CSS and CSS3, as always I recommend taking a look at W3Schools tutorials and explanations right here, and you can also view the W3C CSS working group’s progress here.

Until next time, readers!