Responsive
UI & UX
We design and build interfaces around screen width so your site looks right and is easy to use on phone, tablet and desktop. For existing sites we start with a mobile audit and fix issues such as pages that overflow sideways, unreadable tables and forms that are hard to fill in.
Shrink the screen and watch the page re-arrange
A responsive page is not a shrunken desktop: the menu collapses, columns stack, the sidebar moves below the content. Drag the handle on the edge and see the breakpoints yourself.
↳ Drag the handle on the right edge, or focus it and use ← →.
Example service page
The same content, laid out legibly at every width.
Get in touchWhat we handle at every width
- 01
Mobile-first layout
Design starts from the narrowest screen; content is ordered by how it should read on a phone, then opens up into columns on wider screens.
- 02
Content-based breakpoints
Breakpoints are set where the layout starts to break, not by specific device models, and every width in between is tested too.
- 03
Mobile navigation
A usable phone version of large menus: a clean hamburger menu, featured shortcuts and a sticky contact or quote button.
- 04
Tables and comparisons
Price lists, specification and size tables turn into cards or controlled horizontal scrolling on mobile, so the page never overflows sideways.
- 05
Phone-friendly forms
A numeric keyboard for phone numbers and the right one for email; autofill support, large enough fields and a font size of at least 16px so iOS doesn't zoom in.
- 06
Screen-appropriate images
Right-sized images per device with srcset and sizes, WebP/AVIF formats, and separately cropped images for mobile where needed (art direction).
- 07
Fluid typography
Heading and body sizes that scale with screen width, with readable line lengths and line spacing.
- 08
Touch-friendly interaction
Sufficient touch targets and spacing; touch equivalents for information and menus that only appear on mouse hover.
- 09
Core Web Vitals
Targets of LCP ≤ 2.5 s, INP ≤ 200 ms and CLS ≤ 0.1 on mobile; preventing layout shift by reserving space for images and ad slots in advance.
Which screens and tools we test with
The test list is expanded based on your visitors' analytics data. Typical scope:
Current phones:The range where most visitors are. Portrait and landscape use, notch and bottom bar areas.
Browsers
iOS Safari, Android Chrome, Samsung Internet; on desktop, Chrome, Safari, Firefox and Edge.
Measurement tools
Browser developer tools and real devices, Lighthouse and PageSpeed Insights (lab data), and the Search Console Core Web Vitals report (real-user data).
The issues we see most often on mobile
Pages that overflow sideways
A fixed-width image, a long link or an embedded map can make the whole page scroll sideways on a phone, so users struggle to keep the content in view. We track down the elements causing the overflow and make them flexible.
Our services
www.ornek.com/hizmetler/kategori/alt-kategori/uzun-baglanti-adresi/teklif
Our services
www.ornek.com/…/teklif
Drag to compare · example
Fix the current site or rebuild it
Fix the current site
Resolving mobile issues in the theme or code.
- +Content, URLs and SEO history stay as they are
- +Shorter timeline and lower cost
- +Can be done in stages: critical pages first
- –You stay within the platform's limits
- –With very old themes, each fix can cause new side effects
Redesign and rebuild
A new interface built mobile-first from scratch.
- +Design and platform are renewed together
- +Speed and accessibility targets set from the start
- +Lower maintenance load
- –Longer timeline and bigger budget
- –URL changes require a 301 redirect plan
Often requested alongside responsive work
Responsive work, from audit to measurement
- 01
Mobile audit
The current site is reviewed at different widths and on real phones; Search Console and PageSpeed data are gathered and issues are listed with screenshots.
- 02
Prioritization
Issues are ranked by impact: first those blocking contact, quote and purchase steps, then visual issues.
- 03
Design and implementation
The necessary screens are designed per breakpoint and applied to the existing theme or code; shared components are fixed in one place.
- 04
Testing and measurement
Checks across the browser and device list, before-and-after speed measurements, and follow-up as field data (the Core Web Vitals report) updates.
Frequently Asked
Questions
Often, yes. We first look at the site's platform (WordPress theme, hosted package, custom code) and how widespread the issues are. If the issues are spread across a few templates, fixing makes sense; if the site is built on an old table-based structure or every page is hand-coded, rebuilding may cost less. At the end of the audit we present both options side by side.
Google indexes sites based on their mobile version (mobile-first indexing). Missing content, unreadable pages or a poor page experience on mobile can count against your site. A responsive layout won't bring rankings on its own, but it's a prerequisite for your content to be read properly on mobile.
We check the full range step by step, from 320 pixels up to wide desktop screens, on iOS Safari, Android Chrome and Samsung Internet, and on desktop in Chrome, Safari, Firefox and Edge. The devices your visitors use most according to analytics are added to the list as well.
They're the three metrics Google uses to measure page experience: loading time of the largest content (LCP, good threshold 2.5 s), responsiveness to interaction (INP, 200 ms) and visual stability (CLS, 0.1). They're measured with real-user data and reported in Search Console. After improvements, it can take a few weeks for the report to update.
These days it's generally not recommended. A separate mobile site means two content setups to manage, plus redirect and SEO complications. A responsive structure with one URL and one set of content that adapts to every screen is healthier for both maintenance and search engines.
No. Changes are made in a test environment (staging) first and go live after your approval. On hosted-package sites without a test environment, changes are applied during low-traffic hours, after taking a backup.
The number of distinct templates on the site (home, listing, detail, form pages), whether the issues stem from shared components or each page separately, and how much the platform allows us to change. After the audit, a proposal is prepared with work items and priorities.