{"id":19998,"date":"2013-01-27T16:04:51","date_gmt":"2013-01-27T23:04:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=19998"},"modified":"2013-03-27T13:49:40","modified_gmt":"2013-03-27T20:49:40","slug":"artists-website","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/artists-website\/","title":{"rendered":"Building a Mobile-First WordPress-Powered Artists Website"},"content":{"rendered":"

The complete process of designing an artist’s website from a mobile-first perspective using WordPress as a CMS.<\/p>\n","protected":false},"excerpt":{"rendered":"

The complete process of designing an artist’s website from a mobile-first perspective using WordPress as a CMS.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":17923,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-lodge-group.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":3374,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/redirect-mobile-devices\/","url_meta":{"origin":19998,"position":0},"title":"Redirect Mobile Devices","date":"August 11, 2009","format":false,"excerpt":"\"mobile.html\" would be replaced with the location of wherever your mobile version resides. This technique could be adapted to load an alternate stylesheet as well. For iPhones\/iPods Specifically","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13790,"url":"https:\/\/css-tricks.com\/snippets\/css\/remove-gray-highlight-when-tapping-links-in-mobile-safari\/","url_meta":{"origin":19998,"position":1},"title":"Remove Gray Highlight When Tapping Links in Mobile Safari","date":"August 23, 2011","format":false,"excerpt":"-webkit-tap-highlight-color: rgba(0,0,0,0); And then to allow :active styles to work in your CSS on a page in Mobile Safari: document.addEventListener(\"touchstart\", function(){}, true);","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306210,"url":"https:\/\/css-tricks.com\/video-screencasts\/180-tinkering-with-video-on-mobile\/","url_meta":{"origin":19998,"position":2},"title":"#180: Tinkering with Video on Mobile","date":"April 8, 2020","format":false,"excerpt":"Fair warning: I'm no expert on this stuff, I'm just playing around with video on the web and addressing some issues I have when showing off video clips in blog posts. I have an iOS simulator up in this video, and I'm putting an HTML video tag in a basic\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Video-Thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20034,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/005-photoshopping-mobile-part-1\/","url_meta":{"origin":19998,"position":3},"title":"#005 – Photoshopping Mobile, Part 1","date":"January 29, 2013","format":false,"excerpt":"We start out with our Photoshop file open. The rather silly looking \"elongated\" iPhone screenshot, which simply just gives us a canvas in the mobile first context. We start out as simple as can be: with Jeff's name. We need to pick a font straight away. This kind of thing\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20000,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/001-intro-to-the-series\/","url_meta":{"origin":19998,"position":4},"title":"#001 – Intro to the Series","date":"January 27, 2013","format":false,"excerpt":"Hello everyone! Welcome to the complete series on building a mobile first artist website with WordPress. This is slightly different than the last series where we recorded as we built. In this course, the \"final\" website is already built: JeffCampana.com. We'll still walk through every step of the building process,\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18307,"url":"https:\/\/css-tricks.com\/lodge\/v10\/044-responsive-tweaks-on-real-emulator\/","url_meta":{"origin":19998,"position":5},"title":"#044: Responsive Tweaks on Real Emulator","date":"September 16, 2012","format":false,"excerpt":"Squeezing down a desktop browser very narrow can give you a vague sense of how a responsive design works, but it's not an accurate representation of an actual small screen device. And actual small screen devices are what we're designing for here, not other curious designers squeezing their browsers down\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/19998"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=19998"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/19998\/revisions"}],"predecessor-version":[{"id":20824,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/19998\/revisions\/20824"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17923"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=19998"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=19998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}