Connect with us

Business

Beginner’s Guide To Responsive Web Design

Beginner’s Guide To Responsive Web Design

Responsive web design is a relatively new phenomenon . . . so whether you’re a beginner or a professional web designer it can all get a bit confusing at first!  As time goes on responsive web design is becoming more established as a standard practice.  It seems it’s not a fad, but here to stay.  It’s a very different way of designing websites and it denotes the future.

What is Responsive Design?

If you have a look at a website that has a responsive design and gradually make the browser thinner and broader, you should see the layout adjust itself to more easily fit the new size of the browser.  You should be able to make it as thin as a mobile phone and the site will still adapt itself.

Responsive web design was created by Ethan Marcotte.  He wrote a great article about responsive web design that I highly recommend as required reading!  In this article, Ethan talks about all the fundamental ideas that formed responsive web design.  Essentially, that’s what responsive web design is.  It’s not one piece of technology, but a set of ideas and techniques that make up its whole.  This is one of the things that confuses people the most, so I’m going to try and break things down for you here.

Computers are no longer the only piece of hardware with a web browser. The iPhone was one of the first mobile devices to have a really great web browser, and it really highlighted the need to upgrade the experience on the mobile web. Many other companies followed suit and almost overnight, the face of the mobile web had changed.

The changing landscape of web browsers meant that users expected to be able to browse the web on their phones just as easily as they browse the web on a computer. So, in response to this (excuse the pun) web designers started creating mobile versions of their websites. At the time this seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site and a ‘mobile’ version.

Technology never stops moving forward, so not long after the phone hardware market revolution, other form factors rose in popularity. In addition to phones and personal computers, devices like touchscreen tablets and small notebook computers started being widely used.

It’s not just small screens, either. Large, high-resolution displays are becoming much more common, and it would be a waste for web designers not to take advantage of this.

In summary, the spectrum of screen sizes and resolutions is growing every day, and creating a different version of a website that targets each individual device is not practical. This is the problem that responsive web design addresses.

Now let’s take a look at the different factors that make up responsive web design that I mentioned earlier.

Beginner’s Guide To Responsive Web Design

Fluid Grids

The first idea behind responsive design is the usage of a fluid grid. In recent memory, creating a ‘liquid layout’ that expands with the page hasn’t been quite as popular as creating fixed width layouts. However, when you consider the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is too huge to ignore.

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to break down. Fortunately, responsive design has taken care of this problem by using media queries.

Media Queries

The second part of responsive design is CSS3 media queries, which currently enjoy effective support across most modern browsers. They basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify

Using a series of media queries, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:

320px

480px

600px

768px

900px

1200px

These are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to prioritize. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints and highly contextual situations. When deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time. Spend your efforts carefully.

If you can afford to, I would seek assistance the first time you design a responsive site.  You can usually find a local web design company by searching in your area on Google i.e. ‘web design St. Albans’.  If you can get an experienced professional to show you the ropes the first time, you’ll find it much easier to apply the techniques again and again.  Personally I don’t feel you will ever reap the same benefit, from reading and web tutorials as you can from being shown by an actual human, with actual knowledge that you can actually ask questions as you go!

Continue Reading

Recent Posts

4 Reasons to Replace Your Car's Engine With Performance Parts 4 Reasons to Replace Your Car's Engine With Performance Parts
Autos2 days ago

4 Reasons to Replace Your Car’s Engine With Performance Parts

Performance parts are the best kind of upgrades you can make to a car. Performance cars have a higher price...

Maximum Power: Update Your Old House For Modern Electrical Needs Maximum Power: Update Your Old House For Modern Electrical Needs
Home Improvement6 days ago

Maximum Power: Update Your Old House For Modern Electrical Needs

An outdated electrical system can wreak havoc on your energy bills and greatly increase your risk of structural damage. If...

Key Techniques To Learn On A First Aid Course Key Techniques To Learn On A First Aid Course
Health2 weeks ago

Key Techniques To Learn On A First Aid Course

Introduction First aid training is an incredible qualification that can enable one to offer life saving assistance in an emergency....

Best Tips For Managing Your Building and Construction Projects Best Tips For Managing Your Building and Construction Projects
General3 weeks ago

Best Tips For Managing Your Building and Construction Projects

Building and construction projects consist of many tasks, from job-site duties to office paperwork. Juggling it all can oftentimes be...

How To Choose The Best Locksmith For The Job How To Choose The Best Locksmith For The Job
Home Improvement3 weeks ago

How To Choose The Best Locksmith For The Job

The existence of a locksmith is very crucial for society because they help out countless people on a daily basis....

5 Modern Conservatory Ideas To Create A Serene Escape 5 Modern Conservatory Ideas To Create A Serene Escape
General1 month ago

5 Modern Conservatory Ideas To Create A Serene Escape

Having a serene and relaxing conservatory is the dream, especially in the summer months. Creating an extension of your home...

4 Different Types Of Lifting Equipment For A Construction Site 4 Different Types Of Lifting Equipment For A Construction Site
Business1 month ago

4 Different Types Of Lifting Equipment For A Construction Site

One of the biggest challenges on a construction site is the problem of lifting heavy materials and tools to a...

5 Tips That Can Help Your Business Flourish 5 Tips That Can Help Your Business Flourish
Business1 month ago

5 Tips That Can Help Your Business Flourish

Many, both small and big, businesses were affected by the outbreak of the novel coronavirus, no one was spared. Overnight,...

Why First Aid Training Is Essential For Your Business Why First Aid Training Is Essential For Your Business
Education1 month ago

Why First Aid Training Is Essential For Your Business

Introduction All employers, depending on the establishment, should organize and provide basic appropriate conditions for lunch breaks as well as...

Are You Covered? Tips For Finding Affordable Health Insurance For Your Whole Family Are You Covered? Tips For Finding Affordable Health Insurance For Your Whole Family
Lifestyle1 month ago

Are You Covered? Tips For Finding Affordable Health Insurance For Your Whole Family

If you are in the market for health insurance, you may be overwhelmed by the many different features and the...

How to Prevent Potential Hazards In A Lab How to Prevent Potential Hazards In A Lab
General1 month ago

How to Prevent Potential Hazards In A Lab

Unfortunately, lab accidents can happen. When they do, the consequences can be very serious. Some of the most common lab...

How to Extend Your UK Spouse Visa How to Extend Your UK Spouse Visa
Travel2 months ago

How to Extend Your UK Spouse Visa

The UK spouse visa is also known as a UK marriage visa. The UK spouse visa allows married partners of...

How Best Is Automation Helping The Retail Industry to Survive? How Best Is Automation Helping The Retail Industry to Survive?
Business2 months ago

How Best Is Automation Helping The Retail Industry to Survive?

“In the post Covid-19 world, the only place cos are willing to invest is in automation. The return on investment...

Best Artificial Intelligence Trends to Watch Out In 2021 Best Artificial Intelligence Trends to Watch Out In 2021
Tech2 months ago

Best Artificial Intelligence Trends to Watch Out In 2021

Technologies are getting advanced day by day, and according to that, the developers and the mobile app development companies should...

Keeping Your Assets Safe — Crypto Insurance May Soon Become The Norm Keeping Your Assets Safe — Crypto Insurance May Soon Become The Norm
Markets & Finance2 months ago

Keeping Your Assets Safe — Crypto Insurance May Soon Become The Norm

Many people all over the world have compared the cryptocurrency market to the wild West, largely because of the fact...

Categories

Archives

Trending