ವಿಷಯ ಮಾರ್ಕೆಟಿಂಗ್ಮಾರ್ಕೆಟಿಂಗ್ ಮತ್ತು ಮಾರಾಟ ವೀಡಿಯೊಗಳುಮಾರ್ಕೆಟಿಂಗ್ ಇನ್ಫೋಗ್ರಾಫಿಕ್ಸ್ಮೊಬೈಲ್ ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್ ಮಾರ್ಕೆಟಿಂಗ್

ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ ಎಂದರೇನು? (ವಿವರಣಾ ವೀಡಿಯೊ ಮತ್ತು ಇನ್ಫೋಗ್ರಾಫಿಕ್)

ಇದಕ್ಕಾಗಿ ಒಂದು ದಶಕ ತೆಗೆದುಕೊಂಡಿದೆ ಸ್ಪಂದಿಸುವ ವೆಬ್ ವಿನ್ಯಾಸ (ಆರ್ಡಬ್ಲುಡಿ) ರಿಂದ ಮುಖ್ಯವಾಹಿನಿಗೆ ಹೋಗಲು ಕ್ಯಾಮರೂನ್ ಆಡಮ್ಸ್ ಮೊದಲು ಪರಿಚಯಿಸಿದರು 2010 ರಲ್ಲಿನ ಪರಿಕಲ್ಪನೆ. ಕಲ್ಪನೆಯು ಚತುರವಾಗಿತ್ತು - ಅದನ್ನು ವೀಕ್ಷಿಸುತ್ತಿರುವ ಸಾಧನದ ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಸೈಟ್‌ಗಳನ್ನು ನಾವು ಏಕೆ ವಿನ್ಯಾಸಗೊಳಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ?

ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ ಎಂದರೇನು?

ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸವು ವಿನ್ಯಾಸ ವಿಧಾನವಾಗಿದ್ದು, ಪರದೆಯ ಗಾತ್ರ ಅಥವಾ ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆಯೇ ಯಾವುದೇ ಸಾಧನದಲ್ಲಿ ವೆಬ್‌ಸೈಟ್ ಅತ್ಯುತ್ತಮ ವೀಕ್ಷಣೆಯ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ವೀಕ್ಷಿಸುತ್ತಿರುವ ಪರದೆಯ ಗಾತ್ರಕ್ಕೆ ಸರಿಹೊಂದಿಸುವ ಸೈಟ್ ಅನ್ನು ರಚಿಸಲು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳು, ಗ್ರಿಡ್-ಆಧಾರಿತ ಲೇಔಟ್‌ಗಳು ಮತ್ತು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಬಳಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಇದರರ್ಥ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವೆಬ್ ವಿನ್ಯಾಸದೊಂದಿಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ವೆಬ್‌ಸೈಟ್ ಡೆಸ್ಕ್‌ಟಾಪ್ ಕಂಪ್ಯೂಟರ್, ಟ್ಯಾಬ್ಲೆಟ್ ಅಥವಾ ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ನಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತದೆ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ಚಿತ್ರಗಳಂತಹ ಅಂಶಗಳನ್ನು ಮತ್ತು ಆ ಅಂಶಗಳ ವಿನ್ಯಾಸವನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು. ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್ ಎಂದರೇನು ಮತ್ತು ನಿಮ್ಮ ಕಂಪನಿ ಅದನ್ನು ಏಕೆ ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕು ಎಂಬುದನ್ನು ವಿವರಿಸುವ ವೀಡಿಯೊ ಇಲ್ಲಿದೆ. ನೀವು ಹೊಸ ಸೈಟ್ ವಿನ್ಯಾಸ ಅಥವಾ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತಿದ್ದರೆ, ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸವು ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ, ಒಂದು ಆಯ್ಕೆಯಾಗಿಲ್ಲ, ಎಲ್ಲಾ ವೆಬ್ ಟ್ರಾಫಿಕ್‌ನ ಅರ್ಧಕ್ಕಿಂತ ಹೆಚ್ಚಿನವು ವಿಭಿನ್ನ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅಗಲಗಳು ಮತ್ತು ಎತ್ತರಗಳನ್ನು ಹೊಂದಿರುವ ಮೊಬೈಲ್ ಸಾಧನಗಳಿಂದ ಬರುತ್ತದೆ.

ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವು ವೆಬ್ ಡಿಸೈನರ್‌ಗಳಿಗೆ ಸಹ ಸೂಕ್ತವಾಗಿದೆ, ಅವರು ಸಾಧನ ಅಥವಾ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅನ್ನು ಆಧರಿಸಿ ಅನನ್ಯವಾದ ಸ್ವತಂತ್ರ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಬೇಕಾಗಿಲ್ಲ. ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸವನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಧಿಸಬಹುದು ಸಿಎಸ್ಎಸ್.

ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್ CSS ವ್ಯೂಪೋರ್ಟ್ ಪ್ರಶ್ನೆಗಳು

ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯನ್ನು ಬಳಸಿಕೊಂಡು ವ್ಯೂಪೋರ್ಟ್‌ನ ಆಧಾರದ ಮೇಲೆ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸುವ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

ಬ್ರೌಸರ್‌ಗಳು ತಮ್ಮ ಗಾತ್ರದ ಬಗ್ಗೆ ಸ್ವಯಂ-ಅರಿವು ಮತ್ತು ಅವರು ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತಾರೆ. ಪರದೆಯ ಗಾತ್ರಕ್ಕೆ ಅನ್ವಯವಾಗುವ ಶೈಲಿಗಳನ್ನು ಪ್ರಶ್ನಿಸುವ ಮೂಲಕ, ನೀವು ಪ್ರತಿ ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಸಾಧನದ ಅಗಲಕ್ಕೆ ನಿರ್ದಿಷ್ಟ ಸ್ಟೈಲಿಂಗ್ ಅಂಶಗಳನ್ನು ಹೊಂದಿಸಬಹುದು. ಇದರರ್ಥ ನೀವು ಪ್ರತಿ ಗಾತ್ರದ ಪರದೆಗೆ ವಿಭಿನ್ನ ಸೈಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಬೇಕು ಎಂದಲ್ಲ, ನೀವು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅಗತ್ಯ ಅಂಶಗಳನ್ನು ಬದಲಾಯಿಸಬೇಕಾಗುತ್ತದೆ.

ಮೊಬೈಲ್-ಮೊದಲ ಮನಸ್ಥಿತಿಯೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದು ಇಂದು ಬೇಸ್‌ಲೈನ್ ಮಾನದಂಡವಾಗಿದೆ. ಬೆಸ್ಟ್-ಇನ್-ಕ್ಲಾಸ್ ಬ್ರ್ಯಾಂಡ್‌ಗಳು ತಮ್ಮ ಸೈಟ್ ಮೊಬೈಲ್ ಸ್ನೇಹಿಯಾಗಿದೆಯೇ ಎಂಬುದರ ಬಗ್ಗೆ ಮಾತ್ರವಲ್ಲದೆ ಸಂಪೂರ್ಣ ಗ್ರಾಹಕರ ಅನುಭವದ ಬಗ್ಗೆ ಯೋಚಿಸುತ್ತಿವೆ.

ಲುಸಿಂಡಾ ಡಂಕಲ್ಫ್, ಮೊನೆಟೇಟ್ ಸಿಇಒ

ಇವರಿಂದ ಇನ್ಫೋಗ್ರಾಫಿಕ್ ಇಲ್ಲಿದೆ ಹಣಗಳಿಸಿ ಬಹು ಸಾಧನಗಳಿಗೆ ಒಂದು ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸುವ ಸಂಭಾವ್ಯ ಪ್ರಯೋಜನಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ:

ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ಡಿಸೈನ್ ಇನ್ಫೋಗ್ರಾಫಿಕ್

ನಿಮ್ಮ ಸೈಟ್ ರೆಸ್ಪಾನ್ಸಿವ್ ಆಗಿದೆಯೇ?

ನಿಮ್ಮ ಸೈಟ್ ಸ್ಪಂದಿಸುತ್ತಿದೆಯೇ ಎಂದು ನೋಡಲು ಒಂದು ಸರಳ ಮಾರ್ಗವೆಂದರೆ ಬ್ರೌಸರ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಅಂಶಗಳು ಚಲಿಸುತ್ತವೆಯೇ ಎಂದು ನೋಡಲು ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಬೆಳೆಯುವುದು ಅಥವಾ ಕುಗ್ಗಿಸುವುದು.

ಹೆಚ್ಚು ನಿಖರತೆಗಾಗಿ, ನಿಮ್ಮದನ್ನು ಸೂಚಿಸಿ ಗೂಗಲ್ ಕ್ರೋಮ್ ನಿಮ್ಮ ಸೈಟ್‌ಗೆ ಬ್ರೌಸರ್. ಆಯ್ಕೆ ಮಾಡಿ ವೀಕ್ಷಿಸಿ> ಡೆವಲಪರ್> ಡೆವಲಪರ್ ಪರಿಕರಗಳು ಮೆನುವಿನಿಂದ. ಇದು ಪ್ಯಾನೆಲ್ ಅಥವಾ ಹೊಸ ವಿಂಡೋದಲ್ಲಿ ಉಪಕರಣಗಳ ಗುಂಪನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಮೊಬೈಲ್ ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್ ಐಕಾನ್‌ನಂತೆ ಕಾಣುವ ಡೆವಲಪರ್ ಪರಿಕರಗಳ ಮೆನು ಬಾರ್‌ನ ಎಡಭಾಗದಲ್ಲಿರುವ ಸಣ್ಣ ಐಕಾನ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ. ನೀವು ಕೆಲವು ಪ್ರಮಾಣಿತ ಸಾಧನಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು ಮತ್ತು ನೀವು ಪುಟವನ್ನು ಅಡ್ಡಲಾಗಿ ಅಥವಾ ಲಂಬವಾಗಿ ವೀಕ್ಷಿಸಲು ಬಯಸುತ್ತೀರಾ ಎಂಬುದನ್ನು ಸಹ ಬದಲಾಯಿಸಬಹುದು.

  • ಕ್ರೋಮ್ ಡೆವಲಪರ್ ಉಪಕರಣಗಳು ಸ್ಪಂದಿಸುವ ಟ್ಯಾಬ್ಲೆಟ್
  • ಕ್ರೋಮ್ ಡೆವಲಪರ್ ಉಪಕರಣಗಳು ಸ್ಪಂದಿಸುವ ಮೊಬೈಲ್ ಅಡ್ಡಲಾಗಿ
  • ಕ್ರೋಮ್ ಡೆವಲಪರ್ ಉಪಕರಣಗಳು ಸ್ಪಂದಿಸುವ ಮೊಬೈಲ್
  • ಕ್ರೋಮ್ ಡೆವಲಪರ್ ಉಪಕರಣಗಳು ಸ್ಪಂದಿಸುವ ಡೆಸ್ಕ್‌ಟಾಪ್

ಭೂದೃಶ್ಯದಿಂದ ಭಾವಚಿತ್ರಕ್ಕೆ ವೀಕ್ಷಣೆಯನ್ನು ಬದಲಾಯಿಸಲು ನೀವು ನ್ಯಾವಿಗೇಷನ್ ಆಯ್ಕೆಗಳನ್ನು ಮೇಲಕ್ಕೆ ಬಳಸಬಹುದು, ಅಥವಾ ಯಾವುದೇ ಪೂರ್ವ-ಪ್ರೋಗ್ರಾಮ್ ಮಾಡಿದ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಗಾತ್ರಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿ. ನೀವು ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಬೇಕಾಗಬಹುದು, ಆದರೆ ಇದು ನಿಮ್ಮ ಸ್ಪಂದಿಸುವ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ಮತ್ತು ಎಲ್ಲಾ ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ಸೈಟ್ ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಇದು ವಿಶ್ವದ ತಂಪಾದ ಸಾಧನವಾಗಿದೆ!

Douglas Karr

Douglas Karr ನ ಸಿಎಂಒ ಆಗಿದೆ ಓಪನ್‌ಇನ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಸ್ಥಾಪಕ Martech Zone. ಡಗ್ಲಾಸ್ ಹಲವಾರು ಯಶಸ್ವಿ ಮಾರ್ಟೆಕ್ ಸ್ಟಾರ್ಟ್‌ಅಪ್‌ಗಳಿಗೆ ಸಹಾಯ ಮಾಡಿದ್ದಾರೆ, ಮಾರ್ಟೆಕ್ ಸ್ವಾಧೀನಗಳು ಮತ್ತು ಹೂಡಿಕೆಗಳಲ್ಲಿ $5 ಬಿಲಿಯನ್‌ಗಿಂತ ಹೆಚ್ಚಿನ ಪರಿಶ್ರಮದಲ್ಲಿ ಸಹಾಯ ಮಾಡಿದ್ದಾರೆ ಮತ್ತು ಕಂಪನಿಗಳು ತಮ್ಮ ಮಾರಾಟ ಮತ್ತು ಮಾರುಕಟ್ಟೆ ತಂತ್ರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮತ್ತು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡುವುದನ್ನು ಮುಂದುವರೆಸಿದ್ದಾರೆ. ಡೌಗ್ಲಾಸ್ ಅಂತರಾಷ್ಟ್ರೀಯವಾಗಿ ಗುರುತಿಸಲ್ಪಟ್ಟ ಡಿಜಿಟಲ್ ರೂಪಾಂತರ ಮತ್ತು ಮಾರ್ಟೆಕ್ ತಜ್ಞ ಮತ್ತು ಸ್ಪೀಕರ್. ಡೌಗ್ಲಾಸ್ ಅವರು ಡಮ್ಮೀಸ್ ಗೈಡ್ ಮತ್ತು ವ್ಯಾಪಾರ ನಾಯಕತ್ವ ಪುಸ್ತಕದ ಪ್ರಕಟಿತ ಲೇಖಕರೂ ಆಗಿದ್ದಾರೆ.

ಸಂಬಂಧಿತ ಲೇಖನಗಳು

ಮೇಲಿನ ಬಟನ್ಗೆ ಹಿಂತಿರುಗಿ
ಮುಚ್ಚಿ

ಆಡ್‌ಬ್ಲಾಕ್ ಪತ್ತೆಯಾಗಿದೆ

Martech Zone ಜಾಹೀರಾತು ಆದಾಯ, ಅಂಗಸಂಸ್ಥೆ ಲಿಂಕ್‌ಗಳು ಮತ್ತು ಪ್ರಾಯೋಜಕತ್ವಗಳ ಮೂಲಕ ನಾವು ನಮ್ಮ ಸೈಟ್‌ನಿಂದ ಹಣಗಳಿಸುವುದರಿಂದ ಯಾವುದೇ ವೆಚ್ಚವಿಲ್ಲದೆ ಈ ವಿಷಯವನ್ನು ನಿಮಗೆ ಒದಗಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ನೀವು ನಮ್ಮ ಸೈಟ್ ಅನ್ನು ವೀಕ್ಷಿಸಿದಾಗ ನಿಮ್ಮ ಜಾಹೀರಾತು ಬ್ಲಾಕರ್ ಅನ್ನು ನೀವು ತೆಗೆದುಹಾಕಿದರೆ ನಾವು ಪ್ರಶಂಸಿಸುತ್ತೇವೆ.