ToMotion AI logo
Menu
Back to gallery

Public AI explainer video

Responsive Design: Phone First

Phone par website vaparta tamne lakhhan vanchva zoom karvu pade chhe, ke button dabavvu mushkel lage chhe? E j site phone ma gunchvayeli ane moti...

Prompt

Source idea used to generate this video.

વિભાગ ૫: રિસ્પોન્સિવ વેબ ડિઝાઇન (Responsive Design) [વિઝ્યુઅલ: સ્લાઇડ ૬ - Mobile, Tablet, Desktop મોકઅપ્સ] "આજના જમાનામાં મોટાભાગના યુઝર્સ મોબાઈલ વાપરે છે. એટલે જ આપણે અપનાવીશું Mobile-First Approach. પહેલાં નાના સ્ક્રીન એટલે કે ફોન માટે ડિઝાઇન કરો, પછી ડેસ્કટોપ માટે એક્સપાન્ડ કરો. આ માટે Viewport meta tag અને CSS Media Queries જેમ કે @media (max-width: 768px) નો ઉપયોગ થાય છે. સાથે ઈમેજીસ fluid હોવી જોઈએ અને બટનની સાઇઝ ટચ-ફ્રેન્ડલી હોવી જોઈએ જેથી મોબાઈલ, ટેબ્લેટ કે ડેસ્કટોપ પર અનુભવ અટકે નહીં."

Narration

Narration used to create this video.

Video narration

Phone par website vaparta tamne lakhhan vanchva zoom karvu pade chhe, ke button dabavvu mushkel lage chhe? E j site phone ma gunchvayeli ane moti screen par saras dekhay, to tene matra nani karvathi ukel nahi aave. Responsive design etle desktop page ne nanu karvu nahi; phone thi sharu kari ne moti screen mate vistar karvu. Mobile-First Approach etle pahela phone mate gothavo, pachhi jagya vadhe tem tablet ane desktop mate vistaro. E rite phone par samagri vanchva ane vaprava saral gothavan ne prathmikta male. Viewport meta tag browser ne phone ni screen muj ab page nu map samjave chhe. CSS Media Queries screen na map pramane niyamo lagu kare chhe; udaharan tarike, @media (max-width: 768px) nani paholai mate gothavan badli shake chhe. 768px matra udaharan chhe. Chhabio upalabdh jagya pramane lavchik rakho, ane buttons aangali thi dabavva sahela rakho. To phone par e j site vapravvi saral kevi rite? Phone thi sharuat karo, pachhi moti screen mate vistaro.