Website Design And

Responsive Design

About UsOptfinITy

Founded in 2002 with a focus on providing Peace of Mind to small businesses and non-profit organizations.

Headquartered in the Washington, DC Metropolitan area with clients across the United States.

Have worked with over 200 clients.

Our Services & Core Competences

IT Strategy and Assessments Managed Services◦ 24 x 7 Network Operations Center◦ 24 x 7 Technical Support Helpdesk ◦ Infrastructure Support

Software and Database Development Website Development◦ Content Management (CMS Works, Wordpress) ◦ Sharepoint◦ Search Engine Optimization

Mobile Application Development ◦ iOS (iPhone, iPad), Android (Phone & Tablet)

Phone Systems

Website Design Trends

Retina Support Large photo Backgrounds Digital QR Codes Infinite Scrolling Sliding Webpage Panels Single-Page Web Design Responsive Design

Why the Change? It is expected that in the next 2 years,

websites will be viewed by mobile devices more than desktop/laptop computers.

As of January 2013, the Pew Internet Project indicates that:◦ 31 % of American adults own a tablet computer◦ 45% of American adults have a smartphone

We need to develop ways to show the same content to different browsers.

Responsive Design “Responsive Design” An approach to

website design whereas the site responds to the user’s behavior and environment (screen size / platform and orientation)

The design approach is an If, Then approach to design. If the design is on _______, then display _______. (Using a mix of grids, layouts, images, and CSS style sheets)

Desktop

Smaller Resolution - Desktop

Mobile

Microsoft.com Example

In the past, all design was done based on the Least Common Denominator when it came to screen size.◦Pixels were calculated to be a precise

measurement

Today, there is no common denominator as desktops have one screen size, laptops have another screen size, tablets, phones, etc., etc.

What has changed…

Designs should be as flexible as possible. Design sizes in 1, 2 or 3 years are unknown.

Mobile is Most Important. Make sure your content is covered on a mobile screen.

You can shrink things proportionally but making every piece of content available on small screens might not be the best bet. ◦Touch screen (fingers) or mouse (cursors)?

How to Approach the Design

Establish the Content Create Various Wireframes◦Mobile◦Tablet◦Desktop

Create the Visual Design Build the Responsive Design (CSS/HTML) Test the Design on Multiple Browsers

The Process

Pros and Cons

Pros Cons

You get a better, more responsive Design

Can interact with Content Management Systems

Able to attract a LOT more potential clients (wider range of audience)

Allows you to stand out above the rest

Now need multiple sets of wireframes

You have to test all possible views

More Complex Design Needed

20-30% More in Cost and Timeframe to deliver

Questions?