website redesign
TRANSCRIPT
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?