Page 1

Get your Website Designed for Google’s Mobile First Index @ ₹ 10,000/G E T Q UO TE

DESIGN & DEV

Use Media Queries to Design a perfect Responsive Site in 2018 RAMYA S - MARCH 7, 2018

         Estimated Time :  2 minutes In result of use of mobile devices responsive web design has blown up in its popularity. Let’s walk through some of the tricks which designers are using to better load content and images on di erent devices. The one best trick is to use media queries as they will work for the call styles of the user device on its dimensions. There are some of the debates on the media queries as they are the best solution when it comes to mobile rst. Still it continues.

Call Using External Style sheet or in a Style sheet


Media queries will not check the physical attributes of the view port instead they will look for the media type. Some of the CSS declarations will be used within the external style sheet or they can be written within a style sheet. For example, the external call would look like this: And the CSS direct call would look like this: @media screen and (min-width:320px) and (max-width:480px){ /*Insert your styles here  Above we can see the CSS declaration where we call this only for the devices with those height and width properties. These declarations will make di cult because media queries are not modular. However others will be pushing to use the element queries but for some time we will stuck with the media queries.

Element Queries Not Yet Supported


Element queries are not yet being supported even though they are similar to the media queries because they will use CSS when certain conditions are satis ed. Element queries will be based on the elements rather than the browser. Currently this is not supported in CSS3. Element queries will be gaining momentum; especially they can complement media queries. Which means that both can work together so that they can create modular and exible designs.

Getting Started With Media Queries

Very rst thing is we need to understand the di erence between the media queries based on the width and on device-width. We need to describe the width of a mobile device as a rendering surface and later


we need to describe the device actual screen width. You need not to be constrained on the device based media queries. You can implement media queries which will break the layout, no matter what the screen size is.

Read Also – What’s New For Designers in 2018

Adding Queries for Different View ports

We can add queries for the landscape and we can set the parameters for the common screen size. Five sizes will cover most of the device. We can also include additional style depending on how the content should look on each device. For example, if you want the content on a mobile device to be displayed in a certain font or you want a di erent background color, then add the following under where we’ve marked /* add your style here */: site-content { font-family: Georgia; background: blue;  

Working with Images


It is very simple enough to scale the images for responsive design. But there are some issues where we need look out for, there will be loss of details and images which has been squeezed down to t the container which will be taking up most of the page on the smaller devices. To create scalable images, simply add the following code to your style sheet: img { max-width: 100%;

Conclusion There are some of the online tutorials to help you with the responsive web design and media queries. We hope that we have given the good starting point so that you can get with media queries. If you like more to learn on front-end visual design, then have a look on the free e-book Mobile UI patterns. We have analyzed more e ective exible design patterns. The arrival of mobile devices has brought many changes on the internet in recent years. So in these days, no website can do can be designed without responsiveness. We being the leading Responsive Website Design & Development Company in Bangalore have updated to technology. We at 5ine ensure you to o er high quality of design & development with responsiveness to attract your customers to your site. To know more about us & our work visit www.5ines.com

 Total Views : (1)

Sharing is caring!

       


Related Posts

The 9 Principles of Website Design Implementation

The SEO Cheat sheet to rank easily in 2018

Killer strategies to generate leads online: This Is What Professionals Do |

10 tips to maximise your YouTube Marketing Strategy

TAGS | MEDIA QUIRES FOR DESIGN, RESPONSIVE WEB DESIGN, RESPONSIVE WEB DESIGNING COMPANY, WEB DESIGN AND DEVELOPMENT, WEB DESIGN COMPANY, WEB DESIGN TECHNIQUIES, WEB DESIGNING BANGALORE, WEB DESIGNING COMPANY BANGALORE, WEB DESIGNING SERVICES, WEB DEVELOPMENT SERVICES

 0  0 

Ramya S I help start-ups,small & medium sized businesses through Digital Marketing Services, SEO,SMO, Website Design,Development

You Might Also Like


DESIGN & DEV

Essential Features for a B2B Website in 2018 DECEMBER 14, 2017

DESIGN & DEV

Is a Bad Website Killing Your Business? DECEMBER 7, 2017


DIGITAL MARKETING, SEO

Top 5 Differences between Google v/s Bing SEO JANUARY 15, 2018

DIGITAL MARKETING, NEWS, SEO

Top Ranked SEO Service Provider in India is at Your Service OCTOBER 12, 2017


Leave a Reply Your email address will not be published. Required elds are marked *

COMMENT

I'm not a robot reCAPTCHA Privacy - Terms

NAME *

EMAIL *

WEBSITE

P OS T C OMM E NT

PREVIOUS POST ï…¸

Facebook Messenger Ads: How to Use Them in Your Business


We are passionate in serving Website Design & Digital Marketing; we spend most of our time in innovating for clients. We set up a virtual team who will be dedicated to your project to o er great productive output.

MO RE AB OUT 5 I N E

KEEP IN TOUCH

NEWSLETTER

20.000 Digital Marketers Already Recieve De nitive Daily Newsletters by Conversion. Join today and get your FREE marketing "to-do" list straight to your inbox every Wednesday Email address:

Your email address

SU B S CR I BE


DON’T MISS THESE

Use Media Queries to Design a perfect Responsive Site in 2018 DESIGN & DEV

Facebook Messenger Ads: How to Use Them in Your Business DIGITAL MARKETING

How Design Plays a Part in Your Marketing Efforts DIGITAL MARKETING

The Risks and Rewards of Brand Personification Using Social Media DIGITAL MARKETING

10 tips to maximise your YouTube Marketing Strategy DIGITAL MARKETING


FIND US ON FACEBOOK

5ine 30,170 likes

Like Page

Be the first of your friends to like this

Share


UNKNOWN FEED

ABOUT US

If you know a business that would like more visitors to its website, more leads for its sales team — and more customers to fuel growth.

CO N T ACT NO W

LATEST POST

Use Media Queries to Design a perfect Responsive Site in 2018

Facebook Messenger Ads: How to Use Them in Your Business

How Design Plays a Part in Your Marketing Efforts

The Risks and Rewards of Brand Personification Using Social Media


FIND US ON FACEBOOK

5ine 30K likes

Like Page

Be the first of your friends to like this

HO ME

SO CI AL ME DI A

M OB I LE A PP S

DI GI T A L MA RK E TI NG

©2 01 8 A L L RI GH T R E S E R VE D. 5 IN E W EB S OL UT I ON S P VT .L TD

S EO

Use media queries to design a perfect responsive site in 2018  

In result of use of mobile devices responsive web design has blown up in its popularity. Let’s walk through some of the tricks which designe...

Use media queries to design a perfect responsive site in 2018  

In result of use of mobile devices responsive web design has blown up in its popularity. Let’s walk through some of the tricks which designe...

Advertisement