700 S. Third Street ... Belleville, Illinois ... 62220 ... 618-233-3333

About our New Responsive Website

The new Belleville Supply Company uses the new Responsive web design, or RWD. This design formats a webpage layout to be fluid for optimal viewing and navigation across a wide range of devices, including traditional PC and Mac desktop and laptop computers, tablet and surface, smartphones, and all other mobile devices. By detecting the device screen width using Media Queries css code, it allows for better cross-device viewing by shrinking or expanding image widths, changing font sizes, reducing margins and hiding non-mobile friendly elements.

Traditionally, the Belleville Supply Company website was designed with fixed widths, set image sizes and a specific overall browser width. With the introduction of responsive design, web pages can now be designed to respond or "flex" as the browser width narrows. This allows html webpages to shrink or expand to fit mobile and tablet screens.

To allow HTML webpages to adapt to the different device and computer screen sizes the most common widths used are 320, 480 and 768, 1024 pixels for smartphone portrait, smartphone landscape and tablet portrait and landscape views respectively. Rather than create a website at 320 pixels wide as the smallest common denominator, css "Media Queries" are built into the designs to allow a website to change layout, image sizes and other design elements for optimal viewing across all devices including desktop, laptop, tablet and mobile.


Benefits of Responsive Website Design

There are a lot of advantages to building a website using this style of code. First and foremost, a responsive website, flexing for individual display screens, will look better and function better across all computer types and devices. Font and image sizes will be more cross-device viewable and links and buttons will be more clickable.

Importance of Flexibility for Mobile Devices

Page widths, more than heights, are important for screen viewability. Because of the large number of devices, and different browser software available, any website needs to be flexible enough to be cross-device viewable. Desktop and laptop computers, tablets, mini-tablets, smartphones and other devices all need to be considered when designing a website. Screen resolution is a major factor and responsive design using Media Queries allows a site to conform to a vast array of devices. CSS styles should be included for both a maximum and a minimum page width so a site can flex and respond to fit the browser. Every device browser has different proprietary rendering aspects so any new website should be fully tested.

For a mobile only design, web page width should be kept under 320 pixels. For landscape view this will be 480 pixels and on tablet the portrait screen width is generally 768 pixels with 1024 for landscape view.


File Byte Sizes and Load Speed

Although Internet connections get faster each year, it is important to consider the file sizes of website images, video, widgets and other applications to allow for fast page loading.

A general recommendation for mobile page loading speed is to keep your home page under about 500kb total including all images and files and applications. Video and other large footprint animation should be used on your website sub-pages. A fast loading website is the goal, and the more files, linked CSS, widgets, Javascript, and images on a webpage the slower it will load. Additionally, some search engines do rank faster loading websites higher.