Responsive Website Design

Creating Mobile Friendly Web Designs

1-800-555-1234

Blue photo of 2-D flowers on a transparent background

Blue 2-D image of a person on a transparent background

Mobile Web Browsing

With the increasing number of website users turning to their mobile devices to browse the internet, many companies feel the need to ensure that their new website is mobile ready. Currently, over 50% of all website traffic comes from mobile browsers on cell phones and tablets. The early solution to this issue was for companies to create a second version of their website where the layout and content were completely reformatted to fit an average sized cell phone screen. These sites are referred to as "Mobile Sites" and have now become a thing of the past. The problem with "Mobile Sites" is twofold; first if you have a Desktop version and a Mobile version of your website, you are now responsible for updating two websites rather than one. The second issue with "Mobile Sites" is that they are still built to a specific size, which means they are still only in place to support one type of mobile phone size.

Ready for All Screen Sizes

As the variety of different sized mobile devices continues to increase, web developers have been working towards a solution for their websites to be fully supported on all device sizes. The solution is Responsive Website Design. Responsive websites use modern CSS and JavaScript code to allow the website to seamlessly adapt to any screen size it's viewed on. This means that your website content will automatically adjust and resize itself to the optimum size and placement for the screen size currently being used. The page content on a responsive website will react to the change in screen size instantly, this means that even rotating your phone from portrait to landscape view will trigger your page content to react and adapt to the new screen dimensions. The way a responsive website's content adapts can take many forms from text and image resizing, to adjusting content placement & even hiding less important content if it's not relevant to smaller devices.

Iphone, tablet, laptop, and all-in-one computer sitting on a white platform

Responsive vs Fixed Width Websites

Since the beginning of the Internet, websites have been designed using a Fixed Width format. This means that even though the background colors or graphics extend to the edge of the window, the content (text & photos) are constrained to a container that has a set width. This fixed-width design is mainly used to prevent all of the page content from shifting around and getting jumbled on different screen sizes and devices. Responsive websites are built on the opposite principle; they use a container that scales larger and smaller while shifting and adjusting the content for the best placement and size. This key difference between these two website formats plays a huge part in mobile web browsing. Fixed width websites will display content very small on cell phones; this is because everything is scaled down equally to fit all of the content on the screen. Responsive websites will individually scale and adjust the placement of all the content to avoid the user having to zoom in to read text or see photos. Many responsive sites will also have a navigation menu that is automatically formatted to make links easier to click while on a mobile device.