Responsive web design is an approach to web design that crafts site with an optimal viewing experience on all devices and screen sizes. That means easy reading and navigation with minimal resizing, panning, and scrolling.
In Canada 49% of all time spent online is spent on mobile devices. Each year this figure increases. It is import that your website and its user interface work well on a small screen. This website works on a small screen. Go ahead, if you’re on a desktop, resize the screen and watch how the menu and content shifts to adapt automatically.
When creating a responsive website it is important to plan accordingly. All of the page’s elements must be organized in a way that will scale correctly or move from a multiple column to a single column configuration.
The work gets done in the page’s CSS file. CSS, or Cascading Style Sheets, is a style sheet language used for describing the look and format of the page.
Response Website Example
Let’s say we have a standard page that has a banner and a feature list. We want the banner to stretch the full width of the window and the feature list to be split into three columns. On small screens we want the feature list to be split into three rows.
This example page will automatically scale to the size of the window. But what happens when we reduce the window to the size of a mobile device (480px)?
As you can set the text in the feature list is squished together and extends past the call to action buttons. We will now alter the CSS to target specific screen sizes. On mobile screens we will change the 3 columns to 3 rows.
The CSS now targets devices smaller than 768px and provides special rules to format the page accordingly.
Contact us now to get your responsive website created or an existing website converted to a responsive design.
Start your next project with Hutz Media.
Contact us now for a free quote.