RESPONSIVE DESIGN

• THE FIRST STEP IN CREATING A WEBSITE FOR PHONE OR TABLET IS TO ENSURE

THE BROWSER KNOWS THE INTENTION. THIS IS WHERE THE VIEWPORT META TAG
COMES INTO PLAY.

• THE VIEWPORT META TAG TO IDENTIFY A MOBILE WEBSITE

THE META VIEWPORT TAG INSTRUCTS THE BROWSER HOW TO ADJUST THE PAGE TO
THE WIDTH OF EACH DEVICE.
• WHEN THE META VIEWPORT ELEMENT IS ABSENT, MOBILE BROWSERS WILL DISPLAY WEB
PAGES WITH DEFAULT DESKTOP SETTINGS. THIS RESULTS IN A SEEMINGLY ZOOMED OUT,
UNRESPONSIVE EXPERIENCE.
• BELOW IS A STANDARD IMPLEMENTATION:

• VIEWPORT META TAG EXAMPLE

NOW THAT THE BROWSER KNOWS WHAT'S GOING, WE CAN UTILIZE POPULAR TECHNIQUES TO
MAKE OUR WEBSITE RESPONSIVE. ?
CSS MEDIA QUERIES FOR DIFFERENT SCREEN SIZES AND ORIENTATIONS
IF YOU'RE NEW TO RESPONSIVE WEB DESIGN, MEDIA QUERIES ARE THE FIRST, MOST
IMPORTANT CSS FEATURE TO LEARN. MEDIA QUERIES ALLOW YOU TO STYLE ELEMENTS
BASED ON VIEWPORT WIDTH. ONE POPULAR CSS STRATEGY IS TO WRITE MOBILE STYLES
FIRST AND BUILD ON TOP OF THEM WITH MORE COMPLEX, DESKTOP SPECIFIC STYLES.

MEDIA QUERIES ARE AN IMPORTANT PART OF RESPONSIVE WEB DESIGN COMMONLY USED
FOR GRID LAYOUTS, FONT SIZES, MARGINS, AND PADDING THAT DIFFER BETWEEN SCREEN
SIZE AND ORIENTATION.
BELOW IS AN EXAMPLE OF A COMMON USE CASE OF MOBILE FIRST STYLING IN WHICH A
COLUMN IS 100% WIDTH FOR SMALLER DEVICES, BUT IN LARGER VIEWPORTS IS 50%.
MOBILE FIRST CSS EXAMPLE
THE CODE ABOVE IS A SIMPLE EXAMPLE, BUT WHAT IT'S ACTUALLY DOING IS
PRETTY INTERESTING.

1. IN CONSIDERING MOBILE FIRST, THE "COLUMN" ELEMENT IS SET TO HAVE A

WIDTH OF 100%;
2. BY USING A MIN-WIDTH MEDIA QUERY, WE DEFINE RULES SPECIFICALLY FOR
VIEWPORTS WITH A MINIMUM WIDTH OF 600PX (VIEWPORTS WIDER THAN 600PX).
SO, FOR VIEWPORTS WIDER THAN 600PX, OUR COLUMN ELEMENT WILL HAVE A
WIDTH THAT IS 50% OF ITS PARENT.
ALTHOUGH MEDIA QUERIES ARE ESSENTIAL FOR RESPONSIVE WEB DESIGN, MANY
OTHER NEW CSS FEATURES ARE ALSO BECOMING WIDELY ADOPTED AND
SUPPORTED IN BROWSERS. FLEXBOX IS ONE OF THESE NEW, IMPORTANT CSS
FEATURE IN TERMS OF RESPONSIVE WEB DESIGN.