Build a Responsive WordPress Website in 3 Days
Event on 2014-07-26 10:00:00
Build a Responsive WordPress Website in 3 Days
Phillip Peet, Web Designer at Philboss Design
Workshop 1: Saturday, 26th July 10:00am – 5:00pm
Workshop 2: Saturday, 2nd August 10:00am – 5:00pm
Workshop 3: Saturday, 9th August 10:00am – 5:00pm
Powering over 60 million websites on the Internet WordPress is hands down the most popular content management system on the market today. Coinciding with the growth of WordPress is the rapid advancements in mobile technology and accessibility to the World Wide Web. If you mix these two together and throw in some creative design you open up a market for responsive WordPress theme development.
This workshop series is ideal for web designers who create website layouts from scratch and want to be able to offer WordPress as a content management solution. It may also appeal if you are interested in building and selling custom WordPress themes.
Spanning over three days you will initially cover the core concepts and techniques to be able to create a scalable device consistent website. From there you will take a Photoshop website concept and turn it into a mobile responsive HTML/CSS template. Lastly you will explore WordPress template files and theme hierarchy concepts before converting your static web pages into a dynamic custom WordPress website.
- An understanding of the principles behind responsive web design
- A layered Photoshop User Interface (UI)
- A scalable device consistent HTML/CSS website
- A fully installed and configured WordPress site
- A custom responsive WordPress theme
Workshop 1: Responsive Web Design for Mobile and Desktop
In this first workshop session you will cover the theory behind designing mobile friendly websites. You will look at the key HTML and CSS elements, practices and techniques required to integrate and support scalable design.
- Considerations when designing for mobile
- Media queries and viewport detection scripts
- Retina optimised image techniques
- Mobile navigation
Workshop 2: From Photoshop to HTML/CSS
There are a distinct number of advantages to designing a website in Photoshop (or similar) prior to coding it.
- 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.
- You have a reference that can be used to guide your implementation.
- 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 the first session 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
Workshop 3: Build WordPress Custom Themes
As a result of the growing popularity of WordPress and the demand to create beautiful ‘hand crafted’ websites now is the time to learn how to build WordPress themes. In this final workshop session you will have a look under the WordPress bonnet (so to speak) examining the WordPress template hierarchy, template tags and file structures. You will then apply these principles to your website, upload and activate your own custom theme.
- WordPress template hierarchy
- WordPress theme and file structure
- The WordPress loop and common template tags
- Theme upload, activation and configuration
Prerequisites & Preparation:
This is an intermediate level workshop and therefore prior exposure and experience with HTML/CSS code is recommended.
Please install the following before attending this workshop:
- Brackets, an open source code editor: http://brackets.io/?lang=en
- Adobe Photoshop: https://creative.adobe.com/products/download/photoshop
- A web host preferably with a single click WordPress installation such as GoDaddy http://au.godaddy.com and Dreamhost http://www.dreamhost.com
- An FTP client such as FileZilla https://filezilla-project.org, SmartFTP http://www.smartftp.com or CoreFTP http://www.coreftp.com
- Firefox web browser http://www.mozilla.org/en-US/firefox/new and Firebug Extension https://getfirebug.com
Instructor: Phillip Peet, Web Designer at Philboss Design
Phillip is a passionate WordPress web developer and founder of Philboss Design, a digital design agency based in Sydney's East. The company's core focus is to deliver engaging and innovative digital and print solutions for a diverse range of clients. Beyond building WordPress website/themes, Phil's expertise lies in visual identity and brand strategy, user interface and user experience design, retina optimised mobile websites and applications, email and social media marketing, website training and support.
Can't make it? Sign up at General Assembly Sydney to stay in the loop on future events and classes.
at General Assembly (York St)
56-58 York St