Turn a Photoshop User Interface into a Responsive Website
There are a distinct number of advantages to designing a website in Photoshop prior to coding it: #1. You can work collaboratively on a project allowing a designer to focus on the creative graphics whilst a developer can focus solely on the code; #2. You have a reference that can be used to guide your implementation; #3: It is much easier to have the graphic assets prepared prior to the implementation so that it doesn’t hinder your [a web developer’s] coding or workflow.
Following on from the responsive principles covered in Learn How to Code Responsive Websites you will prepare a Photoshop user interface for implementation. You will plan and prepare assets, create HTML page structure and apply CSS styles. Using viewport detection, media queries and mobile menu techniques you will optimise the mobile viewing experience.
- A layered Photoshop User Interface
- A cross device consistent website
- A scalable mobile optimised website
|1000-1030: Analyse Photoshop Layout & Prepare Assets|
|1030-1130: Plan/Commence HTML Implementation|
|1130-1200: Convert and Link Font Face Replacements|
|1200-1300: Apply External CSS and Format your HTML Page|
|1400-1445: Implement/Format Menu System|
|1445-1530: Add Viewport Detection and Media Queries|
|1530-1600: Upload and Cross Device Test your Implementation|
|1600-1700: Implement Internal Layouts|
This workshop will be run at General Assembly in Sydney on Saturday 23 April 2016. To enrol or for more information please visit the official Turn a Photoshop User Interface into a Responsive Website page. Lunch is included in your ticket price.
Prerequisites & Preparation
This is an intermediate-advanced level workshop. Prior to enroling you should have either attended Learn How to Code Responsive Websites workshop or otherwise had some previous exposure/experience creating HTML/CSS layouts. If you have any questions or would like some more information/advice feel free to contact me via firstname.lastname@example.org.
Before attending this workshop please ensure that you have
- Brackets, an open source code editor installed
- Preferably Firefox web browser and Firebug extension
- Adobe Photoshop installed