Can Your Website Design Handle the Change?

Posted on by

Share Button

Leonardo da Vinci captured it best when talking about the work of a designer. He said, “Art is never finished, it is abandoned.” A web designer’s work never truly ends.

A web designer is defined by the transience of the web. Their designs become outdated or in need of revision in a year or two.

Inconsistent window widths, different browsers, user preferences and screen resolutions are only a few intangibles designers deal with when they publish a piece of work. Over the last few years, designers have become incredibly adept in dealing with these intangibles.

responsive-design-header

But the canvas is constantly shifting. Mobile experience is going to outpace desktop viewing in a couple of years.

Video game consoles and TVs have web browsers, and some of them are very good. Designers are having to design for keyboards, touch, video game controllers and remotes.

There is an ever increasing demand for devices, input modes and browsers than ever before. How will it be possible for our designs and for web designers to adapt?

A Responsive Foundation

There is a movement in design called responsive design. The idea is that the design of a web would adjust based on device used. Designers have started to do this more and more on the web.

Responsive web design is a technique that insists that the design is adjusted to fit the user’s screen resolution, width, platform and orientation.

A responsive site serves the exact same page to everyone, but the design and the layout is optimized for viewing experience on each platform.

For example, you can load the same web page like Anphira, but the design will look different depending on if you are viewing it on a desktop, phone or tablet.

Why Bother With Responsive Design?

As noted above, the devices that need to work with your website are growing at an exponential rate.

New devices and new screen sizes are being made every single day. It would be easier if there was a standard among smartphone and tablet developers, but there is not.

And there probably never will be. I have to clear something up. Mobile design is not responsive design. Mobile design is a small speckle in the cosmos of responsive web design.

Mobile designs are created specifically for mobile devices, but they are not flexible and are often outdated in a matter of months. A responsive site design provides the same experience across different devices.

Lastly, you should care about responsive design because Google demands it. Google recognizes how important responsive design is becoming as more users switch to mobile browsers and applications to view their favorite websites.

In their most recent algorithm, they publicly said they are putting a stronger emphasis on responsive design and they are ranking sites with a responsive design higher.

So if you are interested in higher Google rankings, it is important to have a web design that is responsive.

How to Make Your Site Responsive

Hi, reader. Meet my friend the media query. Recently, media types have been improving after the implementation of CSS3.

A media query allows designers to specify the design a web page should follow if certain specifications are met.

There are two components to a media query: the screen and the media width. In plain English, the style sheet will ask if the screen meets certain criteria. If it does then it will render that specific bit of code.

For example, the media query might look something like this:

@media screen and (max-width: 480px) { /*do some specific CSS code */ }

The code is asking if the window is less than or equal to 480px. If the window is less than or equal to 480px, then that specific CSS code will be executed.

The example code above can be placed in your HTML files inside <style> tags, but you should place it in your CSS files, which is standard practice. This will allow you to create and load one stylesheet which is much faster.

Media queries are basic conditional formatting that allows a web design to scale beyond its initial creation. You can target different font-sizes based on screen sizes, add or subtract elements based on screen size and so much more.

There is so much more to media queries, but that should at least give you a starting point.

How Do I Know If My Site Is Responsive?

There are a few ways that you can check if your site is responsive. If you have a design or you are using a template that has been made in the last two years, then your site is probably responsive.

If you wanted to be sure and do not mind navigating around your HTML and CSS files, then you could look for any media queries. Do you have any code that looks like this?

@media screen and (max-width: 480px)

If you are uncomfortable with navigating around your code, then you can view your website on different platforms. You can do this by visiting your site on a desktop, laptop, mobile phone and tablet.

Or the most simple way is to visit Am I Responsive. Type in your URL and it will show you the view of your site on a desktop, laptop, mobile phone and tablet. How does the design look?

If it looks clean and a design that is optimized for the platform, then your site is responsive. Here is an example of our site:

Anphira Design Responsive

You can see our site is optimized, has different designs, and looks clean for the platform that it is on.

Responsive web design is allowing web designers to move forward. Finally we can adjust our sites for the ebb and flow of the ever changing internet.

All of the sites that we create at Anphira are designed to be responsive. If you need a new website, then we can help you. If you have an existing website that needs to be made responsive, then we can help you.

Share Button

Leave a Reply

Your email address will not be published. Required fields are marked *