Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DARYA A. BUSHMAKIN, MBA  Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare      ...
DARYA A. BUSHMAKIN, MBA          Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slidesha...
DARYA A. BUSHMAKIN, MBA       Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare ...
DARYA A. BUSHMAKIN, MBA       Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare ...
Upcoming SlideShare
Loading in …5
×

Web Design

1,348 views

Published on

Web Design Strategies - http://www.daryabushmakin.com/

Published in: Technology, Business
  • Be the first to comment

Web Design

  1. 1. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakin@gmail.com WEB DESIGNSemantic HTML markup: o Tags applied to convey meaning and content structure o HTML5’s new elements and attributes such as <nav>, <footer>, <article> and <aside>, which replace common generic block <div> and inline <span>, or new <audio> and <video>, which replace generic <object>.Enhanced searchability and relevance o Up-to-date is imperativeInternal and external communications o Integrate a Submit an RFP form on your website with a lead generation database, such as SalesForce o A CMS function such as a Contact Us form or Submit Your Questions tool can enhance communications between lapsed or potential clients and you.Progressive Enhancement (PE) o Create websites that are accessible to all devices, using a layered approach with a set of core principals stressing accessibility of content and functionality. o Content layer = rich semantic HTML markup o Presentation layer = CSS and styling o Client-side scripting layer = JavaScript or jQuery behaviorsPresentation styling and CSS o Semantic markup found in HTML5 o Evolving CSS3 standards o Colors, images, backgrounds, gradients, shadowing, text effects and moreQuick updatesContent Management System (CMS) o Used in meetingsAdaptive Images o A PHP script that works on any website, can help in this regard o Detects screen sizes abd re-scales versions of your HTML imagesFitText o The JQuery plugin o Will allow you to resize your fonts and ensure that they fit where they are supposed to regardless of the device or browser.PhotoSwipe o Free HTML/CSS/JavaScript libraryLess FrameworkSkeleton o Use of a lightweight 960-grid
  2. 2. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakin@gmail.com o Lightly styled forms, tabs, buttons and other elements that form the basic foundation of any mobile website. Responsive Design Usability o Keep things the same Rapid prototyping o Process of quickly mocking up the future state of a system, and allowing all stakeholders to provide input, to see that input thought out visually, observe users using it, and finally, to participate in an open discussion about what is learned. o A way to visualize, influence, explore, discuss, learn, test, fail, and iterate the user experience o “Neutral” artifact owned by all.Tools Aptus o Mac App for testing your responsive, adaptive, or mobile site at custom screen sizes. o First, select the desired screen sizes and user agents of your ‘devices.’ o Then load your site’s URL. Test it at those set breakpoints. You can also take screenshots of websites with the app, and it has the full WebKit inspector built-in. o Aptus doesn’t allow you to preview local files. Instead, you have to use a local hosting solution such as MAMP, and test your site that way. Also, you can’t paste a URL into the path bar, which makes the app useless compared to the bookmarklets available. RWD Bookmarklet by Victor Coulon o It’s easy to view your design at iPad and iPhone sizes, in both landscape and portrait orientation. o There’s even a button to toggle the onscreen keyboard, so you can optimize your forms for iOS devices. o Lack of custom screen size values. The Responsinator o Display your site inside the frames of popular smartphones and tablets. o Just enter a URL, and preview it on an iPhone, iPad, Kindle, and too many Android phones. PHP5 o PHP - http://php.net/downloads.php o PHP - http://en.wikipedia.org/wiki/PHP Front-End Development o What does a front-end web developer do? - http://www.onlinetools.org/articles/fed2.html o Great User Experiences Require Great Front-End Development - http://www.uxmatters.com/mt/archives/2012/04/great-user-experiences-require- great-front-end-development.php
  3. 3. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakin@gmail.com o Front-end development feeds to follow - http://paulirish.com/2010/front-end- development-feeds-to-follow/ o Front-end Code Standards & Best Practices - http://na.isobar.com/standards/ o 10 Skills to Become a Frontend Developer worth Millions - http://devblog.springest.com/frontend-developer-worth-millions CSS (Cascading Style Sheets) o CSS Tutorials - http://www.w3schools.com/css/ o Cascading Style Sheets - http://en.wikipedia.org/wiki/Cascading_Style_Sheets o CSS Beginner Tutorial - http://www.htmldog.com/guides/cssbeginner/ o Cascading Style Sheets - http://htmlhelp.com/reference/css/ Wordpress o Wordpress.org - http://wordpress.org/ o Developer Documentation - http://codex.wordpress.org/Developer_Documentation o WordPress - http://en.wikipedia.org/wiki/WordPress HTML5 o HTML5 - http://en.wikipedia.org/wiki/HTML5 o HTML5 Tutorial - http://www.w3schools.com/html5/default.asp o Browser Test - http://html5test.com/ o The Power Of HTML5/Javascript: A GameBoy Color Emulator In Your Browser - http://techcrunch.com/2012/08/13/the-power-of-html5javascript-a-gameboy-color- emulator-in-your-browser/ o Mobile HTML5 over-hyped; not suited to enterprise - http://www.cbronline.com/news/html5-on-mobile-over-hyped-not-suited-to- enterprise-130812 o Responsive HTML5 magento themes and WordPress themes – SmartStart - http://www.joomlavision.com/responsive-html5-magento-themes-wp-themes- smartstart/ Jquery o jQuery - http://jquery.com/ o jQuery UI - http://jqueryui.com/ o jQuery - http://en.wikipedia.org/wiki/JQuery o jQuery Tutorial - http://www.w3schools.com/jquery/default.asp o 50+ Amazing Jquery Examples- Part1 - http://www.noupe.com/jquery/50-amazing- jquery-examples-part1.html o jQuery Tools - http://jquerytools.org/A Few Examples janneyindustrialpainting.com - an industrial painting contractor weigelstownChildcare.com – a daycare, after school care, and summer camp provider focusdiscoverachieve.com/blog/ – a lifestyle and business coach blogger charleslichty.com – a couples and individual counselor
  4. 4. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakin@gmail.com allergyasthmafoundationLancaster.com - a non-profitHelpful Resources 7 Essential Books on Responsive Web Design You Do Not Want to Miss http://www.awwwards.com/7-essential-books-on-responsive-web-design-you-do-not-want-to- miss.html 4 ways a content management system makes it easy to keep your website fresh, http://blog.thepitagroup.com/2012/4-ways-a-content-management-system-makes-it-easy-to- keep-your-website-fresh/ Top 10 Responsive Web Design Tutorials http://www.webdesigndev.com/web- development/responsive-web-design-tutorials Understanding progressive enhancement techniques in web design, http://www.techrepublic.com/blog/webmaster/understanding-progressive-enhancement- techniques-in-web-design/1809 Responsive Web Design for the Ultimate User Experience - http://www.business2community.com/online-marketing/responsive-web-design-for-the- ultimate-user-experience-0243274 Rapid Prototyping the User Experience - http://solutions.wolterskluwer.com/blog/2012/08/rapid-prototyping-the-user-experience/ 3 Tools for Testing Responsive Web Designs - http://theindustry.cc/2012/08/07/3-tools-for- testing-responsive-web-designs/ What Content Marketing Can Learn From Your Closet - http://www.business2community.com/content-marketing/what-content-marketing-can-learn- from-your-closet-0242649 The Benefits of ‘Responsive Web Design’ - http://www.loungelizard.com/web-design- blogs/design/the-benefits-of-responsive-web-design/ 7 Tools for Responsive Web Design - http://www.developerdrive.com/2012/08/7-tools-for- responsive-web-design/ Separate Mobile Website Vs. Responsive Website - http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website- presidential-smackdown/ 10 Top Principles For Web Design (6) – Usability - http://www.seo-positive.co.uk/blog/10-top- principles-for-web-design-6-usability/ Responsive Web Design & What it Means for Future - http://webdesignsolutions.com/n-5226- responsive-web-design-what-it-means-for-the-future.html

×