ابدأ بالتواصل مع الأشخاص وتبادل معارفك المهنية

أنشئ حسابًا أو سجّل الدخول للانضمام إلى مجتمعك المهني.

متابعة

Tell me Basic steps to develop a responsive design?

i need a brief ans just basic steps to develop a responsive design.

user-image
تم إضافة السؤال من قبل Zaid Bin Khalid , System Engineer , Kate of Tokyo
تاريخ النشر: 2014/02/11
Mohammad Saad
من قبل Mohammad Saad , Senior Consultant , Deloitte - Saudi Arabia

Nobody will "Tell" you anything. Go find about it yourself.

Try this:

1- type into google "responsive design"

2- type into google "bootstrap"

Daljeet Singh
من قبل Daljeet Singh , E Commerce Director , Pitchmunks Private Limited

Hi Mian,

 

All you need to know about is "Media queries(Roots of Responsive design) and A Responsive Framework.

 

I will prefer  "Foundation Responsive Framework". It's very easy to work with Foundation due to it's well written documentation.

#3) Now, You are just one clicke away. Visit http://foundation.zurb.com/  for quick responsive design & development.

 

All the best !

Ibrahim Hatoum
من قبل Ibrahim Hatoum , Web developer , Tristan Inc.

Your best way is to use a CSS/JS framework. takes all the heavy load off you and let'st you start on your project right away.2 of my favourite frameworks are UIKit (my favourite) and Twitter Bootstrap3. I found that foundation lacks a base design template.

You can get UIKit from: http://www.getuikit.com

and Twitter Bootstrap3: http://getbootstrap.com

Adeel Farooq
من قبل Adeel Farooq , CEO , iLead Digital

1 - setup wireframe for each page

2 - give it to designer to create templates

3 - send it to the HTML designer or developer to slice it into html - at this stage you need to ask him to use a responsive framework like zurb foundation. He will use the framework to slice and that could be easily viewable on all browsers, smart phones and tablets. 

4 - you can then further pass on the designs to your developer if it required dynamic data via a database and scripting language like php. they should know how NOT to to mess up html and css while making the pages dynamic.

Obada Kamal Ismael Shawabke
من قبل Obada Kamal Ismael Shawabke , Front-end Web Developer , Thomson Reuters

Just in few words, use Bootstrap and its Grids, read more deeply about how to make it responsive by this style-sheet and its Javascript,Its amazing and fast, less work more results, believe me. I tried it for all kinds of devices and work will without1% error

Rami Nasrallah
من قبل Rami Nasrallah , Customer Experience Specialist , DEVNET

i think the simplest description going to be.

- build Website Design page with Class'es (include the viewport meta to detect device with as below ),

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

- build General CSS for Website over the Desktop.

- build another CSS for Responsive.

- start copy the class's from General CSS file and reflect it inside @media on the CSS of responsive with custmize it to the mobile & tablet.

Riad Kilani
من قبل Riad Kilani , Senior Front End Developer , Reservations.com

  1. Create wireframes or mockups for each device, designing mobile first.
  2. Create you basic dom structure.
  3. Add your meta viewport.
  4. Add your site content
  5. Add your CSS
  6. Add your media queries from largest to smallest.
  7. Test using either inspector element or adobe edge and devices.

مستخدم محذوف‎
من قبل مستخدم محذوف‎

Well i think framework is not necessary thing , you should have design mocup for each break point or screen you want to support and then based on this your Front-end Developer use Media Quries to adjust your site css based on screen size 

 

Foundation , Bootstrap, YAML all these frameworks are good but keep in mind some time you no need that much additional code you only need simple grid which you can code yourself 

Clodelio Delfino
من قبل Clodelio Delfino , Managing Consultant , Startup Company

This should help..

http://www.freshegg.com/blog/web-development-2/10-steps-responsive-web-design

Mansoor Samo
من قبل Mansoor Samo , Software Engineer , Flashcom Services

I always prefer bootstrap and write less do more slogan JavaScript library "jQuery" for basic functionality of responsive web development.

muhammad  mubeen
من قبل muhammad mubeen , Senior UI / UX Designer , Flowershop.ae

1.Define The Viewport Mega Tag 2. Create The HTML Structure 3. Set The Features Of Your Style Sheet 4. Start With Media Queries For The Smallest Screen 5. Move On To Media Queries For A Relatively Large Screen 6. Define Media Queries For The Large Screen 7. Add Content 8. Make The Images Flexible 9. Go For Flexible Embedded Videos 10. View The Final Demo

المزيد من الأسئلة المماثلة