SlideShare a Scribd company logo

Responsive Web Design Analysis

•Download as PPTX, PDF•
•
G
Gamze Dede Pala

Responsive web design allows websites to automatically adjust to different screen sizes and devices. It uses flexible grids and images that resize depending on screen resolution. Media queries detect screen size and adjust layout accordingly. This provides a consistent user experience across devices like smartphones, tablets and desktops. It is important for responsive design because people increasingly access websites on various devices, and a single responsive site is more convenient and usable than separate mobile and desktop sites.

Related slideshows

User Interface musts for mobile design
User Interface musts for mobile design User Interface musts for mobile design
User Interface musts for mobile design
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
 
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
 
1 of 14
Gamze Dede Pala RESPONSIVE WEB DESIGN ANALYSIS
WHAT IS IT? Responsive Web Design is a user-oriented design technique. It throughly focuses on a user’s environment and behaviour based on the orientation and size of his screen as well as the platform. 2
KEY FEATURES 3  Responsive Web Design provides the flexibility of adjustable zones depending on the resolution of the screen. The images are automatically adjusted and so are the areas of texts.  Media queries detect the resolution automatically. Also, permit to know what the size of the screen is and adjust accordingly.
COMPARE WITH ADAPTIVE DESIGN  Adaptive design has fixed grid and images.  It doesn’t detect resolution and doesn’t permit to adjust size of screen. So each device may have a different appearance. 4
5 WHY IS IMPORTANT? Increase of Mobile usage in today’s world
Today there are 2.6 billion smartphone subscriptions globally, and while growth has been levelling off in developed markets like the U.S. and Europe. By 2020, globally there will be 6.1 smartphone users led by huge growth in less mature markets. 6 WHY IS IMPORTANT?
WHY IS IMPORTANT? 7 One Website, Many Devices
One of the most appealing aspects of responsive web design is that: A responsive website can provide a great user-experience across many devices and screen sizes. This means that, to best support their experience, our sites must work well regardless of which device they may be using at a given time. For example: Someone searches for a product on his smartphone. But his phone is out of charge. He will use his desktop instead of his phone. In this case, the same website should be met the expectations. 8 WHY IS IMPORTANT?
User Research and Scoping : Representation of users, typically based on user research and incorporating user goals, needs and interests. Understanding how these users may want to use the website on a variety of devices will help you to decide what the priorities are on the project. Screen Size : Your website’s content should respond the user with the best possible layout to consume the information. Based on the project scope, we will choose the screen widths and define your breakpoints at the exact device widths that you are looking to target. Most often these are the smart phone usually 320px and 480px, the tablet usually 768px and 1024px and finally anything above 1024px. 9 NEED TO KNOW PRE-DESIGN
Vital Content : Is there any content that should only be visible on desktop or mobile? If the answer is yes, it is considered in design stage. For example : Headlines for news website should be available in each design or some fields of complex forms may not avaliable on the mobile device. Working With Extreme Cases : You need to think about all the extreme cases that may ocur and have a plan for extreme cases across all screen sizes. For example : While a header length is maximum 30 characters, it would be single line. If the length is more than 30, how to display header? 10 NEED TO KNOW PRE-DESIGN
Web Elements Position: Are buttons and other interaction areas positioned so they will be convenient to use on a touch screen? Users will be using their thumbs on mobile devices. If buttons, links or web elements should not be too small or inconveniently placed at the edge of pages, so users should be able to access them. Mobile-First Design: Creating a design for the smallest screen solution first and working from there up. This is a general truth and not necessarily a rule. Once the mobile design questions are answered, designing for other devices will be easier. For the size of clickable elements, pay attention to the minimum size for touchscreen devices 11 NEED TO KNOW PRE-DESIGN
12 According to the project scope and constraints, we will prepare wireframe prototype the each screen widths. Defining the each selected breakpoints of the wireframing layouts. Wireframe possible areas : Logo Header Navigation Main Content Forms Footer Searh Box Back to Button PROTOTYPES WIREFRAME LAYOUT
ADVANTAGES User Experience Improved SEO - Google Better Performance Save Money Save Time Content Focused Easy to read content Online test tool 13
14 QUESTIONS ? Q ? ?

More Related Content

Responsive Web Design Analysis

  • 2. WHAT IS IT? Responsive Web Design is a user-oriented design technique. It throughly focuses on a user’s environment and behaviour based on the orientation and size of his screen as well as the platform. 2
  • 3. KEY FEATURES 3  Responsive Web Design provides the flexibility of adjustable zones depending on the resolution of the screen. The images are automatically adjusted and so are the areas of texts.  Media queries detect the resolution automatically. Also, permit to know what the size of the screen is and adjust accordingly.
  • 4. COMPARE WITH ADAPTIVE DESIGN  Adaptive design has fixed grid and images.  It doesn’t detect resolution and doesn’t permit to adjust size of screen. So each device may have a different appearance. 4
  • 5. 5 WHY IS IMPORTANT? Increase of Mobile usage in today’s world
  • 6. Today there are 2.6 billion smartphone subscriptions globally, and while growth has been levelling off in developed markets like the U.S. and Europe. By 2020, globally there will be 6.1 smartphone users led by huge growth in less mature markets. 6 WHY IS IMPORTANT?
  • 7. WHY IS IMPORTANT? 7 One Website, Many Devices
  • 8. One of the most appealing aspects of responsive web design is that: A responsive website can provide a great user-experience across many devices and screen sizes. This means that, to best support their experience, our sites must work well regardless of which device they may be using at a given time. For example: Someone searches for a product on his smartphone. But his phone is out of charge. He will use his desktop instead of his phone. In this case, the same website should be met the expectations. 8 WHY IS IMPORTANT?
  • 9. User Research and Scoping : Representation of users, typically based on user research and incorporating user goals, needs and interests. Understanding how these users may want to use the website on a variety of devices will help you to decide what the priorities are on the project. Screen Size : Your website’s content should respond the user with the best possible layout to consume the information. Based on the project scope, we will choose the screen widths and define your breakpoints at the exact device widths that you are looking to target. Most often these are the smart phone usually 320px and 480px, the tablet usually 768px and 1024px and finally anything above 1024px. 9 NEED TO KNOW PRE-DESIGN
  • 10. Vital Content : Is there any content that should only be visible on desktop or mobile? If the answer is yes, it is considered in design stage. For example : Headlines for news website should be available in each design or some fields of complex forms may not avaliable on the mobile device. Working With Extreme Cases : You need to think about all the extreme cases that may ocur and have a plan for extreme cases across all screen sizes. For example : While a header length is maximum 30 characters, it would be single line. If the length is more than 30, how to display header? 10 NEED TO KNOW PRE-DESIGN
  • 11. Web Elements Position: Are buttons and other interaction areas positioned so they will be convenient to use on a touch screen? Users will be using their thumbs on mobile devices. If buttons, links or web elements should not be too small or inconveniently placed at the edge of pages, so users should be able to access them. Mobile-First Design: Creating a design for the smallest screen solution first and working from there up. This is a general truth and not necessarily a rule. Once the mobile design questions are answered, designing for other devices will be easier. For the size of clickable elements, pay attention to the minimum size for touchscreen devices 11 NEED TO KNOW PRE-DESIGN
  • 12. 12 According to the project scope and constraints, we will prepare wireframe prototype the each screen widths. Defining the each selected breakpoints of the wireframing layouts. Wireframe possible areas : Logo Header Navigation Main Content Forms Footer Searh Box Back to Button PROTOTYPES WIREFRAME LAYOUT
  • 13. ADVANTAGES User Experience Improved SEO - Google Better Performance Save Money Save Time Content Focused Easy to read content Online test tool 13