Gamze Dede Pala

RESPONSIVEWEB 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.

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.

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

13

ADVANTAGESUser ExperienceImproved SEO - GoogleBetter Performance Save MoneySave TimeContent Focused Easy to read contentOnline test tool

14

QUESTIONS ?

Q ??