Skip to main content

Fundamentals of Responsive Web Design


Responsive Website

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Websites need to work across multiple devices, screen sizes, and browsing contexts. Web designs need to be responsive to these variables, providing an optimal viewing experience for each scenario.

This article covers Fundamentals of Responsive Web Design like screen density, fluid grids, and responsive images, as well as actual design strategies that guide you from website mock-up to testing.

Rule of Thumb:

Configure the Viewport: 

A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.

Pages optimized to display well on mobile devices should include a meta viewport in the head of the document specifying width=device-width, initial-scale=1.

Designing for multiple screen:

Designing web sites to fit multiple resolution screen size is a very important web design principle.

Most browsers in mobile devices scale down webpages to make them fit the viewport. Since we want to rearrange stuff with CSS3 media queries instead ,we prevent this by using a simple meta tag that tells the browser to use the device width without any scaling. This is the meta tag that goes in the <head>.

You can use Modernizr to add support for CSS3 in older browsers, and at the same time get HTML5 support and other stuff such as feature detection with media queries and conditional resource loading. Or – to only add support for media queries – you can include this script in the <head>.

Media Queries for Standard Devices:

A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We've rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.

If you're looking for a comprehensive list of media queries, this repository is a good resource.

Use fluid grids:

Grids provide structure to your website, while using relative units can provide fluidity to that structure. Fluid grids are defined using a maximum width for the design; whereas the grid contained therein, is defined using relative widths and/or heights, instead of pixels. This allows the widths and heights to adjust accordingly in relation to the parent container. In other words, as the size of the screen your website is being viewed on gets smaller or larger, your site will adjust accordingly.

Build Responsive forms:

Don’t hide forms on smaller devices anymore. Making a responsive form is essential to meeting mobile user expectations.

Optimizing site performance:

Website visitors expect the same type of experience on their mobile device as they do on their computers.

So now, not only do you have to think about how a website performs in various computer web browsers, you also have to think about optimizing a website for the many types of mobile devices. This is where responsive web design comes into play. Responsive web design (RWD) involves creating a site that adjusts depending on what type of device is doing the viewing. The text can be scaled down, to offer only the main text and images.

It’s important to note, though, that just because a site has responsive web design and looks good on a certain device, it does not necessarily mean that it will load faster. And just because it loads faster on a mobile device, does not mean a visitor or customer will stay on it longer.

Ways to Optimize Your Website


  • Get a dedicated server
  • Use a CDN
  • Compress images and text

Creating flexible HTML Layout:

I've been thinking a lot about screen resolution lately and how the use of fluid width websites is the best way to accommodate all visitors screen resolutions. The alternative, static width websites, have to make a choice. You can optimize for 800px width, the lowest common denominator, and give up the use of several hundred pixels of width for users with larger screens. Or, you can optimize for 1024px and just make your 800px visitors horizontal scroll. Anything wider than 1024px is too much for static width sites, in my opinion.

I think the best possible scenario is to make a fluid width site that accomodates everyone. Here is what I think would be the "Perfect" fluid width layout:

  • Works in all major browsers 
  • Shrinks to 780px This accommodates users with 800x600 resolution, with no horizontal scroll! 
  • Grows to 1260px This accommodates users with 1280x768 resolution and everything in between. 
  • This accommodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long. 
  • Sidebars are of "equal height" to the main content 
  • Page content is centered for users with even higher resolutions.

Testing responsive design:

There are plenty of responsive design testing tools in the internet, you can try Google's mobile-friendly design testing tool.

Comments

Popular posts from this blog

Best Online SEO Tools for Links, Keywords and Rank Tracking

We’re always on the lookout for great tools and with a $5 billion industry, SEO is one market that has a ton of tools to help you. Whether you’re researching you or your competitors’ backlinks, trying to identify keywords and cocurrence terms, or simply trying to monitor how your site is ranking, here are the most popular SEO tools and platforms on the market.
Some key features of search engine optimization platformsMonitoring Keyword Rankings – the ability to enter keywords and then monitor their ranking over time is a core feature of most of the platforms. Given that search results are mostly personalized, this ability is largely used for overall trending analysis to see whether the efforts you’re making are improving your ranking on keywords or not.Local Keyword Rank Monitoring – since the location of the search user and your business can play a huge role, many of the keyword monitoring platforms provide a means to track your ranking by geographic location.Keyword Discovery – whil…

How to use Keywords in Website Search Engine Optimization (SEO)

A keyword is a term that is used to match with the query a person enters into a search engine to find specific information. Most people enter search phrases that consist of two to five words. Such phrases may be called search phrases, keyword phrases, query phrases, or just keywords.

SEO Keywords are the phrases in your web content that make it possible for people to find your Website via Search Engines. A website that is well optimized and offer relevant content might get higher search engine organic ranking.

These days, keyword optimization, due to keyword Spamming in the past, has been reduced in importance by search engine like Google. It’s purpose is only to tell search engine that, for example, this page is about XX, and you want them to include it in their search results when people search for XX and variations of XX. Lessening the importance of keywords is very different from disregarding them altogether though.

These are the issues you should consider during your Website SEO P…

SEO Tips for Affiliate Website

Nowadays, search engine's organic ranking is much harder, especially for an affiliate marketing website. So how do you get higher organic ranking? The SEO Strategy can be different from site to site, but some of the standards remain the same regardless of the topic or niche.Here’s How To Do SEO For An Affiliate Website That Gets Higher Search Ranking:Branded Domain Names
Choosing a strategic domain name that represent your affiliate business is not just a task for those starting up their own businesses. For many, the decision to launch your own affiliate website comes many years after you’ve already built a profitable affiliate business. Use a keyword rich domain name, but avoid looking spammy.Shopify Have a list of 10 free tools can help you choose a great domain name.Keyword Strategy
Keyword Strategies are essential to develop a search engine optimized website. The best keyword strategies rely on highly relevant keywords & placement on important parts thought your affiliate …