The Five-Figure WordPress Website
-
Upload
laras126 -
Category
Technology
-
view
379 -
download
0
Transcript of The Five-Figure WordPress Website
notlaura.com • @laras126
Hey!I’m Lara, not Laura.
notlaura.com • @laras126
notlaura.com • @laras126
notlaura.com • @laras126
StackOverflow Developer Survey, 2015StackOverflow Developer Survey, 2016
notlaura.com • @laras126
😎🤓
notlaura.com • @laras126Inside Amy Schumer, Mom Computer Therapy
notlaura.com • @laras126
The Five-Figure Wordpress Websitecapital_P_dangit( $text );
The Five-Figure WordPress Website
notlaura.com • @laras126
Content Strategy for MobileRead it ASAP.
CHUNKS OR BUST
Read all A Book Apart’s, for that matter. By Karen McGrane
notlaura.com • @laras126
A slide from Content in a Zombie Apocalypse, Karen McGrane.
notlaura.com • @laras126
Example: MtnMeister.com
CHUNKS OR BUST
notlaura.com • @laras126A content “blob” in the WordPress editor.
CHUNKS OR BUST
notlaura.com • @laras126
Using Advanced Custom Fields for “chunks”.
CHUNKS OR BUST
notlaura.com • @laras126
Repeater Field in ACF and Twig
Cobalt 2 Sublime Theme by Wes Bos
notlaura.com • @laras126
“Wait, that’s not PHP!”
CHUNKS OR BUST
“Dang right. PHP is gross.”
notlaura.com • @laras126
CHUNKS OR BUST
TwigA PHP Templating Engine
notlaura.com • @laras126
TimberUse Twig in WordPress Themes
CHUNKS OR BUST
By Upstatement
notlaura.com • @laras126
PHP vs. Twig
Cobalt 2 Sublime Theme by Wes Bos
Nice Twig
Nasty PHP
notlaura.com • @laras126
MVC Architecture
PHP files are “Controllers”, Twig files are “Views”.
CHUNKS OR BUST
notlaura.com • @laras126
Step 1: Content Mapping Post, Page, or neither?
PROCESS, NOT PRODUCT
notlaura.com • @laras126
Designing in TextStephen Hay’s Responsive Design Workflow
PROCESS, NOT PRODUCT
notlaura.com • @laras126
Step 2: Build Chunks …the back-end.
PROCESS, NOT PRODUCT
notlaura.com • @laras126
ACF ProBest $100 I’ve ever spent.
PROCESS, NOT PRODUCT
notlaura.com • @laras126
Custom Post TypesCOPE: Create Once, Publish Everywhere.
PROCESS, NOT PRODUCT
notlaura.com • @laras126
stage.whatev.comHeader set X-Robots-Tag "noindex, nofollow"
.htaccess
Step 3:
kmg.nlstage.co
PROCESS, NOT PRODUCT
notlaura.com • @laras126
WP Migrate DB ProThe best $199/year I have spent.
PROCESS, NOT PRODUCT
notlaura.com • @laras126Just enough design to not be a terrible eyesore.
PROCESS, NOT PRODUCT
notlaura.com • @laras126
notlaura.com • @laras126
Lara Schenck, LLC • 115 E. 23rd St. 3rd Fl, New York, NY 10010 • 724 244 2491 • [email protected]
Website ProposalCustom, Responsive WordPress Website
The following is a proposed process and pricing outline for a custom WordPress website for Yuling Designs. The
total cost is estimated to be between $6,500 and $13,000 and a timeframe of between 1.5 and three months.
1. CONTENT STRATEGY AND BACK-END
Following a two hour meeting to determine the content structure of the website, I will build out the back-end, or
WordPress Admin area. This step will result in a primarily unstyled site that is ready for real content. By task, this
step can be broken down into:
• Two hour strategy meeting to map out content and come up with initial feature list
• Setup hosting environment
• Build out back-end data structure
• Training on content entry into WordPress Admin and best practices
• Fundamental styling and front-end development
• Resulting site will be similar to http://kmg.nlstage.co
Note that this step does not result in a completed site, rather, it sets the stage for the a mid-project check-in to
determine the final Scope of Work.
$3,500
2. BRAND DEVELOPMENT
OPTION 1: YOU DO ITWe will work collaboratively to develop style tiles outlining the look and feel for the site. You will be responsible
for delivering style tiles as directed. I will bill hourly for meetings and consultation regarding the development of
these materials, and estimate two to four hours for this role.
OPTION 2: I DO ITI will be in charge of the style tile deliverables and visual brand development. We will work together to iterate over
initial visual design options to determine an initial look and feel for the site. This option includes:
• Design research and development
• Deliverable of two style tiles
• Review meetings
• Two rounds of revisions (additional visual design development will occur in stage four)
$175/HR
$3,000
Lara Schenck, LLC • 115 E. 23rd St. 3rd Fl, New York, NY 10010 • 724 244 2491 • [email protected]
Now that we have had experience working together and a good idea of the content structure of the site, we
can scope out the front-end design and feature set. Following this check-in, we will have come up with a
proposed final cost that can be amended as needed throughout the remainder of the project.
3. CHECK-IN
5. TESTING AND LAUNCH
Test the site in all modern browsers and devices and make live at your domain.
Once significant content is added to WordPress and we have agreed on a feature scope and preliminary visual
design, it is time to implement it. Depending on the features determined in our check-in meeting, this cost will
vary. For example, a more static design such as https://www.cntpost.com/ would cost $3,500 whereas a design
with more animations and interactive features like http://www.dvf.com/ would be in the $5,500 range.
4. FRONT-END DESIGN AND DEVELOPMENT
• $500 deposit in order to draw up agreement and detailed timeline
• Both parties sign agreement
• Schedule kick-off meeting
• $1,750 deposit to begin development
NEXT STEPS
$3,000 - $6,500+
notlaura.com • @laras126
Step 4: Front-end & Design Different every time.
😩
PROCESS, NOT PRODUCT
notlaura.com • @laras126
Style TilesSamantha Warren
CarlisleINVITATION
The Carlisle collection is inspired by Yuling’s love of mixing and matching graphic patterns and hues, with careful attention paid to every fine detail. Featuring striking patterns and vivid colors, the pieces in this collection evoke a nostalgia for the glamour of the art deco era.
This statement invitation is graphic and eye-catching with a bow tie pattern, metallic copper foil-stamping, and a bi-color design. The piece is flat printed single-sided on luxuriously thick cover stock with a subtle eggshell textured finish with the names richly foil-stamped in a metallic copper sheen.
$ X for 100 Flat Printed, Foil-stamped Invitations with matching Matte Envelopes. Or $ X for 100 Flat Printed Invitations with matching Matte Envelopes.
QUANTITY
COLORS Mint and Navy with Metallic Copper Foil-stamping
PRODUCT DETAILS
CONCIERGE
Ordering Process Frequently Asked Questions
Share
ADD TO WISHLIST
25
ADD TO WISHLISTSUBMIT
Favicon
BESPOKE WORLD OF YULING STORIES CONCIERGECOLLECTIONS
#B83074#E6E6E3#FFFFFF#000000#916300
GRAPHIC
LUXE
SOPHISTICATED
ARCHITECTURAL
REFINED
This turned into yulingdesigns.com
PROCESS, NOT PRODUCT
notlaura.com • @laras126
Photoshop I’m totally fine with it.
This turned into v2ratings.com
PROCESS, NOT PRODUCT
notlaura.com • @laras126
HTML Wireframes
PROCESS, NOT PRODUCT
This turned into dijifi.com
notlaura.com • @laras126
_variables.scssIs the single, most important part.
See this one here.
PROCESS, NOT PRODUCT
notlaura.com • @laras126
SCALING…PROBLEM
Katrina 10th Anniversary, Weather.com Features
notlaura.com • @laras126
Content BlocksWith ACF’s Flexible Content Field
SCALING…PROBLEM
notlaura.com • @laras126
Front-endContent Blocks are fantastic for long form.
Hold the Fort, Weather.com Features
SCALING…PROBLEM
notlaura.com • @laras126
Lessons Learned1. If they can mess it up, they will.
SCALING…PROBLEM
notlaura.com • @laras126
45-75???!!!One option too many.
The Spillway, weather.com Features
SCALING…PROBLEM
notlaura.com • @laras126
Lessons Learned1. If they can mess it up, they will.
2. Environments get confusing.
SCALING…PROBLEM
notlaura.com • @laras126
“Why isn’t that article on staging anymore?”
“Weren’t you working on production?”
SCALING…PROBLEM
“No, I put it on staging.”
“Crap, I pulled from production today. ”
(restores backup)
notlaura.com • @laras126
Lessons Learned1. If they can mess it up, they will.
2. Environments get confusing.
3. Performance…oof.
SCALING…PROBLEM
notlaura.com • @laras126
SolutionSplit block sets into Chapters, display as Custom Type archive.
SCALING…PROBLEM
Aside: Watch out for ALL CAPS - that should be in CSS.
notlaura.com • @laras126
Lessons Learned1. If they can mess it up, they will.
2. Environments get confusing.
3. Out of memory…
4. Pick your battles; swallow your pride.
SCALING…PROBLEM
notlaura.com • @laras126
– Me paraphrasing Dan Mall or Mike Monteiro, I can’t remember which. They are both so smart.
“You are charging for an experience. The website is a bonus.”
notlaura.com • @laras126
Mike MonteiroWhat a rad dude.
notlaura.com • @laras126
notlaura.com • @laras126
Thanks!