I had a lone dream of becoming a writer once. it wasn’t daring in the least – Just a simple plan to see my name finely inked on newsprint paper someday. Then 4 years ago, I started working at the Savannah Morning News. And just as I was settling into my office chair, an editor shoved a camera in my hands and instructed me to go out and shoot. I didn’t realize it in that moment, but my safe approach to journalism would soon be succeeded by a greater ambition to enhance and reinvent my method of storytelling.
I’ve been at this coding thing for about a year now and while I can’t build web pages from scratch, I know enough about the language to understand how to customize and add on to existing themes and frameworks.
It’s my “fake it til you make it” method of producing impressive web projects – a secret that tons of others before me have learned with the help of some basic (and I really do mean basic) html knowledge.
Below is a look at the responsive web page I developed as a component to special coverage of a significant anniversary in Savannah:
Keep reading for more information on the development of this project
One thing that’s important to remember in manipulating a web page is that HTML is simply the skeleton of a website. But it’s the CSS that provides the skin. And you’ll need to have an understanding of both in order to create or recreate the sort of visually rich sites in high demand.
I think my former online editor Carl Lewis probably explains it best with an endearing geeky quip he often tells me.
“You’re the CSS to my HTML”
Meaning that while HTML provides structure, it’s the CSS that actually gives a website its pizzazz. (Thanks, Carl! )
To understand this relationship a little better, I recommend taking advantage of the free online courses provided by codeacadamy.com. It won’t teach you to how to create stunning websites but it’ll get you familiar with the language and functionalities of HTML and CSS, which will go a long way when you’re trying to find the elements you need and replace them with what you want.. Upon completion, codeacademy will also help you search for advanced classes in your area if you’ve developed a case of the code virus (see what i did there?).
For me, I learn best when I’m thrown into projects. I prefer the whole learn-as-you-go process by browsing sites offering free and customizable html frameworks. A lot of them are basic templates with a featured image component, a contact box, share buttons and other common web elements.
But you can also find a few sites that specialize in responsive design with stunning intros, interactive features and beautiful typography – and still FREE, by the way.
A favorite of mine is html5up. They’ve only got a handful of themes at the moment. But I promise you’ll be impressed nonetheless.
I recently used their Helios theme as the framework for a special Savannah Morning News web presentation on the 20th anniversary of John Berendt’s Midnight in the Garden of Good & Evil – the book that propelled Savannah as a major tourist destination.
I started by removing the ‘Helios’ title from the homepage display. All I had to do was locate the head tags and remove the text. I opted to keep this area clear of any additional text because I wanted the focus to be on the beautiful full-screen image of Bonaventure Cemetery. This also meant removing the navigation menu above. I didn’t really care for it anyway.
The start button, however, was a personal selling point for me because I liked how it launches the viewer to the second phase of the interactive. And without the navigation menu, it leaves you with only one available route, which promotes the lovely storybook feel I was going for.
Most of the follow-up design I kept the same. But I obviously added my own images and replaced the placeholder text.
I also removed a few excess promos from the carousel by deleting the code starting with the open/close tags that they’re identified as: <article> and </article>. see below.
Further down, I pasted the iframe from a TimlineJS created by my web colleague, Kendall Jackson and then proceeded with a preview of our big Midnight story by Kim Wade on the impact of the book in Savannah.
Still with me? I hope so.
If you refer to the original Helios theme, you’ll find there are sub pages provided in the top navigation menu on the homepage. The titles of each menu item explain what sort of layout they contain. ie.. right sidebar, left sidebar and no sidebar.
While I liked all of the layouts, I knew I didn’t have the time to work with any of the more enhanced pages. So considering my deadline, I made several duplicates of the no sidebar html file, customized them and linked them to their appropriate promos featured in the homepage carousel.
Perhaps, one day I’ll go back and replace those basic pages with Helios’ more visual options. But working under a tight deadline forced me to take a quicker route.
You’ll notice I also greatly simplified the footer on each of the pages. Once again, it was for the sake of meeting my deadline.
Code input, while it can be pretty easy and formulaic, takes a whole lotta time! And any small mistake, any forgotten bracket or colon can throw off your entire design.
So I kept the footers simple and consistent with one another and I was done with the entire presentation in less than a week.
Out of all of it, the hardest part was adding the savannahnow logo and the share buttons. That feature, alone, took me two hours to properly align – even after referring to dozens of online resources. Eventually, I just decided to keep tweaking until something worked. Based on all the chatter and techiniques I came across, I concluded this must be difficult for a lot of coders – though it seems it should be easy. And while I’m sure I may not have used the technically correct method, its end result has been pretty consistent on all devices and whaddayaknow – we’re up to 851 Facebook likes in just the 2 weeks since the project’s launch!
**Okay, quick disclaimer: I’ll admit I probably screwed up the twitter button somewhere in the code. The tweet count remains at a lonely ’1′, but if you hit that number, it pulls up a twitter feed featuring dozens of other accounts that have shared the link. But other times in only pulls up one result. bah. oh well. **
Anywho, despite the little kinks and the hasty finishing touches, the site still wowed a lot of folks in the community. And, admittedly, not just because of the design but mostly due to the amazing stories and archived content dug up, scanned, researched and developed by a small but dedicated team in the newsroom.
The site itself, is just a pretty frame to present a compelling story.
Obsessed with "Midnight in the Garden of Good and Evil" & this interactive marking its 20th anniversary http://t.co/GdR1Y9AIOH
Lastly, in the midst of all that coding, I had an opportunity to film a highly respected and long-standing journalist in the community: Mr. Jan Skutch, senior reporter at the Savannah Morning News. He was kind enough to sit down with me to share his experiences covering the Jim Williams trials – a 10 year saga that he was reluctant to revisit. But we’re thankful that he did.
I spend a lot of time thinking about how much I want to produce work that actually makes a difference in the community.
In December, I found an opportunity to do just that when I was introduced to Ms. Bynikini Frazier, a twenty-something animated 1st grade teacher at Hodge Elementary who was applying for a state grant for her school for the third consecutive year.
I spent a day filming her class and the rest of the month editing the video. But in the end, I didn’t feel satisfied with the final project. The audio had flaws. Some shots were shaky. And it was hard to feature all the key highlights and ambient settings in the required 2 minute video length.
I started questioning whether it was good enough for her to win and if I was ever cut out for this task in the first place.
But then Ms. Frazier emailed me with her thoughts on the video. And her words were so sincere and so encouraging, that I immediately understood why all of her precious 1st graders loved her. Why the entire staff at Hodge appreciated her. And why she was being honored by the Savannah-Chatham School Board as a nominee for Teacher of the Year.
Ms. Frazier said she didn’t care what the judges thought, she loved the video and how well it captured the spirit of her classroom. Her words snapped me out of my 7-year-old meltdown and I re-approached the final edits of the video knowing that the technical stuff didn’t matter so much because the story was there.
A month goes by without any word on the results and I begin to accept the realization that we lost the competition. But I still felt a sense of pride when I saw today’s morning paper and its centerpiece on the newly elected Teacher of the Year: Ms. Bynikini Frazier!
I remember thinking… I don’t just know this woman. I know how much she rightfully deserves this honor!
I sent her a brief congratulatory email and she responded shortly after with some follow-up news. She just found out that she’s a winner in The Governor’s Office of Student Achievement’s Innovation in Teaching competition.
yep. that’s the one I helped her with.
She’ll receive a $2,000 stipend and Hodge will receive a $5,000 grant for implementation of Georgia’s instructional standards.
My first break into the ever-emerging world of interactive storytelling began in 2012 with an elegant and simple open-source tool TimelineJS.
At the time, my digital editor Carl V. Lewis had just started at Savannah Morning News and one of his big priorities was to create more visually interactive components for major stories and investigative pieces on savannahnow.com. Rochelle-Small Toney’s scandal-laden tenure as the former City Manager of Savannah served as an exemplary prototype.
Complete with various multimedia elements, the project was unlike anything we’d ever featured on our site and all of us looked to Carl in awe of his digital alchemy. Always passionate to teach, he encouraged me and my web team colleague Cate Mafera to practice the tool for ourselves. So first chance I got, I made an interactive timeline of the 2012 Savannah Film Festival. Creating such a stunning display was astonishingly easy and really the only key requirement is to start with Timeline’s basic Google spreadsheet template to input the appropriate data for your project. With one media field, you can add everything from photos, videos, embedded tweets, maps, audio files and much more.
I kept my first timeline (which has since been updated to reflect the 2013 film fest lineup) pretty standard, adding only descriptions and movie trailers. But now I’m a timeline titan, using the tool to roundup other popular stories and hot topics.
Most recently, and with the help of staff archivist Julia Muller, I created a timeline which highlighted Paula Deen & family’s early history of business ventures, personal accomplishments and recent controversies. The project went on to be shared by We Support Paula Deen, a Facebook group with over half a million “likes”.
But perhaps the greatest thing Timeline has shown me is that enhancing and creating interactive digital content is not as intimidating as we make it out to be. There are tons of other cool tools available that will entice you to dip a toe in the massive pool of interactive content. And I guarantee that pretty soon you’ll be ready to dive right in for more challenging projects you never dared before.
Check out Carl’s video tutorial for more information on creating visually-rich timelines under deadline or explore the Film Fest timeline I created here. Click on the image below to see the timeline embedded on a special film fest page I created for our arts & entertainment publication Do Savannah:
Choosing a personal interpretation for The Daily Post’s current theme in their weekly photo challenge was easier than I thought. It took me just a few minutes to realize that my “beginning” is the reinvigoration of my dreams and passions in life.
No, it’s not much of an original thought.. But it’s an honest one, nonetheless.
Ironically, I was inspired by antiquity to portray this new beginning. Despite its inefficiencies to serve my digital needs, the typewriter in this photo is precious to me because
I love the idea of taking something old and making it new again.
Every now and then we could all use a similar jolt in our lives – to be reinvented. And that’s precisely the sort of change a New Year inspires..
When I woke up on January 1, I made one of my first purchases of 2014: a domain name for just $18/year. It wasn’t anything too ground shifting but registering for my own dotcom immediately sprung me into action.
In the last 5 days, I’ve probably changed my blog theme 20 times and I suspect I’ll change it again before the month is over. I can’t decide on page names, logo designs or sidebar widgets. I don’t know which old blogs I want to consolidate with my new site. And I can’t figure out for the life of me why my YouTube playlist keeps displaying a “video not found” error when I try to embed it on a side panel! It’s minute proof that beginnings aren’t always easy. But they’re exciting and rewarding all the same.
Slightly unrelated, I want to part with a quote Robin Roberts shared on Facebook that elegantly reflects our different outlooks on life.
“If you are depressed, you are living in the past. If you are anxious, you are living in the future. If you are at peace, you are living in the present.”
While living less than 500 feet from the café’s front door, I’ve had the warm pleasure of watching Foxy flourish during this past year. And as Savannah whisks into cooler temperatures and shorter days, more locals are migrating to Foxy’s cozy community of coffee lovers and modest décor.
In the 2 years since its doors first opened, the bourgeoning business has stirred up a loyal following of friends and regular customers drawn to its quiet Victorian home nestled in the heart of the city’s SoFo neighborhood. Its success has paved the way for a new and lively sister location The Coffee Fox, located downtown at 102 West Broughton Street, and a triumphant $20,000 Kickstarter campaign that granted Foxy a much needed 2nd floor expansion.
But more notably, Foxy is reestablishing the sort of intimate and comforting environment that coffee houses are truly all about. Just ask Travel + Leisure, which recently ranked Savannah on their list of America’s Best Coffee Cities while referring to Foxy Loxy as one of the “best places to soak up this southern city’s charm.”
Among its given amenities of lush couches, free WiFi, vast table space, and an array of delicious caffeinated beverages provided by Savannah’s very own PERC coffee roasters, Foxy takes things a step further with an alternative drinking experience (don’t miss their ‘Tecates and Tacos’ special on Fridays) and a Tex-Mex gourmet menu loaded with signature dishes.
A full slate of regularly occurring events at Foxy has long served as an excellent platform for local artists and musicians. Their popular Acoustic Tuesdays series showcases a variety of musical acts, while their involvement in the fledgling Art March Friday movement attracts and unites young artists and local business leaders in an effort to strengthen community in the arts.
If you’re visiting Foxy for the first time, don’t be afraid to do a little exploring. Otherwise you might miss the café’s finest feature – a beautiful outdoor courtyard draped with plenty of greenery and completed with wrought iron seating, string lights and a pillared altar for music performances. It’s the creative core of Foxy Loxy where guests can enjoy specials like ‘Crepes in the Courtyard’ or ‘Fire + Wine’ – a toasty event on Saturdays that offers half-priced bottles of wine, s’mores kits and fire pits.
Last weekend, I also discovered how perfect this venue is for receptions and private parties after attending 13 Bricks Clothing Company’s fundraising gala.
Earlier this summer, Savannah joined Spain, France, Italy, Chicago, San Francisco, Los Angeles, New York and Atlanta to host a Wall to Wall mural. Artist Matt Hebermehl transformed the wall at the former Metropole Cafe into a work of art for Converse Sneakers and Juxtapoz Magazine’s international “Wall to Wall” project. The mural is located at 109 Martin Luther King Jr. Blvd and will remain there for the next 30 days.